高德地图2.0使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标

本文链接：https://blog.csdn.net/weixin_42288182/article/details/127461755

解决问题

项目中地图一直使用图片作为图标，这样就会导致加载大量图片，加载资源慢，项目体积增大、每次涉及地图展示站点功能，UI需要切一大批图片；

使用SvgMarker.Shape将iconfont作为图标，几种类型仅需要几个矢量图，每种类型的状态和类别等填充不同颜色展示即可；

举例：有5种图标类型，每种类型有7中类别和5中状态，需要展示不同颜色；

那么：需要5*（7+5）= 60张图片

所以：SvgMarker.Shape.IconFont解决这个问题，仅需要5个矢量图标即可；

具体实现方法

1、index.html引入高德地图2.0版本和UI组件库js（或使用npm安装包方式引入）

<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=a174a1cd3299a20dff08de1679760e12'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

2、使用高德地图2.0版本SvgMarker+iconfont实现地图站点展示

symbolJs：iconfont官网中symbol矢量图地址，可引线上地址，开发完成也可下载js文件到本地，引本地字体js文件；

addSvgMarker(stationInfoList){
    let _this = this;
    AMapUI.loadUI(['overlay/SvgMarker'], function (SvgMarker) {
        if (!SvgMarker.supportSvg) {
            alert('当前环境不支持SVG');
        }
        let markers = [];
        stationInfoList.forEach((item,index)=>{
            let marker = new SvgMarker(
                new SvgMarker.Shape.IconFont({
                    symbolJs: '//at.alicdn.com/t/c/font_2773476_axpuk6h9lji.js',//iconfont中symbol矢量图库地址，开发完成可将js文件下载放本地
                    // icon: item.type == 1 ?'icon-water-level':item.type == 2?'icon-a-zu453831-copy':item.type==3?'icon-zoushi1':'',
                    icon:'icon-a-zu453831-copy',//icon可根据不同类型判断展示不同图标
                    size: 60,
                    offset: [-30, -60],//偏移，当前经纬度精确的点是图标底部中间
                    fillColor: item.level == '1'?'#ff0':item.level == '2'?'#ff4400':'#0cf'//填充颜色，根据状态/水质类别展示不同颜色
                }), {
                position: [item.longitude,item.latitude],
                showPositionPoint: false,//打开就能看到当前精确定位，根据需求调整offset
            });
            markers.push(marker);//将marker添加到一个数组中
        })
        _this.myMap.add(markers)//最后将marker批量添加到地图上
    });
},

补充：stationInfoList初始化数据

stationInfoList:[
    {
        stationName:"测试排污口",
        type:'2',
        longitude:106.901367,
        latitude:34.905904,
        level:2, //水质类别
        status:2, //状态
    },
    {
        stationName:"测试断面",
        type:'1',
        longitude:109.901367,
        latitude:34.905904,
        level:1, //水质类别
        status:1, //状态
    },
    {
        stationName:"测试污染源名称还挺长的呢",
        type:'3',
        longitude:112.901367,
        latitude:34.905904,
        level:3, //水质类别
        status:3, //状态
    }
],

实现效果图