home > GIS > maptalks >

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

hits:

相对topJSON,geoJSON可读性蛮高。maptalks跟高德地图jsapi 做GeoJSON数据导入与导出地图,实例解析与功能对比分析。个人推荐优先使用,推荐还是使用mapbox 好。被maptalks感人的文档才记下此笔记

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

说实话,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