将leaflet.FreeDraw与leaflet.path.drag一起使用

问题描述

我想知道是否可以将Leaflet.FreeDraw与leaflet.path.drag一起使用来拖动FreeDraw插件创建的多边形。

jsfiddle

我试图启用像这样的拖动插件，但是它不起作用。

const map = new L.Map(document.querySelector('section.map'),{ doubleClickZoom: false }).setView(LAT_LNG,14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);

freeDraw.dragging.enable();

解决方法

您可以使用False启用的传单，通过监听FreeDraw事件从markers中提取边界来创建polygon或其他地图对象。请参见下面的工作示例。

您应该考虑是否要使用选项dragging来禁用FreeDraw after this，因为用户在拖动时可能会获得其他多边形

leaveModeAfterCreate:true

const LAT_LNG = [51.505,-0.09];
const TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png';

const map = new L.Map(document.querySelector('section.map'),{ doubleClickZoom: false }).setView(LAT_LNG,14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ 
mode: FreeDraw.ALL,leaveModeAfterCreate:true //recommended to prevent undesired creation of multiple polygons
});
map.addLayer(freeDraw);

//freeDraw.dragging.enable();

//STEP 1: Listen to markers event raised by free draw whenever edits (create/edit/deletions are made to the map)
freeDraw.on("markers",function(event){
  //we are only interested in create events
  //we aim to extract the bounds and remove the existing
  //  freedraw references. If it is that you would like your
  //  user to edit the polygon,then you may keep these and do the   //  additional work to manage and update these references
  if(event.eventType=='create' && event.latLngs.length > 0){ 
  
     //capture the current polygon bounds (store in 1st position)
     var latLngs = event.latLngs[0];
     freeDraw.clear(); //clear freedraw markers
     //create polygon from lat lng bounds retrieved
     var polygon = L.polygon(
         latLngs.map(function(latLng){
             return [latLng.lat,latLng.lng];
         }),{
            color: 'red',draggable: true //make polygon draggable
         }).addTo(map);
     
  
  }
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.map {
  width: 100vw;
  height: 100vh;
}

.map.mode-create {
    cursor: crosshair;
}

.leaflet-edge {
    background-color: #95bc59;
    box-shadow: 0 0 0 2px white,0 0 10px rgba(0,.35);
    border-radius: 50%;
    cursor: move;
    outline: none;
    transition: background-color .25s;
}

.leaflet-polygon {
    fill: #b4cd8a;
    stroke: #50622b;
    stroke-width: 2;
    fill-opacity: .75;
}

NB。另请参见https://jsfiddle.net/ytevLbgs/

上的js-fiddle工作示例