我需要帮助以使该组件适用于保存按钮。leaflet.offline包是这样的:https://github.com/allartk/leaflet.offline/blob/master/docs/api.md
React Typescript。
我正在尝试根据文档扩展react-leaflet。使用createLeafletElement和updateLeafletElement。我没有收到任何错误,但地图上没有任何内容。
我的图层组件称为OfflineTileLayer。
这里是组件:
import L from 'leaflet';
import 'leaflet.offline';
import { MapControl, withLeaflet, MapControlProps } from 'react-leaflet';
type LeafletElement = MapControl;
type Props = { url: string } & MapControlProps;
class OfflineSaveControls extends MapControl<LeafletElement, Props> {
mapControl;
constructor(props, context) {
super(props);
}
createLeafletElement(props: Props): LeafletElement {
return this.mapControl = new L.control.savetiles(props.layer, {
zoomlevels: [13, 16], // optional zoomlevels to save, default current zoomlevel
confirm(layer, succescallback) {
if (window.confirm(`Save ${layer._tilesforSave.length}`)) {
succescallback();
}
},
confirmRemoval(layer, successCallback) {
if (window.confirm('Remove all the tiles?')) {
successCallback();
}
},
saveText: '<i class="fa fa-download" aria-hidden="true" title="Save tiles"></i>',
rmText: '<i class="fa fa-trash" aria-hidden="true" title="Remove tiles"></i>',
}).addTo(Map);
}
updateLeafletElement(fromProps: Props, toProps: Props) {
super.updateLeafletElement(fromProps, toProps);
}
}
export default withLeaflet<Props, OfflineSaveControls>(OfflineSaveControls);
如果这纯粹是错误的,是否有人会在react中使用leaflet.offline的另一种实现?由于某些原因,似乎很难扩展react-leaflet。
这些是我在leaflet.offline扩展中的相关位,只有它不在Typescript中。希望它可以节省您(或下一个人)的时间。
/**
* OfflineTileLayer.jsx
*/
import L from "leaflet";
import { GridLayer, withLeaflet } from "react-leaflet";
import "leaflet.offline/src/TileLayerOffline";
class OfflineTileLayer extends GridLayer {
constructor(props) {
super(props);
this.createTile = this.createTile.bind(this);
this.setDataUrl = this.setDataUrl.bind(this);
this._getStorageKey = this._getStorageKey.bind(this);
this.getTileUrls = this.getTileUrls.bind(this);
this.fire = this.fireLeafletEvent.bind(this);
}
createLeafletElement(props) {
return L.tileLayer.offline(props.url, this.getOptions(props));
}
updateLeafletElement(fromProps, toProps) {
super.updateLeafletElement(fromProps, toProps);
if (toProps.url !== fromProps.url) {
this.leafletElement.setUrl(toProps.url);
}
}
createTile(coords, done) {
return this.leafletElement.createTile(coords, done);
}
setDataUrl(coords) {
return this.leafletElement.setDataUrl(coords);
}
_getStorageKey(coords) {
return this.leafletElement._getStorageKey(coords);
}
getTileUrls(bounds, zoom) {
return this.leafletElement.getTileUrls(bounds, zoom);
}
}
export default withLeaflet(OfflineTileLayer);
/**
* SaveTilesControl.jsx
*/
import L from "leaflet";
import { MapControl, withLeaflet } from "react-leaflet";
import "leaflet.offline/src/ControlSaveTiles";
class SaveTilesControl extends MapControl {
constructor(props) {
super(props);
this.removeTiles = this.removeTiles.bind(this);
}
createLeafletElement({ layer, ...props }) {
return L.control.savetiles(layer, props);
}
updateLeafletElement(fromProps, toProps) {
super.updateLeafletElement(fromProps, toProps);
if (toProps.layer !== fromProps.layer) {
this.leafletElement.setLayer(toProps.layer);
}
}
removeTiles() {
this.leafletElement._rmTiles();
}
}
export default withLeaflet(SaveTilesControl);
然后使用它们:
import SaveTilesControl from "./SaveTilesControl.jsx";
import OfflineTileLayer from "./OfflineTileLayer.jsx";
import { mapOptions, layerOptions, controlOptions } from "./config.js";
const MapView = () => {
const baselayer = useRef(null);
return (
<Map id="mymap" {...mapOptions}>
<OfflineTileLayer ref={baselayer} {...layerOptions} />
{baselayer.current && (
<SaveTilesControl layer={baselayer.current} {...controlOptions} />
)}
</Map>
);
}