javascript - 谷歌地图 - addGeoJson 不适用于我的文件

标签 javascript google-maps geojson

addGeoJson 在我的文件的谷歌地图中不起作用

请检查我在 javascript 中使用的以下代码

//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
   zoom: 6,
   center: {lat:49.79, lng: -8.82}
});

// Load GeoJSON.
var promise = $.getJSON("Sensitive_Areas_Nitrates_Rivers.json"); //same as map.data.loadGeoJson();
promise.then(function(data){
    cachedGeoJson = data; //save the geojson in case we want to update its values
    console.log(cachedGeoJson);
    map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});  
});

我已从 here 下载此文件

你可以检查我的 JSON 文件
Sensitive_Areas_Nitrates_Rivers.json

另外,您可以查看 link带多边形

我使用了下面的 JSON 格式,所以你可以检查一下

{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "EPSG:27700" } }, "features": [ { "type": "Feature", "id": 1, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 500051.6875, 224280.03130000085 ], [ 500047.2812999999, 224277.6875 ], [ 499977.5937999999, 224242.625 ], [ 499976.6875, 224242.21880000085 ] ] ] }, "properties": { "OBJECTID": 8, "type_of_sa": "SA_N", "datedesign": 1025136000000, "name": "Rivers Itchen", "length_km": 12, "uwwtd_code": "UKENRI134", "shape_Length": 12172.080443901654 } } ] }



[500051.6875, 224280.03130000085] - [X, Y] 坐标可能在 EPSG: 27700 到 EPSG:4326 中,现在我们需要在谷歌地图上显示这些坐标,有什么解决办法吗?

最佳答案

由于 Google map 预计 GeoJSON 位于 EPSG:4326 , Sensitive_Areas_Nitrates_Rivers.json需要重新投影。 QGIS ,例如,可以用于该问题(请参阅 docs 了解详细信息)

enter image description here

enter image description here

重新投影 Sensitive_Areas_Nitrates_Rivers.json图层将显示如下:

enter image description here

关于javascript - 谷歌地图 - addGeoJson 不适用于我的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59502331/

相关文章:

javascript - 使用 json 对 openlayers.vector 进行条件

javascript - 单文件组件无法在 Electron 应用程序中使用 Vuejs 渲染

java - 没有这样的方法错误: No virtual method getMapAsync

mysql - 如何在mysql中实现地理空间引用系统

android - 使用带有任何图片的 map View ?

javascript - PhoneGap - 按下谷歌地图 "Terms of use"时如何返回?

javascript - 扩展 Highmaps 副作用

javascript - 如何在不同的对象字段中查找重复值?

javascript - setInterval 动画

c# - HighCharts (highstock) - 数据不会显示