Как отображать тайлы, размещенные на собственном хостинге, с помощью deck.gl MVtLayer?

Это может быть серия глупых вопросов, но когда я смотрю на https://deck.gl/docs/api-reference/geo-layers/mvt-layer, я не понимаю, как сделать MVTLayer, который извлекает тайлы на собственном хостинге без частей React. Может кто поможет? Это могло бы вызвать даже большой интерес сейчас, когда и в веб-программировании не существует сборки.

Я хотел бы получить простой файл HTML (например, index.html), в котором используется тег сценария, например <script src="https://unpkg.com/[email protected]/dist.min.js"></script>, и пример из вышеупомянутого Deck.gl, который выглядит так (я изменил URL-адрес)

import DeckGL from '@deck.gl/react';
import {MVTLayer} from '@deck.gl/geo-layers';

function App({viewState}) {
  const layer = new MVTLayer({
    data: `https://<selfhostedurl>/{z}/{x}/{y}.pbf`,

    minZoom: 0,
    maxZoom: 23,
    getLineColor: [192, 192, 192],
    getFillColor: [140, 170, 180],

    getLineWidth: f => {
      switch (f.properties.class) {
        case 'street':
          return 6;
        case 'motorway':
          return 10;
        default:
          return 1;
      }
    },
    lineWidthMinPixels: 1
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

но вместо этого сделайте это без React. Я вижу, что для определения HTML-элемента холста и его использования требуется немного больше кода. Пример Maplibre тоже подойдет. :) Есть один пример Maplibre на https://codepen.io/snickell/pen/dypOWzj.


javascript mapbox deck.gl
person Veksi    schedule 14.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать Scripting API для получения дополнительной информации. "простые" примеры, здесь у вас есть пример использования MVTLayer.

Deck.gl предлагает автономную связанную версию библиотеки - собственный интерфейс сценариев JavaScript, подобный интерфейсу d3.js.

Так просто как

const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: 'https://maps-api-v2.us.carto.com/user/public/carto/sql/{z}/{x}/{y}?source=SELECT * FROM ne_10m_railroads_public&api_key=default_public&format=mvt',
  initialViewState: {
    latitude: 41.4,
    longitude: 2.18,
    zoom: 5,
  },
  controller: true,
  layers: [
    new deck.MVTLayer({
      data: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt',
      getLineColor: [192, 192, 192],
      lineWidthMinPixels: 1
    })
  ]
});
person AdriSolid    schedule 19.02.2021