矢量标注 最后更新时间: 2021年01月22日
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。 |
|
| SimpleMarker的构造参数（但不包括 |
方法（父类）
方法名称 | 返回值 | 说明 |
|---|---|---|
| 更新shape实例，并基于该shape重新设定图标内容（即父类SimpleMarker的iconStyle）；shape实例的引用没变，但shape的相关参数（比如width，height等）改变时也需要调用此方法。示例 |
静态属性
属性名称 | 说明 |
|---|---|
SvgMarker. | 布尔值，标识当前浏览器环境是否支持SVG |
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：
类名 | 简介 |
|---|---|
| 水滴形 |
| 带尖角的方形 |
| 盾牌形 |
| 五角星 |
| 三角旗帜 |
| 矩形旗帜 |
普通形状：
类名 | 简介 |
|---|---|
| 圆形, 构造参数：半径( |
特殊类型：
类名 | 简介 |
|---|---|
| IconFont是阿里巴巴出品的矢量图标库，其上存在大量的Marker图标可供选择。SvgMarker.Shape.IconFont基于symbol引用方式。构造参数：
|
自定义Shape
基本形状
所有Shape均继承自 SvgMarker.Shape.BaseShape, 子类需要实现的核心接口有：
方法名称 | 返回值 | 说明 |
|---|---|---|
|
| 返回Svg的内部构造。参数
|
|
| 返回形状左上角相对于定位点的偏移，比如如果定位点在中心，可返回：
|
|
| 返回形状的“中心”点位置，默认返回形状宽高所占矩形的中心点。该方法为辅助性质，通常用于确定iconLabel的摆放位置，不同大小的不同形状可以自主确定“中心”点位置，比如水滴形状的垂直“中心”位置取在上方
|
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类形状示例，水滴形状实现