0

我想通过单击按钮或将鼠标悬停在按钮上在地图上创建自定义帮助 div 层。该按钮也是地图上的自定义控制按钮。这是示例控制按钮

我的自定义图层将提供地图相关信息。整个功能应该像 React 传单图层控件一样工作，

也就是说，在鼠标悬停/单击自定义控件 div/按钮时，应弹出带有地图相关信息的自定义图层。

我创建了自定义 div 层。但是，我面临两个问题。

  1. 我无法在地图上定位它。我首先尝试使用“bottomleft”选项。它没有用。我的实际意图是定位在帮助控制按钮附近，就像 React.leaflet 文档中的“层控制”一样。
  2. 现在，代码正在监听地图上的任何“点击”事件。我想让它特定于我的控制按钮。如何在控制层和控制按钮之间建立连接？如何将此控制按钮传递给图层？

任何帮助深表感谢。这是我的代码如下。

自定义层组件

import React, { Component } from "react";
import { useMap } from "react-leaflet";
import L, { LeafletMouseEvent, Map } from "leaflet";

class CustomMapHelpGuide extends React.Component<{},{props:any}>{

helpDesc:any;
createDescLayer(opts:any){
    const DescHelp = L.Layer.extend({
        onAdd: (map: Map) => {
            const helpDesc = L.DomUtil.create('div','');
            helpDesc.innerHTML = "this is a map description div";
            this.helpDesc = helpDesc;
            map.getPanes().overlayPane.appendChild(this.helpDesc);
            map.on('click',this.testFunc, this);
            return helpDesc;
        }
    });

    return new DescHelp(); //I tried to pass the "opts" parameter but it is throwing error saying it doesn't expect an argument
}

testFunc(){
    console.log("layer is implemenetd"); //upon click anywhere in the map this is getting printed on console
    
}

componentDidMount() {
    const { map} = this.props as any;
    const layer = this.createDescLayer({ position: 'bottomleft' });
   // map.addLayer(layer);
    layer.addTo(map);
}

componentWillUnmount() {
    this.helpDesc.remove();
  }

  render() {
    return null;
  }
}

function withMap(Component : any) {
  return function WrappedComponent(props : any) {
    const map = useMap();
    return <Component {...props} map={map} />;
  };
}

export default withMap(CustomMapHelpGuide);

暂时这样称呼它，

<MapContainer
        center={customPosition}
        zoom={9}
        zoomControl={false}
        >
             <DescriptionButton/>
            <CustomMapDescLayer/>

            <TileLayer
                attribution="Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
                url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
            />
        </MapContainer>
4

0 回答 0