在 Google Maps API v3 中缩放到 geojson 多边形边界

Posted 2023-02-16

【中文标题】在 Google Maps API v3 中缩放到 geojson 多边形边界

【英文标题】：zoom to geojson polygons bounds in Google Maps API v3

【发布时间】：2015-04-14 22:25:32

【问题描述】：

我正在从 Postgis 数据库加载 geojson，并希望将其显示在我的地图上。 绘制多边形后，我希望地图缩放到所添加多边形的范围。

我的数据可以正常加载并在地图上正确显示，但我无法弄清楚如何获取边界并将缩放更改为新添加的多边形。 我尝试使用 Google 的部分代码 Data Layer: Drag and Drop GeoJSON example, 但显示的地图放大了靠近贝克群岛的太平洋某处，而多边形在卢森堡正确显示。

这里是我使用的代码：

window.addEventListener("load", func1);

function func1()
  //Load mapdata via geoJson
  var parzelle = new google.maps.Data();
  parzelle.loadGeoJson("./mapdata/get_parzelle_geojson.php<?php echo  "?gid=".$_GET['gid'];?>");

  // Set the stroke width, and fill color for each polygon
  var featureStyle = 
    fillColor: '#ADFF2F',
    fillOpacity: 0.1,
    strokeColor: '#ADFF2F',
    strokeWeight: 1
  

  parzelle.setStyle(featureStyle);
  parzelle.setMap(map);

  zoom(map);


function zoom(map) 
  var bounds = new google.maps.LatLngBounds();
  map.data.forEach(function(feature) 
    processPoints(feature.getGeometry(), bounds.extend, bounds);
  );
  map.fitBounds(bounds);


function processPoints(geometry, callback, thisArg) 
  if (geometry instanceof google.maps.LatLng) 
    callback.call(thisArg, geometry);
   else if (geometry instanceof google.maps.Data.Point) 
    callback.call(thisArg, geometry.get());
   else 
    geometry.getArray().forEach(function(g) 
      processPoints(g, callback, thisArg);
    );
  

有没有办法让它发挥作用？在google.maps.data-layers中似乎没有简单的方法来获取多边形的边界。

【参考方案1】：

您发布的代码存在问题。您可以使用 map.data 访问数据层。

工作代码 sn-p。最初缩放到 GeoJSON 中的所有特征。单击时缩放到每个单独的多边形。

window.addEventListener("load", func1);
var map;

function func1() 
  map = new google.maps.Map(document.getElementById('map-canvas'), 
    zoom: 4,
    center: 
      lat: 0,
      lng: 0
    
  );
  // Set the stroke width, and fill color for each polygon
  var featureStyle = 
    fillColor: '#ADFF2F',
    fillOpacity: 0.1,
    strokeColor: '#ADFF2F',
    strokeWeight: 1
  ;

  // zoom to show all the features
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(e) 
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);
  );

  // zoom to the clicked feature
  map.data.addListener('click', function(e) 
    var bounds = new google.maps.LatLngBounds();
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);
  );
  //Load mapdata via geoJson
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');


function processPoints(geometry, callback, thisArg) 
  if (geometry instanceof google.maps.LatLng) 
    callback.call(thisArg, geometry);
   else if (geometry instanceof google.maps.Data.Point) 
    callback.call(thisArg, geometry.get());
   else 
    geometry.getArray().forEach(function(g) 
      processPoints(g, callback, thisArg);
    );
  

html,
body,
#map-canvas 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

【参考方案2】：

您好，请尝试以下完美运行的代码，请将 url 替换为 geojson 文件路径。

$.ajax(
  url: url,
  dataType: 'JSON',
  success: function(data) 
    var lat = , lng = ;
    $(data.features).each(function(key,feature) 
      $(feature.geometry.coordinates[0]).each(function(key,val) 
        lng['max'] = (!lng['max'] || Math.abs(lng['max']) > Math.abs(val[0])) ? val[0] : lng['max'];
        lng['min'] = (!lng['min'] || Math.abs(lng['min']) < Math.abs(val[0])) ? val[0] : lng['min'];
        lat['max'] = (!lat['max'] || Math.abs(lat['max']) > Math.abs(val[1])) ? val[1] : lat['max'];
        lat['min'] = (!lat['min'] || Math.abs(lat['min']) < Math.abs(val[1])) ? val[1] : lat['min'];
      );
    );
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(lat.min - 0.01, lng.min - 0.01));
    bounds.extend(new google.maps.LatLng(lat.max - 0.01, lng.max - 0.01));
    map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());
  
);

【参考方案3】：

Maps API（至少从今天的 V3.26 开始）支持 Data.Geometry.prototype.forEachLatLng()，它抽象出各种 Geometry 类型。

鉴于您已经将 geoJSON 导入到 map.data，很容易重新缩放地图以适应（“fit-to-bounds”）：

var bounds = new google.maps.LatLngBounds(); 
map.data.forEach(function(feature)
  feature.getGeometry().forEachLatLng(function(latlng)
     bounds.extend(latlng);
  );
);

map.fitBounds(bounds);

如果您的功能由于其他原因（例如设置样式）已经在迭代，您可以将此代码放入现有循环中以提高效率。