maptalks跟高德地图geoJSON导入导出与管理相对比

maptalks对geoJSON比较亲和，起码比高德AMap.GeoJSON类好用，

• 高德地图：https://lbs.amap.com/api/javascript-api/reference/overlay#geojson

• maptalks：https://maptalks.org/maptalks.js/api/0.x/GeoJSON.html

说实话，maptalks文档看起来还是比较感人。

地图导入geoJSON数据并绘制

相对topJSON，geoJSON可读性蛮高。topJSON虽然可以省流量，但是个人完全看不懂是什么鬼。所以，数据个人推荐一GeoJSON为主。

maptalks导入geoJSON数据并绘制

案列：https://maptalks.org/examples/cn/json/geojson-to-geometry/#json_geojson-to-geometry

let geometries = maptalks.GeoJSON.toGeometry(geoJSON, geometry => {
    // geometry.config('draggable', false)
}).addTo(map.getLayer('vector'))
// 或者
Geometry.fromJSON(GeoJSON)

高德地图导入geoJSON数据并绘制

案列：https://lbs.amap.com/api/javascript-api/example/overlayers/geojson

var overLayer = new AMap.GeoJSON({
  geoJSON: geoJSON,
  getMarker (geojson, lnglats) {
    return new AMap.Marker()
  },
  getPolyline (geojson, lnglats) {
    return new AMap.Polyline()
  },
  getPolygon: function (geojson, lnglats) {
    return new AMap.Polygon()
  }
})
geojson.setMap(map);
//重新加载数据，加载新的GeoJSON对象，转化为覆盖物，旧的覆盖物将移除
importData(GeoJSONObject)

从地图中取出GeoJSON数据

两者方法差不多，但是，要把地图上面的图形取出来且为geoJSON数据，相差蛮大

maptalks地图取geoJSON数据

maptalks，图层分为瓦片图TileLayer、图片层ImageLayer、矢量图VectorLayer等，矢量图形只能绘制到VectorLayer。

VectorLayer.getGeometries() 可以获取geometry，Geometry有toGeoJSON方法

let geoJSON = {
  type: 'FeatureCollection',
  features: map.getLayer('vector').getGeometries().map(item => {
    return item.toGeoJSON()
  })
}

百度地图，如果数据都在GeoJSON 图层上，直接toGeoJSON()，如果不是，就要一个个转换了

function lngLatToCoordinate (lngLat) {
  return Array.isArray(lngLat) ? lngLat : [lngLat.lng, lngLat.lat]
}

let types = {
  Marker: 'Point',
  Polyline: 'LineString',
  Polygon: 'Polygon',
  Rectangle: 'Polygon',
  Circle: 'Polygon'
}
let geoJSON = {
  type: 'FeatureCollection',
  features: map.getAllOverlays().map(vector => {
    let type = vector['CLASS_NAME'].substring(5)
    if (!types[type]) {
      return false
    }
    let coordinates
    if (type === 'Marker') {
      let position = vector.getPosition()
      coordinates = lngLatToCoordinate(position)
    } else {
      let path = vector.getPath()
      coordinates = path.map(lnglat => lngLatToCoordinate(lnglat))
      if (type === 'Polygon') {
        coordinates = [coordinates]
      }
    }
    return {
      type: 'Feature',
      properties: vector.getExtData(),
      geometry: {
        type: types[type],
        coordinates: coordinates
      }
    }
  })
}

百度地图也类似

推荐还是使用mapbox 好，自定义性好，美观。个人最看重的还是开发文档。

转载本站文章《maptalks跟高德地图geoJSON导入导出与管理相对比》,
请注明出处：https://www.zhoulujun.cn/html/GIS/maptalks/2019_1118_8218.html