Question

tl;博士版：我们如何使用MapBox GL构建快速等值区域图？

@RyanBaumann发布了一个例子：见https://ryanbaumann.squarespace.com/blog/2016/1/23/mapbox-gl-create-data-driven-styles

但是这个例子显示了直接在javascript中加载GeoJSON文件。关于如何处理大型GeoJSON文件的一个问题。我们假设你有一个18M的GeoJSON文件。并且您希望查看地图和数据驱动样式并有效地完成所有操作。

例如，我已经加载了一个大的GeoJSON文件：

https://cityregister.firebaseapp.com/recentsaleslocal.geojson

在此地图框样式中：

https://api.mapbox.com/styles/v1/fedex1/cijrx09ej007o90lx1g1m5b0j.html?title=true&access_token=pk.eyJ1IjoiZmVkZXgxIiwiYSI6ImNpam5jZXZvczAwZnd0b201ajhybXE0OW8ifQ.IumX7VWjU71UjEsKTN4bdw#11/40.7060/-73.9754

并且它会立即加载，并且在加载时不会通过网络传输整个18M。

但是当我使用Ryan显示的方法时，似乎我必须在加载时通过网络加载整个18M文件。这个速度要慢得多，特别是在慢速网络上。

我想知道有没有办法让数据驱动的样式和mapbox中的基本地图都在同一张地图上？

以下是一些例子：

https://cityregister.firebaseapp.com/map.html（即时加载，有基本地图，全部驻留在mapbox工作室服务器上。没有数据驱动的风格

https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html（加载速度非常慢，基本地图，mapbox上的基本地图，另一台服务器上的geojson。使用数据驱动的样式 https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html（立即加载，没有基本地图，似乎都是mapbox-gl生成的，使用数据驱动的风格。

我的问题是如何获得mapbox的速度和数据驱动的样式以及带街道的基本地图等。

感谢。

上面地图的图片。

快速nyc地图，但不是数据驱动的

快速nyc等值线，但没有基本地图

慢速等值线在网络上加载18M

Answer 1

这并不涵盖所有油漆和油漆。布局属性（以及完整的数据驱动样式正在积极处理：https://github.com/mapbox/mapbox-gl-js/pull/1932）但......

如果您将GeoJSON文档上传到Mapbox帐户，则会将其转换为矢量切片。然后，您可以在style.load事件后将其添加为自己的图层：

map.on('style.load', function() {
  map.addSource('SOURCENAME', {
    "type": "vector",
    "url": "mapbox://mapbox.660ui7x6"
  });
});

在此阶段，您可以使用无样式图层，以数据驱动的方式添加绘图属性：

var layers = [
  ['#723122', 25000000],
  ['#B86B25', 5000000],
  ['#F2F12D', 0]
];

layers.forEach(function(layer, i) {
  map.addLayer({
    "id": "layer-" + i,
    "type": "fill",
    "source": "SOURCENAME",
    "source-layer": "original",
    "paint": {
      "fill-color": layer[0]
    },
    filter: i == 0 ?
      ['>=', 'population', layer[0]] :
      ['all',
        ['>=', "population", layer[0]],
        ['<', "population", layers[i - 1][0]]
    ]
  });
});

您要定位的source-layer可以从mapbox.com/data上传的数据页面找到，也可以从它的tilejson doc找到：

https://a.tiles.mapbox.com/v4/mapbox.660ui7x6.json?access_token=<YOURACCESSTOKEN>

这是一个展示这件事的例子https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/

Answer 2

您可以在服务器端对GeoJSON文件进行编码，然后使用TopoJSON在客户端再次对其进行解码。这应该减少你的带宽，从而提供一个很好的速度提升。

TopoJSON是对拓扑进行编码的GeoJSON的扩展。而不是离散地表示几何，TopoJSON文件中的几何从称为弧的共享线段缝合在一起。 TopoJSON消除了冗余，提供了比使用GeoJSON更紧凑的几何表示;典型的TopoJSON文件比其GeoJSON等效文件小80％。此外，TopoJSON还有助于使用拓扑的应用程序，例如拓扑保留形状简化，自动地图着色和制图。

https://github.com/mbostock/topojson

使用MapBox GL的数据驱动地图（具有基本地图和快速的等值线）

2 个答案: