esri-leaflet-geosearch：如何将其与 React 集成

Question

下面link中有在线演示案例展示了如何使用esri-leaflet-geosearch插件， https://codepen.io/exomark/pen/dafBD

var searchControl = new L.esri.Controls.Geosearch().addTo(map);

var results = new L.LayerGroup().addTo(map);

searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
});

这个在线演示很好地支持了地理搜索功能。

并且在我的 React 应用程序中，我还计划添加诸如传单的搜索框。但无法弄清楚如何做到这一点。

由于 esri-leaflet-geosearch 依赖于 esri-leaflet，所以安装了两个 npm 包，但找不到下一步。有什么帮助吗？

Answer 1

你可以使用 react-leaflet 来实现。

首先安装 leaflet、react-leaflet 和 esri-leaflet-geocoder 库。

然后将它们导入 index.js

那么在你的比赛中：

import React, { Component, createRef } from 'react';
import L from 'leaflet';
import * as ELG from 'esri-leaflet-geocoder';
import { Map, TileLayer } from 'react-leaflet';
...
componentDidMount() {
    const map = this.mapRef.current.leafletElement;
    const searchControl = new ELG.Geosearch().addTo(map);
    const results = new L.LayerGroup().addTo(map);

    searchControl.on('results', function(data){
        results.clearLayers();
        for (let i = data.results.length - 1; i >= 0; i--) {
            results.addLayer(L.marker(data.results[i].latlng));
        }
    });
}

render() {
    const center = [37.7833, -122.4167]
    return (
        <Map 
            style={{height: '800px'}}
            center={center} 
            zoom="10"
            ref={this.mapRef}>
            <TileLayer
                attribution="&amp;copy Google"
                url={'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'} />
            <div className='pointer'></div>
        </Map>
    );
}

Demo

esri-leaflet-geosearch：如何将其与 React 集成

esri-leaflet-geosearch: how to integrate it with React

javascript

leaflet

reactjs

esri-leaflet

react-leaflet