Leaflet OSM:多边形上的中心地图视图

2024-03-23

我想生成一个 html 文件,包括Leaflet库来显示OpenStreetMap用多边形查看。地图上的多边形应居中。为此,我遵循this https://github.com/Leaflet/Leaflet/issues/1196讨论,但我仍然不清楚如何将任意多边形居中并自动缩放。自动缩放对我来说意味着多边形完全位于可见地图摘录中并填充它。

例如,这将是期望的结果:

到目前为止,这是我的代码:

    var map;
    var ajaxRequest;
    var plotlist;
    var plotlayers=[];

    function initmap() {
        // set up the map
        map = new L.Map('map');

        /* --- Replace for different URL for OSM tiles */
        var url_base ='URL_TO_MY_OPENSTREETMAPS_SERVER';
        var latitude = 50.2222;
        var longtitude = 3.322343;
        var poly = L.polygon([
           [50.2222, 3.322343],
           [50.2322, 3.323353],
           [...]
        ]);


        // create the tile layer with correct attribution
        var osmUrl=url_base+'{z}/{x}/{y}.png';
        var osmAttrib='Map data ɠOpenStreetMap contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 4, maxZoom: 20, attribution: osmAttrib});       

        // start the map at specific point
        map.setView(new L.LatLng(latitude, longtitude),15);
        map.addLayer(osm);
        poly.addTo(map);
    }

尤其是,如果有“板载”方法,那就太好了Leaflet我可以使用。如何计算多边形的中心是清楚的(例如here https://stackoverflow.com/questions/3081021/how-to-get-the-center-of-a-polygon-in-google-maps-v3)但也许已经有我可以使用的已实现的方法。

解决方案:

// start the map at specific point
// map.setView(new L.LatLng(latitude, longtitude),15); <- Remove this line
map.addLayer(osm);
poly.addTo(map);
map.fitBounds(poly.getBounds()); // <- Add this line

不完全居中,但如果您希望地图适合多边形:

map.fitBounds(poly.getBounds());

(doc http://leafletjs.com/reference.html#map-fitbounds).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Leaflet OSM:多边形上的中心地图视图 的相关文章

  • 如何在 JavaScript 中检查未定义的变量

    我想检查变量是否已定义 例如 以下内容会引发未定义的错误 alert x 我怎样才能捕获这个错误 在 JavaScript 中 null是一个对象 不存在的事物还有另一种价值 undefined DOM 返回null对于几乎所有无法在文档中
  • JSSOR - 无法读取未定义的类型属性“currentStyle”

    我正在尝试将 Jssor 滑块实现到我的页面中 但我不断在标题中出现该错误 我的内容是通过 Javascript 动态创建的 如下所示 var slide app createHTML div id inventorySlides null
  • 如何在 Asp.Net MVC 上实现客户端 Ajax 登录(Asp.Net Webforms 解决方案的链接位于此处)

    我正在尝试在 Asp Net MVC 上实现客户端 ajax 登录 我以前在 WebForms 上设置得很好 但现在我已经转向 MVC 这给我带来了一些麻烦 如果您想要有关 Asp Net Webforms 的客户端 Ajax 登录的教程
  • 确定用户是否在shadow dom之外单击

    我正在尝试实现一个下拉菜单 您可以单击外部将其关闭 下拉列表是自定义日期输入的一部分 并且封装在输入的影子 DOM 内 我想写一些类似的东西 window addEventListener mousedown function evt if
  • Node.js 循环发送 http 请求

    我实际上遇到了使用 node js 执行的 javascript 代码的问题 我需要循环发送http请求到远程服务器 我在代码中设置了www google ca 这是我的代码 var http require http var option
  • 如何在正则表达式中区分数字和ip地址?

    例如 如果我们查看 5 56 和 183 55 0 144 基本上 当你做这样的事情时 d d 它匹配 5 56 189 55 和 0 144 有没有办法通过正则表达式仅匹配数字而不匹配 ip 地址的部分 我尝试使用前瞻 但我不知道它应该是
  • 有效地获取下拉列表中的选定选项(XHTML Select 元素)

    背景 使用 XHTML Select 元素的下拉列表中有大量选项 数十个 我需要使用 JavaScript 检索所选选项 Problem 目前我正在使用 jQuery selectedCSS 选择器并且它按预期工作 但这种方法效率不高 因为
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 在流星收集加载时显示加载程序

    我有一个模板 task list 看起来像这样 each tasks gt task each Template task list tasks返回一个集合 在用户界面中 加载似乎需要一些时间 当集合正在加载时 我想显示一个加载指示器 关于
  • 如何在 Web 应用程序中使用 Javascript 安全地访问 Windows Azure 移动服务?

    我需要一本 web javascript 安全入门书 根据如何使用 Windows Azure 移动服务的 HTML JavaScript 客户端 http www windowsazure com en us develop mobile
  • CSS 按钮将线性渐变背景转换为透明背景

    我有一个带有线性渐变背景 橙色边框和一些文本的按钮 当我将鼠标悬停在按钮上时 我希望背景变得透明 而不更改按钮的其他属性 我尝试将不透明度转换为 0 但显然 这会隐藏边框和文本 我也尝试过转换背景 但它不起作用 因为我没有要转换到的端点 因
  • Array.indexOf 如何比 Array.some 更高效

    这个问题的灵感来自于这个问题的竞争答案 具有多个参数的indexOf https stackoverflow com questions 39000151 indexof with multiple arguments 用户想知道一种有效的
  • 获取传单地图放大时的标记列表

    我是传单新手 我已按照以下步骤设置了地图https github com Asymmetrik ngx leaflet https github com Asymmetrik ngx leaflet 我正在尝试获取地图放大区域中的标记列表
  • 为缺少字体的 Web 浏览器降低 Unicode 字符的质量

    我在 html 文档中使用 Unicode 检查标记 U 2713 我发现它在大多数浏览器中都可以正常显示 但偶尔我会遇到有人的电脑上缺少字体 如果字体丢失 是否有 HTML JS 技巧来指定替代显示字符 或图像 没有直接的方法可以判断任何
  • Struts html:text 标签内的 HTML5 占位符

    我在 Web 应用程序中使用 Struts 1 3 10 并且希望我的文本字段有一个占位符 不幸的是 当前的 Struts taglib 无法识别此属性 如果可能的话 我希望避免使用 javascript 你知道有什么解决办法吗 Strut
  • 黑色左/右三角形大小不同

    我使用黑色左指三角形 右左指三角形几何形状作为网站上的链接 并使用它们的 HTML 代码 和 9664 9654 由于某种原因 即使我在没有其他元素的空白页面上使用三角形 它们也不会以相同的大小显示 在 Chrome 上 向左指向的位置比向
  • 您最喜欢的 JS/CSS 下拉菜单是什么? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 希望在网站上实现一个 只是好奇其他人都使用过什么以及他们有过什么样的体验 EDIT我也不是一个超级粉丝
  • 如何设置 .eslintrc 来识别“require”?

    我是新来的ESLint http eslint org 并且我已经成功地将 ESLint 与IntelliJ https www jetbrains com idea 开箱即用 我的 ESLint 集成无法识别node 但对文档的基本审查表
  • 为什么 JavaScript 默认导出不可用?

    为什么默认导出不像命名导出那样实时 lib js export let counter 0 export function incCounter counter export default counter main1 js import
  • nodeJS exec 不适用于“cd”shell cmd

    var sys require sys exec require child process exec exec cd home ubuntu distro function err stdout stderr console log cd

随机推荐

  • Android 以编程方式接听电话

    是否可以以编程方式在android中接听电话 我发现有些地方不可能 但随后安装了应用程序https play google com store apps details id com a0softus autoanswer https pl
  • JqueryUI可排序滚动问题

    我已经初始化了 items作为jquery可排序 使项目列表可排序 items是父 div 的子 div content 父级div content最大高度设置为 40 并且允许在溢出时滚动 这是CSS content parent div
  • Clojure ^floats 与 #^floats?

    有什么区别 floats and floats在 Clojure 类型注释中 在拉取请求中 有人建议我使用此注释 put floats init fft array 这确实有效 但我不知道为什么会有 我发现这也有效 put floats i
  • ScrollView 根本不滚动

    我无法使 ScrollView 正确滚动 它总是切断底部的内容 就好像它是一个普通的 LinearLayout 一样 My code
  • 我会被这个代码攻击吗?

    我购买了一个脚本 其中有一些奇怪的代码 我是一名 PHP 初学者 但对清理输入数据之类的事情略知一二 这是代码
  • 如何判断代码是否将在 Blazor 的客户端或服务器上运行?

    我是 Blazor 开发的新手 我可能在这里遗漏了一些明显的东西 但是搜索 google 阅读文档和搜索此网站并没有为我找到答案 出于安全原因 我需要确保一些代码在服务器端运行 例如散列密码 我知道 Blazor 通常会自动确定代码的运行位
  • Asp.net Viewstate不保存控件的样式

    我读过 asp net 中的视图状态存储以下值控制属性跨回发 假设我有一个带有文本框的页面
  • JQgrid 从列中保存和恢复对象

    可以将复杂的对象保存到列中并在之后恢复它 这是一个例子 杰森 datamain mydata address data1 15 data2 0 0 data3 1000 Jqgrid jQuery rowed5 jqGrid datatyp
  • 如何在检索 ListView 项目时显示“正在加载...”文本

    还有一些其他应用程序可以执行此操作 例如 Twitter Facebook 甚至是 Android Market 等本机应用程序 当您想要显示从互联网检索到的项目列表时 这看起来像是向用户显示有关正在进行的操作的一些通知的标准方法 这是一个
  • Apache 上不带尾部斜杠的虚荣 URL

    下面的代码重写了我们网站上 profiles 目录中的所有 URLexample com profiles name to example com name 但我们还想删除结尾的斜杠 以进一步简化生成的 URL 使其更漂亮example c
  • 1 个 django 应用程序中约有 20 个模型

    我已经开始为自己开发一个通过浏览器运行的本地应用程序 最近读完 django 教程后 我认为使用 django 而不是简单的 python 可能会更好 有一个问题 我至少有 20 个模型 每个模型都有很多功能 很简单 它将创建一个巨大的模型
  • Android 应用程序中带有 KeyStore.getInstance 的 NoSuchAlgorithmException

    我在android中编写程序用于与服务器通信 我使用SSL协议 当我编写这段代码时 KeyStore ks KeyStore getInstance JKS 我收到这个错误 java security NoSuchAlgorithmExce
  • Mockito:如何在 Spy 中模拟对象

    该应用程序运行在JEE环境中 我希望将 Spy 注入到被测试的 bean 中 Spy 对象内部还有一些需要注入的 bean 如何将这些 bean 的模拟注入到 Spy 中 这是用例 package testinject2 import ja
  • 如何使用 MATLAB 创建 k 阶矩阵?

    我希望创建一个排名矩阵k 矩阵的维数是m x n 输入k满足这个条件k lt min m n 目前还不太清楚您的目标是什么 但为了创建一个矩阵B具有特定等级k 从矩阵A with rank至少k 您可能想利用svd并继续如下 gt gt g
  • 如何使用 Django Channels 进行多线程 AsyncConsumer

    我已经使用 Django Channels 一周了 有些事情让我烦恼runworker并行性 例如 我有一个 MQTT 客户端 它在收到消息时在通道中发布 基本 async def treat message msg channel lay
  • 如何使用 tesseract 4.0 或使用 pytesseract 检测图像中的表格? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想检测图像中的表格 识别表格块以及其中可能的文本 在 tesseract 的早 期版本中 可以使用参数 textord dump t
  • Mybatis 3.0.5 嵌套集合映射示例

    我正在研究 MyBatis 3 0 5 的映射功能 运行嵌入式模式的数据库是H2 1 3 160 在用户手册的帮助下 我让简单的部分工作起来 但我很难绘制出Set使用一个HashMap作为后备存储 以下是自定义集合的 Java 代码 该集合
  • IntellijIdea 中未解决的参考 Kotlinx。即使添加库后

    我只是想尝尝 Kotlin 协程 不幸的是 我无法使用该库kotlinx in IntelliJ 我已经通过下载了该库Maven 尝试使缓存无效 重建项目 尝试在新项目中使用它 Even IntelliJ正在建议kotlinx在自动完成中
  • 有没有办法在 Windows 中安装 therubyracer?

    有没有办法安装 therubyracer gem 即在 Windows 中运行 RoR 项目所需的方法 我尝试过正常方式 但不行 然后我尝试安装 cygwin 然后尝试安装 gem 但仍然没有运气 有人在windows下成功安装过这个吗 我
  • Leaflet OSM:多边形上的中心地图视图

    我想生成一个 html 文件 包括Leaflet库来显示OpenStreetMap用多边形查看 地图上的多边形应居中 为此 我遵循this https github com Leaflet Leaflet issues 1196讨论 但我仍