为 leaflet.draw 标记 属性 放置自定义标记

Question

我正在使用 leaflet.draw 插件来允许用户在地图上放置标记，但不确定如何在 drawControl 中提供配置以获取自定义图标、自定义宽度和自定义高度，尝试如下所示进行操作

var  drawControl = new L.Control.Draw({
            draw : {
                position : 'topleft',
                polygon : {
                shapeOptions: {
                    color: 'red'
                }
                },
                marker:{
                    iconUrl: 'http://joshuafrazier.info/images/firefox.svg'
                },
                polyline : false,
                rectangle : {
                    shapeOptions: {
                        color: 'blue'
                    }
                },
                circle : false
            },
            edit: {
            featureGroup: editableLayers, //REQUIRED!!
                remove: true

        }


        });

但我仍然得到默认标记，请在文档中指出我 http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-latlngutil 我应该在哪里查看以了解配置以及如何操作

Answer 1

您需要为标记选项图标分配 属性 标记图标。

1. 使用 Leaflet 创建自定义标记图标 L.Icon class.

   var customMarker= L.Icon.extend({
       options: {
           shadowUrl: null,
           iconAnchor: new L.Point(12, 12),
           iconSize: new L.Point(24, 24),
           iconUrl: 'http://joshuafrazier.info/images/firefox.svg'
       }
   });
   

2. 将 customMarker 分配给标记图标 属性

   var  drawControl = new L.Control.Draw({
     draw : {
       position : 'topleft',
       polygon : {
         shapeOptions: {
           color: 'red'
         }
       },
       marker: {
         icon: new customMarker() //Here assign your custom marker
       },
       polyline : false,
       rectangle : {
         shapeOptions: {
           color: 'blue'
         }
       },
       circle : false
     },
     edit: {
       featureGroup: editableLayers, //REQUIRED!!
       remove: true
     }
   });