React Leaflet脱机-保存按钮组件

Question

我需要帮助，使此组件的保存按钮的工作。leaflet.offline包是这样的：https://github.com/allartk/leaflet.offline/blob/master/docs/api.md

React Typescript。

我正在尝试根据文档扩展react-leaflet。使用createLeafletElement和updateLeafletElement。我没有收到任何错误，但没有任何内容添加到地图中。

我的Layer组件叫做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。

Answer 1

这些是我的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>
    );
}