0

我需要创建一个新的形状按钮，允许用户在地图上单击一次并在地图上放置一个具有指定尺寸的方形标记（圆形标记和矩形之间的交叉）。这是一种有效的方法吗？我找到了很多关于如何在控制栏中更改图标的信息，并设法为该功能创建了一个方形图标，但我找不到任何关于如何更改绘图功能的信息。

这是我到目前为止所做的：

    // TODO: Create a custom squaremarker that extends the Marker class
    L.Draw.SquareMarker = L.Draw.SimpleShape.extend({
      options: {
        stroke: true,
        color: '#3388ff', // Default initial color for circle marker (from leaflet draw)
        weight: 4,
        opacity: 0.5,
        fill: true,
        fillColor: null,
        fillOpacity: 0.2,
        clickable: true,
        zIndexOffset: 2000 // This should be > than the highest z-index any markers
      },
      initialize: function (map, options) {
        this.type = 'squareMarker';
        L.Draw.Feature.prototype.initialize.call(this, map, options);
      }
    })

    // Add the SquareMarker icon to the control bar
    L.DrawToolbar.include({
      getModeHandlers: function (map) {
        return [
          {
            enabled: true,
            handler: new L.Draw.Polyline(map, this.options.polyline),
            title: L.drawLocal.draw.toolbar.buttons.polyline
          },
          {
            enabled: true,
            handler: new L.Draw.Polygon(map, this.options.polygon),
            title: L.drawLocal.draw.toolbar.buttons.polygon
          },
          {
            enabled: true,
            handler: new L.Draw.Rectangle(map, this.options.rectangle),
            title: L.drawLocal.draw.toolbar.buttons.rectangle
          },
          {
            enabled: true,
            handler: new L.Draw.Circle(map, this.options.circle),
            title: L.drawLocal.draw.toolbar.buttons.circle
          },
          {
            enabled: true,
            handler: new L.Draw.Marker(map, this.options.marker),
            title: L.drawLocal.draw.toolbar.buttons.marker
          },
          {
            enabled: true,
            handler: new L.Draw.CircleMarker(map, this.options.circlemarker),
            title: "Draw a circle marker"
          },
          {
            enabled: true,
            handler: new L.Draw.SquareMarker(map, this.options.squaremarker),
            title: "Draw a square marker"
          }
        ]
      }
    });
4

0 回答 0