[英]Get current coordinates on dragging react leaflet
我是反应 leaflet 的新手。 我创建了我的 map 并成功添加了多边形。 但是,当我拖动或缩放 map 时,如何获取整个屏幕的当前坐标? 我使用openstreetmap的map。 非常感谢您的支持。 我的代码:
class App extends Component {
componentDidMount()
{
//console.log(polygonData);
navigator.geolocation.getCurrentPosition(function(position) { //mdn geolocation
console.log(position)
});
}
onEachContry = (feature, layer) =>{
const contryName = feature.properties.NAME_1;
//console.log(feature.properties.NAME_1);
layer.bindPopup(contryName);
if(contryName == "An Giang")
{
layer.options.fillColor = "yellow";
}
layer.on({
/*mouseover: (event) => {
console.log(event);
}*/
}
)
}
countryStyle = {
fillColor: "red",
fillOpacity: 0.5,
color: "black",
weight: 2
}
render() {
return (
<MapContainer center={[10.7743, 106.6669]} zoom={6} >
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<GeoJSON
style = {this.countryStyle}
data={polygonData.features}
onEachFeature={this.onEachContry}
/>
</MapContainer>
);
}
}
/*<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
*/
export default App;
使用 function 组件作为MapContainer's
子组件。 那里使用useMapEvents
挂钩监听dragend
事件。 e.target.getBounds
提供您需要的一切,例如getSouth()
、 getWest()
、 getEast()
等方法
function MyComponent() {
const map = useMapEvents({
dragend: (e) => {
console.log("mapCenter", e.target.getCenter());
console.log("map bounds", e.target.getBounds());
}
});
return null;
}
接着
<MapContainer
...><MyComponent/>
</MapContainer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.