Leaflet自定义svg图标——divIcon

news/2024/7/19 14:17:49 标签: js, svg

添加自定义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)
      },


http://www.niftyadmin.cn/n/1653335.html

相关文章

mysql delete执行过程_mysql 一条sql执行流程

1.1 select语句执行过程下图是 MySQL 的一个简要架构图&#xff0c;从下图你可以很清晰的看到用户的 SQL 语句在 MySQL 内部是如何执行的。先简单介绍一下下图涉及的一些组件的基本作用帮助大家理解这幅图&#xff0c;连接器&#xff1a; 身份认证和权限相关(登录 MySQL)。查询…

SpeedTree制作超真实老宅

转载于:https://www.cnblogs.com/dj1232090/p/5407282.html

vue项目中,socket代码模板

<template><div><button click"send">发消息</button></div> </template><script> export default {data () {return {path:"ws://192.168.0.200:8005/qrCodePage/ID1/refreshTime5",socket:""}},mou…

mysql ibd恢复数据_mysql通过ibd恢复数据

参考文档 http://www.cnblogs.com/logo-fox/p/6210533.html数据库只剩 数据库目录中的 .frm 和 .ibd文件 时候的修复.frm 表结构.ibd 表的元数据下面从已经拥有表结构开始恢复1 新建一个表(test库)&#xff0c;将表结构导入表中&#xff0c;此时&#xff0c;表只有表结构&am…

base64加密和rsa加密,同时使用会发生冲突

base64加密算法链接&#xff1a;https://blog.csdn.net/qq_45059900/article/details/120852359?spm1001.2014.3001.5501 rsa加密算法链接&#xff1a;https://passport.cnblogs.com/scripts/jsencrypt.min.js 引入rsa算法的js文件&#xff0c;或将算法全部复制到项目中&…

.Net Core下如何管理配置文件

一、前言 根据该issues来看&#xff0c;System.Configuration在.net core中已经不存在了&#xff0c;那么取而代之的是由Microsoft.Extensions.Cnfiguration.XXX一系列的类库提供&#xff0c;对应的开源地址为点击这里。 从当前开源的代码来看&#xff0c;在.net core下提供了以…

正式服去掉console打印插件

原本项目链接socket成功后打印输出&#xff0c;放到正式服就没有打印了&#xff0c;原因是多了这个插件&#xff0c;不会给用户展示打印内容&#xff0c;但也对调试制造了点困难 babel-plugin-transform-remove-console - npmRemove all console.* calls.https://www.npmjs.co…

mysql数据库基本关键字_MySql数据库基本语句

SQL常用增删改查语句1增1.1【插入单行】insert [into] (列名) values (列值)例&#xff1a;insert into Strdents (姓名,性别,出生日期) values (开心朋朋,男,1980/6/15)1.2【将现有表数据添加到一个已有表】insert into (列名) select from 例&#xff1a;insert into tongxun…