[英]Export geoJSON data from Google Maps
是否有內置支持或任何庫來從google.maps.Data
層或google.maps.Data.Feature
或google.maps.Data.Geometry
或什至使用Marker
、 Polyline
和Polygon
導出geoJSON
數據。我有類似的代碼這個,例如:
var point=new google.maps.Data.Point(m.getPosition());
activeFeature.setGeometry(point);
console.log(activeFeature.getGeometry());
equiLayer.add(activeFeature);
我想將此數據作為 geojson 導出到服務器。類似於leaflet
的toGeoJson
方法?
示例函數:
google.maps.Map.prototype.getGeoJson=function(callback){
var geo={"type": "FeatureCollection","features": []},
fx=function(g,t){
var that =[],
arr,
f = {
MultiLineString :'LineString',
LineString :'Point',
MultiPolygon :'Polygon',
Polygon :'LinearRing',
LinearRing :'Point',
MultiPoint :'Point'
};
switch(t){
case 'Point':
g=(g.get)?g.get():g;
return([g.lng(),g.lat()]);
break;
default:
arr= g.getArray();
for(var i=0;i<arr.length;++i){
that.push(fx(arr[i],f[t]));
}
if( t=='LinearRing'
&&
that[0]!==that[that.length-1]){
that.push([that[0][0],that[0][1]]);
}
return that;
}
};
this.data.forEach(function(feature){
var _feature = {type:'Feature',properties:{}}
_id = feature.getId(),
_geometry = feature.getGeometry(),
_type =_geometry.getType(),
_coordinates = fx(_geometry,_type);
_feature.geometry={type:_type,coordinates:_coordinates};
if(typeof _id==='string'){
_feature.id=_id;
}
geo.features.push(_feature);
feature.forEachProperty(function(v,k){
_feature.properties[k]=v;
});
});
if(typeof callback==='function'){
callback(geo);
}
return geo;
}
該函數用數據創建一個對象。 您可以將回調作為參數傳遞,它將以對象作為參數執行。
樣品調用:
//map is the google.maps.Map-instance
map.getGeoJson(function(o){console.log(o)});
演示: http : //jsfiddle.net/doktormolle/5F88D/
注意: Demo 中也存儲了圓,但 GeoJSON 不支持圓。 作為一種解決方法,它將圓存儲為具有半徑屬性的 POINT。
當具有半徑屬性的 POINT 將加載到數據層時,演示會隱藏標記並根據幾何形狀和半徑屬性創建一個圓。
<edit>
:現在有一個可用於 geoJSON 導出的內置方法: google.maps.Data.toGeoJson()
有關示例,請參閱在 Google 地圖之外保存地圖實例
嗨,我想分享我為將 geojson 數據從谷歌地圖導出到 html textarea 所做的工作。
這是我的 html 視圖
<article id="article3" style="">
<div style="margin: 2px 0px 2px 0px;">
<button onclick= "exportData()">Save</button>
</div>
<textarea id="geojson-input" placeholder="..." class="" style="height: 97%; width: 100%"></textarea>
</article>
這是我的 javascript
map.data.toGeoJson(function (data) {
document.querySelector('#geojson-input').innerHTML = JSON.stringify(data);
});
函數 togeojson 是 map.data 類的一個函數,將從地圖中獲取所有數據並返回對象。 為了在我的 textarea 上顯示該對象,我必須使用 JSON.stringify(data) 將該對象轉換為字符串;
希望會有所幫助!
這些都不適合我。 我想出了一種導出自定義多邊形的方法,這也可能對其他形狀有用。
這是密鑰導出功能:
function getPathArray(polygon) {
return polygon.getPath().getArray().map(p => {
return { lat: p.lat(), lng: p.lng() }
})
}
這是一個完整的例子:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: 25.774, lng: -70.190 }, // bermuda triangle
});
const bermudaTriangle = new google.maps.Polygon({
paths: [
{ lat: 25.774, lng: -80.190 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: true,
draggable: false
});
bermudaTriangle.setMap(map);
bermudaTriangle.getPaths().forEach(function (path, index) {
google.maps.event.addListener(path, 'insert_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
google.maps.event.addListener(path, 'remove_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
google.maps.event.addListener(path, 'set_at', function () {
var data = getPathArray(bermudaTriangle)
console.log(JSON.stringify(data))
})
})
google.maps.event.addListener(bermudaTriangle, 'dragend', function () {
console.log("dragged")
})
}
function getPathArray(polygon) {
return polygon.getPath().getArray().map(p => {
return { lat: p.lat(), lng: p.lng() }
})
}
然后使用打印到控制台的 json 並導入它
bermudaTriangle.setPath(JSON.parse(myJson))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.