Настройте рендеринг тайлового слоя openstreetmap с помощью буклета - PullRequest
Новая
       92

Настройте рендеринг тайлового слоя openstreetmap с помощью буклета

0 голосов
/ 19 июня 2020

Я пытаюсь решить проблему. Я разрабатываю приложение с reactJS, и я хотел отобразить карту с маркером, который пользователь мог бы перемещать, и так далее. Поэтому я использовал листовку с пакетом react-leaflet, а openstreetmap использовал как TileLayer. Пока здесь все в порядке. Дело в том, что я хотел бы иметь возможность настраивать рендеринг OpenStreetMap (например, поставить дороги красным, лес - другим зеленым, не отображать морскую границу и т. Д.), Чтобы он больше соответствовал дизайну моего сайта. Я пытался найти какое-то решение в Интернете, но меня ничто не убедило, а может, я плохо их понял. Я думаю, что есть способ сделать это с помощью Leaflet VectorGrid https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html но мне это не очень понятно. Я указываю, что хочу использовать OpenStreetMap, а не такие решения, как mapbox. Я думаю, что это бесполезно, но вот мой код для отображения моей карты, чтобы показать вам, как я это сделал: 

      <Map center={position} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker
          position={position ? position : TOULOUSE_GPS_LOCATION}
          draggable={true}
          onDragend={handleMarkerPositionChange}
        >
          <Popup>
            Vous pouvez déplacer le marqueur afin <br /> d'ajuster au mieux votre position
          </Popup>
        </Marker>
      </Map>
    </Wrapper>

Заранее благодарим вас за ответы!

...