更改 Leaflet 地图标记图标

Question

更改 Leaflet 地图标记图标

javascriptjquerysliderleaflet

18

我正在使用Dennis Wilhelm的Leaflet Slider在Leaflet地图上展示数据变化。

我尝试更改标记图标，但没有成功。那么，在使用Leaflet Slider显示随时间变化时，如何更改标记图标？我需要在原始SliderControl.js中进行哪些更改？

先行致谢！

以下是Dennis Wilhelm的Leaflet Slider代码链接：

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

- sowmyaa guptaa

5个回答

8

以下是原始slidercontrol.js文件的确切更改：

   if (this._layer) {
        var index_temp = 0;
        this._layer.eachLayer(function (layer) {

             var greenIcon = L.icon({ //add this new icon
                iconUrl: i+'.png',
                shadowUrl: 'leaf-shadow.png',

                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            options.markers[index_temp] = layer;
            options.markers[index_temp].setIcon(greenIcon); //Here set the icon to indiviual markers

            ++index_temp;
        });
        options.maxValue = index_temp - 1;
        this.options = options;
    }

- sowmyaa guptaa

7

var century21icon = L.icon({
    iconUrl: 'https://i.ibb.co/sJrMTdz/favicon-32x32.png',
    iconSize: [20, 20]
    });
var maker = L.marker([25.045403,121.526088],{icon: century21icon}).addTo(map);

- Œm Pov Develop

2

欢迎来到stackoverflow，感谢您的回答。您能否为您的答案添加一个简短的文本或解释？ - Run_Script

4

我们可以使用Unicode字符作为图标，并传递CSS类名来进一步优化它。有一些图标可能在不同的浏览器中呈现不同。

L.marker([45, 5], {icon: L.divIcon({className: 'poi', html: '<b></b>'})}).addTo(map);

https://leafletjs.com/reference.html#icon

- NVRM

1

如果有人想知道如何在vue2-leaflet中使用Typescript，下面是一个示例代码。您甚至可以在l-marker上使用v-for一次绘制多个标记：

// inside template
<l-marker :lat-lng="position"
            :icon="defaultIcon" :key="index">
            <l-icon
                :icon-size=[20,40]
                :popupAnchor= [0,0]
                :iconUrl= "'assets/logo.png'"
                :shadowUrl= "'assets/logo.png'" >
                  <v-icon medium >
                    mdi-target
                  </v-icon>
            </l-icon>
</l-marker>

// default icon in script
defaultIcon = L.icon({
      iconUrl: "https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png",
      shadowUrl: require('../static/marker.png'),
      iconSize: [20, 30],
      iconAnchor: [18, 18],
      popupAnchor: [0, -10],
      shadowSize: [0, 0],
      shadowAnchor: [10, 10]
    });

- Yogesh Vadekar

你知道leaflet接受iconUrl的是svg文件还是只有png文件？ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jainil · Accepted Answer

您可以按以下方式创建新的图标类：

var LeafIcon = L.Icon.extend({
    options: {
       iconSize:     [38, 95],
       shadowSize:   [50, 64],
       iconAnchor:   [22, 94],
       shadowAnchor: [4, 62],
       popupAnchor:  [-3, -76]
    }
});

然后像下面这样创建一个新的图标对象：

var greenIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

现在，您可以像下面这样，在地图上使用上面的图标作为标记：

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

如需了解更多信息，请参阅此文档。

使用滑块控件需要创建两个图像：

(1) Marker Icon [ Use name: marker-icon.png ]
(2) Marker Icon Shadow [ Use name: marker-shadow.png ]

之后，您可以像下面这样指定默认图像路径：

L.Icon.Default.imagePath = "Url to the image folder"; // This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "http://leafletjs.com/examples/custom-icons";

这样图标的URL将是：

Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png