矢量标注 最后更新时间: 2023年08月07日
SvgMarker（矢量标注）继承自 SimpleMarker，支持使用Svg构建不同形状，颜色，大小的背景图标(利用SimpleMarker的iconStyle)。
注意：IE9以下浏览器不支持Svg, 此时图标样式会回退回父类，即SimpleMarker。
如何使用
1、引入UI组件库
2、加载SvgMarker（模块名：ui/overlay/SvgMarker）：
//加载SvgMarker，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['overlay/SvgMarker'], function(SvgMarker) {
if (!SvgMarker.supportSvg) {
//当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
}
//创建一个shape实例，比如水滴状
var shape = new SvgMarker.Shape.WaterDrop({
height: 60, //高度
//width: **, //不指定时会维持默认的宽高比
fillColor: 'orange', //填充色
strokeWidth: 1, //描边宽度
strokeColor: '#666' //描边颜色
});
//利用该shape构建SvgMarker
var marker = new SvgMarker(
//第一个参数传入shape实例
shape,
//第二个参数为SimpleMarker的构造参数（iconStyle除外）
{
showPositionPoint: true, //显示定位点
map: map,
position: map.getCenter()
}
);
});
接口文档
构造参数（父类）
方法（父类）
静态属性
Shape
Shape包含构造Svg所需的信息，其构造参数包括SVG自身的一些常见属性,比如：
- width:Number，宽度
- height:Number，高度
- fillColor:String，填充色
- strokeColor:String，描边色
- strokeWidth:String，描边宽度
还包括定位点的偏移信息：
- offset:[x:Number,y:Number]，形状区域左上角相对于定位点的偏移。该值通常不直接在构造参数中写死，而是通过Shape内部实现getOffset方法动态计算。比如如果定位点在中心，可返回[-this.opts.width / 2, -this.opts.height / 2]。
//创建一个shape实例，比如水滴状
var shape = new SvgMarker.Shape.WaterDrop({
height: 60, //高度
//width: **, //不指定,维持默认的宽高比
fillColor: 'orange', //填充色
strokeWidth: 1, //描边宽度
strokeColor: '#666' //描边颜色
//offset:[n1, n2] //这里不设置offset，偏移本身和形状的尺寸相关，WaterDrop中实现了getOffset方法，所以不需要在构造参数中写死offset。
});
SvgMarker内建了一些Shape类型（示例），包括：
基于path的Shape
普通形状
特殊类型
自定义Shape
基本形状
所有Shape均继承自 SvgMarker.Shape.BaseShape, 子类需要实现的核心接口有：
Path类形状
Path类形状可以继承SvgMarker.Shape.PathShape。开发者需要在构造函数中定义原始路径(sourcePath)，PathShape实现的getInnerHTML方法会根据构造参数中的width，height对sourcePath进行缩放，从而返回合适大小的path路径。原始路径的结构如下：
function MyCustomPathShape(opts) {
opts = utils.extend({
//定义原始路径
sourcePath: {
//路径
path: 'M0 0 L 10 0 L 0 10 L 10 10 z',
//宽度
width: 10,
//高度
height: 10
}
}, opts);
//...后续逻辑...
}
细节请参见：自定义Path类形状示例，水滴形状实现
