将 GeoJson 导入 GoogleMap

Question

我在这里和那里阅读了答案和文档，但我认为在涉及多边形时我需要更多指导。这是我需要做的，

从 GeoJson 文件导入城市边界
使用坐标在我的地图上绘制多边形边界

Link 到 GeoJson 文件 - https://nominatim.openstreetmap.org/details.php?osmtype=R&osmid=3705576&class=boundary&addressdetails=1&hierarchy=0&group_hierarchy=1&polygon_geojson=1&format=json

在下面的代码中我试过了map.data.loadGeoJson() 这是未捕获的错误，message: "not a Feature or FeatureCollection" name: "InvalidValueError"

export default {
  data() {
    return {
      //Maps
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      map:null,
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
        
    initMap() {
      // Create the map.
      this.map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: 37.910076, lng: -122.065186 },
      });
      //Set boundaries*********************************Where I'm stucked********************************    

     this.map.data.loadGeoJson(
    "https://nominatim.openstreetmap.org/details.php?osmtype=R&osmid=3705576&class=boundary&addressdetails=1&hierarchy=0&group_hierarchy=1&polygon_geojson=1&format=json"
     );

      
    },

    
}

Answer 1

return数据中的type需要是“Feature”（目前是“administrative”）。

加载数据，修改数据，然后将修改后的 JSON 加载到 DataLayer 中对我有用：

  // request data
  $.ajax({
    url: "https://nominatim.openstreetmap.org/details.php?osmtype=R&osmid=3705576&class=boundary&addressdetails=1&hierarchy=0&group_hierarchy=1&polygon_geojson=1&format=json",
  }).done(function(data) {
    // modify the type to that expected by the DataLayer
    data.type = "Feature";
    map.data.addGeoJson(data);
  });

proof of concept fiddle

代码片段：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    },
  });
  // 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);
  });
  $.ajax({
    url: "https://nominatim.openstreetmap.org/details.php?osmtype=R&osmid=3705576&class=boundary&addressdetails=1&hierarchy=0&group_hierarchy=1&polygon_geojson=1&format=json",
  }).done(function(data) {
    data.type = "Feature";
    map.data.addGeoJson(data);
  });

}

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);
    });
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Simple</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>

将 GeoJson 导入 GoogleMap

Import GeoJson to GoogleMap

javascript

google-maps

openstreetmap

geojson

vue.js