在以下链接中,有一个在线演示案例,展示了如何使用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软件包,但找不到下一步。有什么帮助吗?
答案 0 :(得分:2)
您可以使用react-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="&copy Google"
url={'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'} />
<div className='pointer'></div>
</Map>
);
}