[英]React-Leaflet adding sign on center of map
I add a sign on map that shows the center.我在 map 上添加了一个显示中心的标志。
<MapContainer fullscreenControl={true}
center={center} zoom={18}
maxNativeZoom = {22}
maxZoom={22}
className={"sign-of-center-of-map"}>
.sign-of-center-of-map:before {
position: absolute;
content: "\271B";
z-index: 800;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 3rem;
opacity: 0.7;
}
But when i do that, layers on the map become non-clickable.但是当我这样做时,map 上的图层变得不可点击。 I changed z-index of layers but this didn't solve the issue.
我更改了图层的 z-index 但这并没有解决问题。 Should i add something to CSS or use different method?
我应该添加一些东西到 CSS 还是使用不同的方法?
You should use a better method to reach this feature, React-leaflet
has Control
feature that you can add whatever you want to your map你应该使用更好的方法来实现这个功能,
React-leaflet
有Control
功能,你可以添加任何你想要的到你的 map
For Example:例如:
import L from "leaflet";
createDivControl() {
const MapHelp = L.Control.extend({
onAdd: (map) => {
const signOfCenterOfMap = L.DomUtil.create("div", "");
this.signOfCenterOfMap = signOfCenterOfMap;
// set the inner content from the props
signOfCenterOfMap.innerHTML = this.props.title; // it can be your icon
// return the div
return signOfCenterOfMap;
}
});
return new MapHelp({ position: "bottomright" })} // 'bottomleft','bottomright', ...
In this example, you must set the position of your div在这个例子中,你必须设置你的 div 的 position
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.