传单：在 ImageLayer 上绘制时未启用编辑按钮

问题描述

全部：也许我没有以正确的方式这样做。 Leaflet draw 的工作方式是，只要您使用绘图控件（圆形、方形、多边形等）在地图上绘制某些内容，删除/编辑按钮就会启用。在我的地图中，通过单击包含 Leaflet 地图的网页上的链接，用户可以添加许多 imageOverlays，但是对于这种情况，假设用户单击并添加了一个 imageOverlay。 imageOverlay 在地图上显示得很好。现在用户想要在地图上绘制一个形状——比如说一个圆圈。当用户单击绘图控件中的圆形图标并将其绘制在地图上时，删除/编辑按钮不会启用。我难住了。我怀疑这可能与图层/分层有关。如果地图上没有 imageLayers，我需要让删除/编辑按钮的行为像它一样。有人可以启发我吗？谢谢。

我的 React.js 代码将 imageLayers 添加到数组，然后将图像数组添加到 L.featureGroup。绘制形状时，将图层类型添加到同一个 L.featureGroup 中。

我的代码：

In React.js:

let myFeatureGroup = new L.FeatureGroup();
let imageLayersArray = [];

// My function to load imageLayers:
const applyLayer = (mapSubType) => {        

    const mapSubTypeCaps = mapSubType.toupperCase();

    let dlaBounds = null;

    const someOptions = {
        opacity: 0.3,interactive: true,bubblingMouseEvents: true,className: 'imageborder',zIndex: 5,mapsubtypelayer: mapSubType,// required in order to identify a layer upon removal
    };

    // The 8 PNG image coordinates:
    const ImageCoords = [
        [[-90,0],[0,90]],[[0,[90,[[-90,-90],0]],[[-180,[-90,[[90,[180,];

    let counter = 0;

    ImageCoords.map((coordEntry) => {
        counter++;
        const useThisURL = `https://dla-maps-storage.s3.amazonaws.com/DLAMAP${mapSubTypeCaps}${counter}.png`;

        // Need to flip the coordinates from lng/lat to lat/lng for leaflet:

        let arrayofcoordinates = [];
        const flippedarrayofcoordinates = [];
        arrayofcoordinates = coordEntry;

        arrayofcoordinates.map((pairofcoordinates) => {
            const workAry = [];
            // flip the coordinates from lng/lat config to lat/lng:
            workAry[0] = pairofcoordinates[1];
            workAry[1] = pairofcoordinates[0];
            flippedarrayofcoordinates.push(workAry);
        });

        dlaBounds = L.latLngBounds(flippedarrayofcoordinates);

        const anImage = L.imageOverlay(
            useThisURL,dlaBounds,someOptions,)

        // add the imagelayer to the imageLayersArray:
        // Somebody along the way recommended to do this
        imageLayersArray.push(anImage);

        anImage.on('click',(leafletEvent) => {
            handleImageClick(leafletEvent);
        });
    });

    myFeatureGroup = L.featureGroup(imageLayersArray).addTo(map);

};
    
// Draw Event Created:
map.on(L.Draw.Event.CREATED,(e) => {
    console.log('L.Draw.Event.CREATED start:: ');

    const { layer } = e;

    switch (e.layerType) { // types: polyline,polygon,rectangle
        case 'circle':
            // Call rest endpoint with lat/lng coordinates
            break;
        case 'marker':
            // Call rest endpoint with lat/lng coordinates
            break;
        case 'polyline':
            // Call rest endpoint with lat/lng coordinates
        break;
        default:
            // polyGON OR RECTANGLE DRAWN:
            // Call rest endpoint with lat/lng coordinates
        break;                  
}

    myFeatureGroup.addLayer(layer);

    console.log('L.Draw.Event.CREATED end:: ');
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript leaflet leaflet.draw