如何将一个巨大的 GeoJSON 文件显示到 MapBox？

Question

我是 MapBox GL Js 的新手，我想通过 https 调用一个大的 GeoJSON 文件并将其显示到地图上。我认为调用 vector Tile 是最好的方法，我发现一些教程展示了如何将 GeoJSON 数据转换为 Vector Tile 但在服务器端或将其上传到 MapBox 样式，但我的 GeoJSON 文件经常更改。所以我发现 this solution 是一个名为 geojson-vt 的新 JavaScript 库，它描述了如何以疯狂的速度将巨大的 GeoJSON 文件动态（客户端）转换为矢量瓦片，这看起来就像我'我正在寻找，但是 !!，如何将它集成到 MapBox GL JS 中以调用图层？？

阻止使用 Mapbox GL JS 添加图层，结果如下： var tileIndex = geojsonvt(MyGeoJSON); var tile = tileIndex.getTile(z, x, y);

...或者我只是没听懂！请有人帮助或可以为我的问题提出一些其他解决方案。

Answer 1

我建议使用 Deck.gl GeoJSON Layer。这是一个例子：

<html>
  <head>
    <title>deck.gl GeoJsonLayer (Polygon) Example</title>

    <script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>

    <style type="text/css">
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
      }
      .deck-tooltip {
        font-family: Helvetica, Arial, sans-serif;
        padding: 6px !important;
        margin: 8px;
        max-width: 300px;
        font-size: 10px;
      }
    </style>
  </head>

  <body>
  </body>

  <script type="text/javascript">

    const {DeckGL, GeoJsonLayer} = deck;

    const COLOR_SCALE = [
      // negative
      [65, 182, 196],
      [127, 205, 187],
      [199, 233, 180],
      [237, 248, 177],

      // positive
      [255, 255, 204],
      [255, 237, 160],
      [254, 217, 118],
      [254, 178, 76],
      [253, 141, 60],
      [252, 78, 42],
      [227, 26, 28],
      [189, 0, 38],
      [128, 0, 38]
    ];

    const geojsonLayer = new GeoJsonLayer({
      data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',
      opacity: 0.8,
      stroked: false,
      filled: true,
      extruded: true,
      wireframe: true,

      getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,
      getFillColor: f => colorScale(f.properties.growth),
      getLineColor: [255, 255, 255],

      pickable: true
    });

    new DeckGL({
      mapboxApiAccessToken: '<mapbox-access-token>',
      mapStyle: 'mapbox://styles/mapbox/light-v9',
      initialViewState: {
        latitude: 49.254,
        longitude: -123.13,
        zoom: 11,
        maxZoom: 16,
        pitch: 45
      },
      controller: true,
      layers: [geojsonLayer],
      getTooltip
    });

    function colorScale(x) {
      const i = Math.round(x * 7) + 4;
      if (x < 0) {
        return COLOR_SCALE[i] || COLOR_SCALE[0];
      }
      return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];
    }

    function getTooltip({object}) {
      return object && `Average Property Value
        ${object.properties.valuePerSqm}
        Growth
        ${Math.round(object.properties.growth * 100)}`;
    }

  </script>
</html>

归因 here.

Answer 2

您无需担心 geojson-vt。 Mapbox-GL-JS 在内部执行此操作。因此，您只需按照标准文档加载 GeoJSON 层即可。

如果您的 GeoJSON 真的很大，那么限制因素可能是网络传输，这意味着您确实需要提供服务器端矢量切片服务。

Answer 3

哦，伙计，我花了 8 天时间研究它。解决方案是：

var vtpbf = require('vt-pbf');
var geojsonVt = require('geojson-vt');

var orig = JSON.parse(fs.readFileSync(__dirname + 'myjson.json'))
var tileindex = geojsonVt(orig)
var tile = tileindex.getTile(x, y, z); // mapbox sends automatic request to the server, and give x, y , z

// pass in an object mapping layername -> tile object
var buff = vtpbf.fromGeojsonVt({ 'geojsonLayer': tile });

我已经将结果发送到前端，它像 Mapbox API 一样工作。详情查看：https://github.com/mapbox/vt-pbf

从 Mapbox 方面：

            const  source = {
                type    : 'vector',
                'tiles' : [ 'http://localhost:1234/county?z={z}&x={x}&y={y}' ],
                minzoom : 0,
                maxzoom : 14
            };

            map.addSource('source', source );
            map.addLayer({
                'id'           : 'source',
                'type'         : 'fill',
                'source'       : 'source',
                'source-layer' : 'tiles-sequences',
                'fill-color'   : '#00ffff'
            });

如何将一个巨大的 GeoJSON 文件显示到 MapBox？

How to display a huge GeoJSON file to the MapBox?

geojson

mapbox-gl-js

vector-tiles