ArcGIS JS 4加载第三方矢量切片

Posted 2020-11-24 polong

????现在矢量切片越来越普及,对于地图渲染能更轻更快。ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据。

????当切片大小在1M左右，加载效果还是可以。不过跟mapbox gl相比还是有些逊色，mapbox gl可以加载6M大小的切片，但ArcGIS JS 4却不行。矢量切片还是需要控制好大小，这样才能快速传输和渲染。

var style = {
  "version": 8,
  "sources": {
   "osm": {
     "tiles": ["https://osm-lambda.tegola.io/v1/maps/osm/{z}/{x}/{y}.pbf"],
      "type": "vector"
    }
  },
  "layers": [
   {
     id: "land",
      type: "fill",
      source: "osm",
      "source-layer": "land",
      minzoom: 0,
      maxzoom: 24,
      paint: {
       "fill-color": "rgba(150, 150, 150, 1)"
     }
   }
  ],
  "id": "test"
}

require([
 "esri/Map",
 "esri/views/MapView",
 "esri/layers/VectorTileLayer",
 "dojo/domReady!"
], function(Map, MapView, VectorTileLayer) {
 var map = new Map();
  var view = new MapView({
   container: "map",
    map: map,
    center: [-98.5795, 39.8283],
   zoom: 2,
 });
  var tileLyr = new VectorTileLayer({
   style: style
  });
  map.add(tileLyr);
});

参考资料：

https://gis.stackexchange.com/questions/300398/is-it-possible-to-add-vector-tile-layer-published-by-geoserver-layer-using-arcgi