Question

我尝试从https://github.com/tumerorkun/react-leaflet-search实施react-leaflet搜索，但是没有成功。以下是我的代码（不包括react-leaflet搜索）。谁能帮助我。

嗨，我尝试从https://github.com/tumerorkun/react-leaflet-search实施react-leaflet搜索，但没有成功。

以下是我的代码（不包括react-leaflet搜索）。谁能帮助我。

import React from "react";
import L from "leaflet";
import 'leaflet-timedimension/dist/leaflet.timedimension.src';
import omnivore from '@mapbox/leaflet-omnivore';
import { Map, Marker, Popup } from 'react-leaflet';
import { ReactLeafletSearch } from 'react-leaflet-search';
// import * as countries from './data/map.geojson';

const config = {};

config.default = {
    center: [51.505,-0.09],
    zoomControl: true,
    zoom: 4,
    maxZoom: 19,
    minZoom: 11,
    scrollWheel: false,
    legends: true,
    infoControl: true,
    attributionControl: true
};

config.tdOptions = {
    timeInterval: "2018-09-30/2018-10-30",
    period: "PT1H",
};


// ===== Example data sources
config.wmsOne = {
    url: "https://demo.boundlessgeo.com/geoserver/ows",
    options: { layers: 'nasa:bluemarble', transparent: true },
    attribution: "&amp;copy <a href=&quot;http://osm.org/copyright&quot;>CHANGE THIS</a> contributors",
};

config.wmsTwo = {
    url: "https://demo.boundlessgeo.com/geoserver/ows",
    options: { layers: 'ne:ne', transparent: true },
    attribution: "&amp;copy <a href=&quot;http://osm.org/copyright&quot;>CHANGE THIS</a> contributors",
};

config.osmLayer = {
    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    params: {
        minZoom: 11,
        attribution: "&amp;copy <a href=&quot;http://osm.org/copyright&quot;>CHANGE THIS</a> contributors",
        id: '',
        accessToken: ''
    }

};
// ===== END Example data sources



export default class LeafletMap extends React.Component {
    constructor() {
        super();
        this.state = {
            lat: config.default.center[0],
            lng: config.default.center[1],
            zoom: config.default.zoom,
            toggleActive: true,
            timeInterval: config.tdOptions.timeInterval,
            period: config.tdOptions.period,
            gpxLayer: null,
            gpxTimeLayer: null,
        };

        this.initMap = this.initMap.bind(this);
        this.initTimeDimension = this.initTimeDimension.bind(this);
        this.onClick = this.onClick.bind(this); // Necessary?
    }
    // Executed when component is mounted   Leaflet-React MAP component
    componentDidMount() {

        this.initMap();

        // this.initTimeDimension(); // TODO: MAKE WORK GOOD!
    }

    initMap() {
        // Usual Leaflet way, but we're using react-leaflet's <Map> component instead
        /*this.map = new L.map("root", {
            center: [this.state.lat, this.state.lng],
            zoom: config.params.zoom,
            timeDimension: true
        });*/

        console.log("### Initializing Leaflet map");

        // Tile layer(s)
        const tileLayerA =
            L.tileLayer.wms(config.wmsOne.url, config.wmsOne.options);

        const tileLayerB =
            L.tileLayer.wms(config.wmsTwo.url, config.wmsTwo.options);

        const tileLayerC = L.tileLayer.wms(config.osmLayer.url)
            .addTo(this.map.leafletElement);


        // const countriesLayer = L.geoJson(countries, {});


        // Add controls for toggling layers
        L.control.layers({
            "OSM Layer": tileLayerC,
            "Layer Two": tileLayerA,
            "Layer One": tileLayerB
        }).addTo(this.map.leafletElement);

    }


    // TODO: Make work!

    initTimeDimension() {
        console.log("### Init Leaflet TimeDimension");

        let gpxTl = L.timeDimension.layer.geoJson(this.state.gpxLayer, {
            updateTimeDimension: true,
            addlastPoint: true,
            waitForReady: true
        });

        this.setState({gpxLayer: omnivore.gpx('public/running_mallorca.gpx')});
        this.setState({gpxTimeLayer: gpxTl});

        // TimeDimension layer(s)
        const td = new L.timeDimension({
            period: "PT5M",
        });

        this.map.timeDimension = td;

        //Player -> Component to animate a map with a TimeDimension, changing the time periodically.
        let player        = new L.TimeDimension.Player({
            transitionTime: 100,
            loop: false,
            startOver:true
        }, td);

        L.control.timeDimension({
            player: player,
        }).addTo(this.map.leafletElement);

        // Add timedimension from GPX data

        new L.timeDimension.layer.geoJson(this.state.tdData, {
            updateTimeDimension: true,
            addlastPoint: true,
            waitForReady: true
        }).addTo(this.map.leafletElement);
    }


    onClick = () => {
        this.setState({
            toggleActive: !this.state.toggleActive,
        });

        console.log('CLICKED MAP');
        // this.map.leafletElement.fitBounds(this.state.tdData);
    };


    render() {
        const position = [this.state.lat, this.state.lng];
        const timeDimensionOptions = {
            timeInterval: this.state.timeInterval,
            period: this.state.period
        };

        return (
            <React.StrictMode>
                <Map
                    center={position}
                    zoom={this.state.zoom}
                    onClick={this.onClick}
                    timeDimension={true}
                    timeDimensionOptions={timeDimensionOptions}
                    timeDimensionControl={true}
                    ref={(ref) => { this.map = ref; }}>

                    {/*<TileLayer
                        attribution={config.wmsOne.attribution}
                        url={config.wmsOne.url}
                    />*/}

                    {/*<WMSTileLayer
                        layers={this.state.toggleActive ? 'nasa:bluemarble' : 'ne:ne'}
                        url="https://demo.boundlessgeo.com/geoserver/ows" />*/}

                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup (react-leaflet component). <br />Easily customizable.
                        </Popup>
                    </Marker>

                </Map>
            </React.StrictMode>
        );

    } // END of render()

}

Answer 1

使用此：

import { SearchControl } from 'react-leaflet-search';

它可以工作，尽管它不在文档中

Answer 2

您可以发布一个展示问题的jsfiddle或Codepen吗？另外，react-leaflet不建议您顺便在地图上添加控件和图层。

new L.timeDimension.layer.geoJson(this.state.tdData, {...}).addTo(this.map.leafletElement); 势在必行。首选像这样的声明性渲染

import { Map, TileLayer, GeoJSON } from 'react-leaflet';
<Map>
  <TileLayer>
  <GeoJSON>
</Map>

react-leaflet搜索插件不起作用。谁能帮我这个忙

2 个答案: