Question

我过去通常通过leaflet.js在OSM中绘制标记，并且工作正常。最近，我尝试绘制多边形，并找到了一个名为leaflet.draw的插件。我在下面看到了一个演示页面，我忘记了在哪里找到的并且符合我的需要。...https://jsfiddle.net/324h2d9q/1789/

将这些代码移植到我的项目中后，由于leaflet.js的版本不同（较新），我发现了问题。我已经更改了Leaflet.js的3或4版本，其工作原理相同。

多边形的顶点标记太大，我必须使用css对其进行修改。
当我放下多边形的第三个顶点时，会发生错误。如果第三个点高于其他两个点，则可以，但如果低于，则将发生错误。
我掉落的点的锚点似乎与真实点不同，因为我无法闭合多边形，这是最大的问题。

这是我的测试代码...

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 6);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data c <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
L.marker(center).addTo(map);

// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawPluginOptions = {
  position: 'topleft',
  draw: {
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects
        message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
      },
      shapeOptions: {
        color: '#97009c'
      }
    },
    // disable toolbar item by setting it to false
    polyline: false,
    circle: false, // Turns off this drawing tool
    rectangle: false,
    marker: false,
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'marker') {
    layer.bindPopup('A popup!');
  }

  editableLayers.addLayer(layer);
});

html,
body {
  height: 100%;
}

#map {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" rel="stylesheet"/>

<div id="map"></div>

但是，如果我更改与上面的演示页面相同的leaflet.js网址，则可以正常工作。 https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js

有人可以帮我解释一下吗？还是应该将传单更改为该旧版本？

使用leaflet.draw绘制多边形时，不同版本的传单之间的行为有所不同吗？

0 个答案: