我正在构建一个GeoJSON编辑器,该编辑器在 vue2-google-maps 中显示预览。挑战之一是将GeoJSON的coordinates
转换为LatLngLiteral
,以用作<GmapMarker>
,<GmapPolygon>
或<GmapPolyline>
中的道具。我的解决方案是使用计算属性。因此,当更改GeoJSON时,地图对象也将更改。像这样:
computed: {
mapObject() {
// If the geometry is a point, just assign geometry.coordinates into `lat` and `lng`
if (this.$data.geometry.type === "Point") return ({
lat: this.$data.geometry.coordinates[1],
lng: this.$data.geometry.coordinates[0],
});
// If it's a polygon, grab the first set of coordinates (we aren't supporting polygons with holes for now).
// then splice off the last element (Google Maps' polygon automatically loop the shape, unlike GeoJSON's convention),
// then we map the values into an array of LatLngLiterals.
if (this.$data.geometry.type === "Polygon") return this.$data.geometry.coordinates[0].splice(-1, 1).map(e => ({lat: e[1], lng: e[0]}));
// If it's a LineString, do as above, without the splicing.
if (this.$data.geometry.type === "LineString") return this.$data.geometry.coordinates.map(e => ({lat: e[1], lng: e[0]}));
}
},
问题是,这不会针对Point
类型进行更新。不过,对于Polygon
和LineString
类型,这似乎工作正常。任何帮助将不胜感激。