如何解决如何根据react-leaflet中的选定位置来飞到然后围绕位置获取边界
从城市列表下拉列表和该位置周围的getBounds动态选择位置时,如何动态缩放特定位置或动态飞往该特定位置。我正在尝试引用此answer,但在flyTo发生后这可以工作。那么如何在我的代码中使用flyTo。
useEffect(() => {
const cityFilter = () => {
let geocodes = JSON.parse(sessionStorage.getItem('geocode'));
let mapData = props.allEquipData.filter((filtered) => {
return filtered.city === selectedCity;
});
Promise.all(
mapData.map(async (data) => {
let selectedLocGeo = geocodes.filter((geo) => geo.zip == data.zipcode);
if (selectedLocGeo.length > 0) {
data.coordinates = [selectedLocGeo[0].latitude,selectedLocGeo[0].longitude];
} else {
data.coordinates = [0,0];
}
return data;
})
)
.then((response) => {
let markerData = [];
let count = 1;
response.map((resp,index) => {
if (resp.coordinates[0] !== 0 && resp.coordinates[1] !== 0) {
let existingPositionIndex = markerData.findIndex(
(mark) =>
mark.positions && mark.positions.length && mark.positions[0] === resp.coordinates[0] && mark.positions[1] === resp.coordinates[1]
);
if (existingPositionIndex > -1) {
markerData[existingPositionIndex].devices.push(resp);
} else {
let obj = {
positions: resp.coordinates,key: 'marker' + count,devices: [resp],location: resp.city + ',' + resp.state,};
markerData.push(obj);
count++;
}
}
});
// let group = new L.featureGroup([markerData[0].positions]);
// mapRef.firBounds(group.getBounds());
// console.log('oth position : ',markerData[0].positions);
// const map = mapRef.current;
// // console.log('map : ',map.leafletElement.flyTo);
// // var group = new L.featureGroup([L.marker(markerData[0].positions)]);
// // if (map) map.leafletElement.fitBounds(group.getBounds());
// if (map) {
// map.flyTo(markerData[0].positions,10);
setFilteredMarkers(markerData);
})
.catch((err) => {
console.log('Err',err);
});
};
cityFilter();
},[selectedCity]);
<Map
center={position}
zoom={5}
maxZoom={100}>
<LayersControl position='topright'>
<LayersControl.Overlay name='Markers' checked>
<LayerGroup>
<MyMarkersList markers={handleMarkers(markerData)} />
</LayerGroup>
</LayersControl.Overlay>
</LayersControl>
</Map>
从下拉列表中选择城市时,将调用useEffect,然后它将根据所选城市(例如[lat,log])为您提供标记位置。从这一点开始,它应该飞到该位置并在可能的位置获得getBounds。
解决方法
在setFilteredMarkers(markerData);
之前添加这两行代码
const {latitude,longitude} = geoCodes.find(g => g.city === selectedCity)
map.flyTo([ longitude,latitude],12);
您要查找geoCodes
Object[]
内部的所选城市的坐标。您可以使用array.find和eselectedCity的值来实现。每当下拉列表中的值更改时,就会触发此操作。
更新了Demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。