javascript - 使用谷歌地图 js 从多边形内的 geojson 获取属性

Question

如何在绘制的多边形内访问 geojson 数据的属性？我有这个例子:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // Load GeoJSON.
  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');

  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: 'green',
    strokeWeight: 1
  });


  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    var coordinates = (polygon.getPath().getArray());

    // Get all features from polygon and geojson common part

    }
  );  
}

https://jsfiddle.net/j0f7ggeg/2/

每个特征都包含字母、颜色等属性。如果我在其中一个(或多个)字母上绘制一个多边形，我想获得属性。

Answer 1

一种选择是通过 Data Layer 中的特征进行处理使用 containsLocation 检查绘制的多边形是否包含它们的任何/所有点.此示例在数据层多边形边界的中心打开一个信息窗口。

proof of concept fiddle

代码片段:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });

  // Load GeoJSON.
  map.data.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json');

  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: 'green',
    strokeWeight: 1
  });


  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var coordinates = (polygon.getPath().getArray());
    map.data.forEach(function(feature) {
      var id = feature.getId();
      var color = feature.getProperty("color");
      var letter = feature.getProperty("letter");
      var geometry = feature.getGeometry();
      var type = geometry.getType();
      if (geometry.getType() == "Polygon") {
        var path = geometry.getArray()[0];
        var completelyContained = 0;
        var partiallyContained = false;
        var contained = false;
        var content = "";
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < path.getLength(); i++) {
          bounds.extend(path.getAt(i));
          if (google.maps.geometry.poly.containsLocation(path.getAt(i), polygon)) {
            completelyContained++;
            partiallyContained = true;
          }
        }
        var infowindow = new google.maps.InfoWindow();

        if (completelyContained == path.getLength()) {
          contained = true;
          content = "completly contained<br>";
        }
        if (partiallyContained == true)
          content += "partially contained<br>";
        if (contained || partiallyContained) {
          content += "letter: " + letter + "<br>";
          content += "color: " + color;
          infowindow.setContent(content);
          infowindow.setPosition(bounds.getCenter());
          infowindow.open(map);
        }
      }
      // alert() with property name 
    });
  });
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 100%;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing,geometry&callback=initMap">
</script>