Leaflet自定义svg图标——divIcon

最新推荐文章于 2024-10-13 14:17:00 发布

北寂.

最新推荐文章于 2024-10-13 14:17:00 发布

阅读量1.4k

点赞数

文章标签： js svg

本文链接：https://blog.csdn.net/qq_45059900/article/details/121179654

版权

SVG图标地图标记 L.divIcon 条件判断自定义图标

关键词由CSDN通过智能技术生成

添加自定义svg图标

addMarker (latlon,liquidIcon=false,flowIcon=false,qualityIcon=false,JgIcon=false) {
        let iconType;
        if(liquidIcon){
          iconType = 'liquid'
        }else if(flowIcon){
          iconType = 'flow'
        }else if(qualityIcon){
          iconType = 'huanbao'
        }else if(JgIcon){
          iconType = 'Jg'
        }else{
          iconType = 'redMarker'
        }
        // console.log(iconType)
        const divIcon = L.divIcon({
          html:
            `<div>
                <svg class="icon-svg map-svg icon-svg_${iconType}"aria-hidden="true">
                   <use xlink:href="#icon-${iconType}"></use>
                </svg>
             </div>`,
          iconSize: [30, 30],
          iconAnchor: [15, 30]
        })

        this.marker = L.marker(latlon, { icon: divIcon }).addTo(this.map)
      },