Как отобразить огромный файл Geo JSON на MapBox? - PullRequest
0 голосов
/ 21 апреля 2020

Я новичок в MapBox GL Js и хочу вызвать большой файл Geo JSON через https и отобразить его на карте. Я думаю, что вызывать векторную плитку - лучший способ сделать это, я нашел несколько руководств, которые показывают, как преобразовать ваши данные Geo JSON в векторную плитку, но на стороне сервера, или загрузить их в стиль MapBox, но мой файл Geo JSON часто меняется. Итак, я нашел это решение - это новая JavaScript библиотека с именем geo json -vt, описывающая, как конвертировать огромные файлы Geo JSON в векторные плитки на лету (на стороне клиента) с безумной скоростью , Это похоже на то, что я ищу, НО !!, Как я могу интегрировать его в MapBox GL JS для вызова слоя ??

Блокировка на Как я могу добавить слой, используя Mapbox GL JS со следующим результатом: var tileIndex = geojsonvt (MyGeo JSON); var tile = tileIndex.getTile (z, x, y);

... Или я просто не понял! Пожалуйста, кто-нибудь поможет или может предложить другое решение моей проблемы.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Вам не нужно беспокоиться о гео json -vt. Mapbox-GL- JS делает это внутренне. Таким образом, вы можете просто следовать стандартной документации для загрузки слоя Geo JSON.

Если ваш Geo JSON действительно огромен, то, вероятно, ограничивающим фактором будет передача по сети, что означает, что вам действительно нужно быть обслуживание серверных векторных плиток.

0 голосов
/ 21 апреля 2020

Я бы рекомендовал использовать Deck.gl Geo JSON 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>

Атрибуция здесь .

...