高德地图2.0使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标
解决问题
项目中地图一直使用图片作为图标，这样就会导致加载大量图片，加载资源慢，项目体积增大、每次涉及地图展示站点功能，UI需要切一大批图片；
使用SvgMarker.Shape将iconfont作为图标，几种类型仅需要几个矢量图，每种类型的状态和类别等填充不同颜色展示即可；
举例：有5种图标类型，每种类型有7中类别和5中状态，需要展示不同颜色；
那么：需要5*（7+5）= 60张图片
所以：SvgMarker.Shape.IconFont解决这个问题，仅需要5个矢量图标即可；
具体实现方法
1、index.html引入高德地图2.0版本和UI组件库js（或使用npm安装包方式引入）
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, //状态
}
],实现效果图
注意：图标不能修改颜色解决方案
登录官网，找到引入的图标，批量操作-批量去色
