масштабирование до границ полигонов geojson в Google Maps API v3

Я загружаю geojson из базы данных Postgis и хочу отобразить его на своей карте. После рисования многоугольника я хочу, чтобы карта увеличилась до границ добавленного многоугольника.

Мои данные загружаются нормально и правильно отображаются на карте, но я не могу понять, как получить границы и изменить масштаб на только что добавленный многоугольник. Я попытался использовать части кода из уровня данных Google: перетащите и Отбросьте пример GeoJSON, но масштаб отображаемой карты увеличится где-то в Тихом океане недалеко от островов Бейкер, а в Люксембурге многоугольник отображается правильно.

Вот код, который я использую:

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.


google-maps-api-3 geojson
person geom    schedule 13.02.2015    source источник

Ответы (3)


arrow_upward
30
arrow_downward

Есть проблемы с вашим опубликованным кодом. Вы можете использовать map.data для доступа к слою данных.

Фрагмент рабочего кода. Изначально масштабирует все функции 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>

person geocodezip    schedule 13.02.2015

arrow_upward
26
arrow_downward

API Карт (по крайней мере, с сегодняшней версии 3.26) поддерживает Data.Geometry.prototype.forEachLatLng(), который абстрагирует различные Geometry типы.

Учитывая, что вы уже импортировали свой geoJSON в map.data, можно легко изменить масштаб карты, чтобы она соответствовала ("соответствие границам"):

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

map.fitBounds(bounds);

Если ваши функции уже повторяются по другой причине (например, установка стилей), вы можете включить этот код в существующий цикл для повышения эффективности.

person pscl    schedule 09.02.2017

arrow_upward
2
arrow_downward

Привет, попробуйте следующий код, который отлично работает, замените 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());
  }
});
person Arun_gok    schedule 24.12.2015