1

tl;dr 版本：我们如何使用 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.IumX7VWjU#71UjEsKTN0406w/71UjEsKTN04b

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

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

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

这里有一些例子：

https://cityregister.firebaseapp.com/map.html（立即加载，有底图，全部驻留在 mapbox studio 服务器上。没有数据驱动的风格

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

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

谢谢。

上面的地图图片。

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

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

快速的纽约 choropleth 但没有底图

快速的纽约 choropleth 但没有底图

慢 choropleth 通过网络加载 18M

慢 choropleth 通过网络加载 18M

4

2 回答 2

4

这并没有涵盖所有的绘画和布局属性（这里正在积极研究成熟的数据驱动样式：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 文档中找到您想要定位的目标：

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

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

于 2016-01-30T15:29:53.240 回答
1

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

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

于 2016-01-30T15:03:07.980 回答