Я хочу использовать подключаемый модуль для листовок под названием leaflet-geotiff (https://github.com/stuartmatthews/leaflet-geotiff) но я использую листовки React. Могу ли я преобразовать этот плагин в версию с рекламой листовок? Спасибо вам, ребята.
Использование плагина Leaflet js в React
Ответы (1)
Вот инструкция, как использовать leaflet-geotiff
библиотеку в react-leaflet
:
1) установите leaflet-geotiff
package
2) предлагается ввести следующие кастомные компоненты:
import React, { Component } from "react";
import { withLeaflet, MapLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet-geotiff"
import "leaflet-geotiff/leaflet-geotiff-plotty"
import "leaflet-geotiff/leaflet-geotiff-vector-arrows"
class GeotiffLayer extends MapLayer {
createLeafletElement(props) {
const { url, options } = props;
return L.leafletGeotiff(url, options);
}
componentDidMount() {
const { map } = this.props.leaflet;
this.leafletElement.addTo(map);
}
}
export const PlottyGeotiffLayer = withLeaflet(props => {
const { options, layerRef } = props;
options.renderer = new L.LeafletGeotiff.Plotty(options);
return <GeotiffLayer ref={layerRef} {...props} />;
});
export const VectorArrowsGeotiffLayer = withLeaflet(props => {
const { options, layerRef } = props;
options.renderer = new L.LeafletGeotiff.VectorArrows(options);
return <GeotiffLayer ref={layerRef} {...props} />;
});
3) и, наконец, добавляем слои на карту
<Map
center={this.props.center}
zoom={this.props.zoom}
length={4}
>
<TileLayer
url="https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
attribution='<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
id="mapbox.streets"
/>
<PlottyGeotiffLayer
layerRef={this.windSpeedRef}
url={windSpeedUrl}
options={windSpeedOptions}
/>
<VectorArrowsGeotiffLayer
layerRef={this.windDirectionRef}
url={windDirectionUrl}
options={windDirectionOptions}
/>
</Map>
Результат
person
Vadim Gremyachev
schedule
28.01.2019
Спасибо, это сработало, единственная проблема в том, что я не вижу слой геотифа. Его также не видно на демо
- person Ryan; 30.01.2019
@Ryan, на удивление я мог видеть оба слоя (векторные стрелки и график), см. Обновленный ответ
- person Vadim Gremyachev; 30.01.2019