javascript - 适合 map 内的边界-6ren

javascript - 适合 map 内的边界

转载作者：行者123 更新时间：2023-12-02 01:55:54

27

4

我使用 OSM 显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大并且不适合 map 。

如何在开始渲染之前调整缩放级别？

var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);
        
map.attributionControl.setPrefix();
        
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: \'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors\'
}).addTo(map);

function drawCountyBoundary(county, state) {
    url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
          fetch(url).then(function(response) {
              return response.json();
          })
          .then(function(json) {
          map.flyTo([json[0].lat, json[0].lon], 9);
          setTimeout(function(){
              geojsonFeature = json[0].geojson;
              L.geoJSON(geojsonFeature).addTo(map);
          }, 1900);
     });
 }
        
 drawCountyBoundary("Cibola", "NM");

最佳答案

缩放级别可以通过_getBoundsCenterZoom()计算

<html>
<head>
 <link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355950545359504175041b021b04" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
</head>
<body>
 <div id="mapCnty" style="width:500px;height:500px;"></div>
 <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610d0400070d041521504f564f50" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
<script>
var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);

map.attributionControl.setPrefix();

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function drawCountyBoundary(county, state) {
    url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
      fetch(url).then(function(response) {
          return response.json();
      })
      .then(function(json) {
          let geojsonFeature = json[0].geojson;
          let layer = L.geoJSON(geojsonFeature);
          // calc the zoom level
          let z = map._getBoundsCenterZoom(layer.getBounds());
          // fly duration, unit: second
          let flyDuration = 1.5;
          map.flyTo([json[0].lat, json[0].lon], z.zoom, {duration:flyDuration});
          setTimeout(function(){
              layer.addTo(map);
          }, flyDuration*1000);
     });
 }

 drawCountyBoundary("Cibola", "NM");
</script>
</body>
</html>

关于javascript - 适合 map 内的边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69608749/

27

4

0

文章推荐： r - 数据框中的所有列 NA 值都用 R 中的中值填充

文章推荐： sql - 如何在 SQL Server 中生成加密安全号码？

文章推荐： r - 为什么 5 == 3|7 在 R 中是 TRUE

c# - 适合/填充图像？
我正在制作一个简单的程序来更改我的计算机背景。我在网上发现了一个stackoverflow问题，或多或少涵盖了我想做的事情。我现在可以成功地将我的墙纸更改为平铺、居中和从在线图像 URL 拉伸(str
mysql - 适合 where 子句的组中的最大值
是的，这是另一个每组最大的问题之一!我已经尝试了几天，试图解决这个问题，但无济于事。我也一直在寻找，但我什至不知道我是否在正确的地方寻找。问题的最简化版本如下。我有 2 个表，一个是多对多表，另一个
适合 JavaME 语法的编译器推荐？
我想解析一些数据，我有一个 BNF 语法来解析它。谁能推荐任何能够生成可在移动设备上使用的代码的语法编译器？由于这是针对 JavaME 的，因此生成的代码必须是: 希望很小对外来 Java 库的依
r - 适合 ARIMA 模型
我有一个动物园时间序列对象，vels : 2011-05-01 00:00:00 7.52 2011-05-01 00:10:00 7.69 2011-05-01 00:20:00 7.67 2011
osgi - 适合 ERP 等应用程序的框架
我想创建一个供小型制造公司使用的生产管理系统。该系统将允许记录设备制造的不同阶段。要求如下: 1.非基于浏览器的界面。需要基于 Swing 或 AWT 的东西。虽然我了解实现基于浏览器的解决方案的便利
clojure - Lamson 适合 clojure？
是否有任何 java 或 clojure 邮件库可以实现 lamson 的功能？特别是lamson的邮件路由功能非常酷http://verpa.wordpress.com/2010/11/13/mak
python - Sklearn - 适合、缩放和变换
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。应用于训练集时，像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
javascript - 适合 map 内的边界
我使用 OSM 显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大并且不适合 map 。如何在开始渲染之前调整缩放级别？ var map = L.map("mapCnty").setV
javascript - 适合 JavaScript 的大小
我正在致力于缩小和丑化我的 javascript 文件。我想知道合适的尺寸是多大。如果我将所有js文件合并成一个文件(经过缩小和丑化)，它会大于1mb。我想，最好将它们分成 2-3 个文件(每个文件
java - TextArea 适合 GridPane
我是 Java 新手。我想在 GridPane 中放置一个 TextArea。我在过去几个小时内尝试了此操作，结果如下: 如您所见，TextArea 比我的 Gridpane 大得多。这是我的代码:
python - Sklearn - 适合、缩放和变换
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。应用于训练集时，像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
r - 适合 ARIMA 模型的时间序列的方差
我认为这是一个基本问题，但也许我混淆了这些概念。假设我使用 R forecast 包中的函数 auto.arima() 将 ARIMA 模型拟合到时间序列。该模型假设方差不变。我如何获得该方差？是残
javascript - 适合 map 内的边界
我使用 OSM 显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大并且不适合 map 。如何在开始渲染之前调整缩放级别？ var map = L.map("mapCnty").setV
ios - 适合 UItableView 单元格中的文本
我有一个很长的标签，这是我的第一个标签，我想把它放在我的单元格中。这就是我所拥有的，但它不起作用。我有一个自定义的 UITabelviewCell ，里面有几个标签。 -(CGFloat)table
python - 适合 WCS 来治愈
假设我有一个包含 WCS header 的 FITS 文件，这样我就可以执行以下操作: #import healpy as hp #import astropy.io.fits as pyfits #
适合 Web 设计师初学者的 jQuery
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭10 年前。 Improve
c# - 适合 Unity 的抽象工厂
我们正在构建一个与其他系统有多个集成接触点的应用程序。我们有效地使用 Unity 来满足我们所有的依赖注入(inject)需求。整个业务层是用接口(interface)驱动的方法构建的，实际实现在应用
ios - 适合 MKMapView 部分的注释
我得到了 MKMapView 和一些注释。我使用下一个代码来显示所有注释: NSArray *coordinates = [self.mapView valueForKeyPath:@"annotat
php - 适合 MySQL 查询最新状态
我在一家托管公司工作，我们经常收到安装、新域、滞后修复等方面的请求。为了大致了解仍然开放的内容，我决定制作一个非常简单的票务系统。我有一点 php 知识和一点 MySQL 知识。目前，我们将根据客户的
ios - 适合 UITableView 整个背景的图像大小
我想向我的 UITableView 添加背景图像，它适合 UI，还具有导航 Controller 和工具栏。在那种情况下，我没有找到适合 iPhone 和 iPad 不同屏幕的 tableview 的

首页

博学

6Ren·AI

商城

javascript - 适合 map 内的边界