⾼德地图WebJSAPI⽰例学习笔记（11）——覆盖物（⽮量图形）⽂章⽬录
⽮量图形
折线的绘制和编辑
本⽰例先创建⼀条polyline，再通过AMap.PolyEditor插件进⾏编辑，功能有限，不太好⽤。
使⽤AMap.Polyline和AMap.PolyEditor插件绘制和编辑折线
var path =[
[116.362209,39.887487],
[116.422897,39.878002],
[116.372105,39.90651],
[116.428945,39.89663]
];
var polyline =new AMap.Polyline({
path: path,
蝴蝶的生长过程isOutline:true,
outlineColor:'#ffeeff',
borderWeight:3,
strokeColor:"#3366FF",
strokeOpacity:1,
strokeWeight:6,
// 折线样式还⽀持 'dashed'
strokeStyle:"solid",
// strokeStyle是dashed时有效
strokeDasharray:[10,5],
lineJoin:'round',
lineCap:'round',
zIndex:50,
})
polyline.tMap(map)
// 缩放地图到合适的视野级别
map.tFitView([ polyline ])
var polyEditor =new AMap.PolyEditor(map, polyline)
<('addnode',function(event){
log.info('触发事件：addnode')
})
<('adjust',function(event){
log.info('触发事件：adjust')
})
<('removenode',function(event){
log.info('触发事件：removenode')
})
<('end',function(event){
log.info('触发事件： end')
// event.target 即为编辑后的折线对象
})
多边形的绘制和编辑
使⽤AMap.Polygon和AMap.PolyEditor插件绘制和编辑多边形与折线的绘制与编辑原理相同，此处不再赘述
矩形的绘制和编辑
使⽤AMap.Rectangle和AMap.RectangleEditor绘制和编辑矩形
圆的绘制和编辑
使⽤AMap.Circle和AMap.CircleEditor绘制和编辑圆
绘制⽮量图形（重点）
利⽤AMap.MouTool绘制折线、弧线、多边形、矩形、圆形等
var mouTool =new AMap.MouTool(map)
function drawPolyline(){
mouTool.polyline({
strokeColor:"#3366FF",
strokeOpacity:1,
strokeWeight:6,
// 线样式还⽀持 'dashed'
strokeStyle:"solid",
// strokeStyle是dashed时有效
// strokeDasharray: [10, 5],人口买卖
})
}
function drawPolygon(){
mouTool.polygon({
世界上最大的蝙蝠strokeColor:"#FF33FF",
strokeOpacity:1,
strokeWeight:6,
strokeOpacity:0.2,
fillColor:'#1791fc',
fillOpacity:0.4,
// 线样式还⽀持 'dashed'
strokeStyle:"solid",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
}
function drawRectangle(){
strokeColor:'red',
strokeOpacity:0.5,
strokeWeight:6,
酸辣苕粉fillColor:'blue',
fillOpacity:0.5,
// strokeStyle还⽀持 solid
strokeStyle:'solid',
// strokeDasharray: [30,10],
})
}
function drawCircle(){
mouTool.circle({
strokeColor:"#FF33FF",
strokeOpacity:1,
strokeWeight:6,
strokeOpacity:0.2,
fillColor:'#1791fc',
fillOpacity:0.4,
strokeStyle:'solid',
/
/ 线样式还⽀持 'dashed'
// strokeDasharray: [30,10],
})
}
<('draw',function(event){
// event.obj 为绘制出来的覆盖物对象
log.info('覆盖物对象绘制完成')
})
绘制图形后，可以在mouTool的draw事件中，将绘制的对象存储成新的⽮量要素。带洞多边形
使⽤Polygon在地图上绘制带洞的多边形。// 外多边形坐标数组和内多边形坐标数组
var pointers ={
outer:[
[117.104554,30.504444],
[117.118974,30.506219],
[117.12893,30.508586],
[117.13305,30.511248],
波提切利春[117.139917,30.514501],
[117.147126,30.518642],
[117.153993,30.5216],
小石潭记主旨
[117.161546,30.526036],
[117.171502,30.529289],
[117.177339,30.531655],
[117.184892,30.531063],
[117.197595,30.533133],
[117.212014,30.535499],
[117.223001,30.536682],
[117.233987,30.536977],
[117.23845,30.538456],
[117.240854,30.545848],
[117.251153,30.543778],
[117.251497,30.53816],
[117.24875,30.530767],
[117.246347,30.523965],
[117.243943,30.515684],
[117.241197,30.504149],
[117.238107,30.493795],
[117.229524,30.481073],
[117.221971,30.474268],
[117.215104,30.469533],
[117.204461,30.466574],
[117.190728,30.462727],
[117.183862,30.464207],
[117.156739,30.47456],
[117.14644,30.47841],
[117.140603,30.482257],
[117.127214,30.485215],
[117.107988,30.487878]
],雄黄的功效与作用
inner:[
[117.162061,30.49361],
[117.167211,30.49716],
[117.172361,30.50071],
[117.177167,30.505739],
[117.184034,30.512542],
[117.18987,30.522894],
[117.2012,30.525851],
[117.210126,30.527034],
[117.219396,30.526443],
[117.225919,30.527034],
港台女歌手
[117.234159,30.529104],
[117.237935,30.528808],
[117.235532,30.522894],
[117.234502,30.516683],
[117.232785,30.507514],
[117.226262,30.491835],
[117.217336,30.480297],
[117.202916,30.4729],
[117.194677,30.470828],
[117.184034,30.473491],
[117.177511,30.47793],
[117.170644,30.484439],
[117.167897,30.489173]
]
]
};
var pathArray =[
pointers.outer,
pointers.inner
];
var polygon =new AMap.Polygon(polygonOptions);
polygon.tPath(pathArray);
将外多边形的坐标数组和内多边形的坐标数组放到path中，绘制成带洞的图形。
遮罩
通过给地图添加⼀个⽆限⼤的带洞多边形，实现遮罩效果，即只显⽰某个区域的地图
原理与前⽂的带洞多边形⽰例相同，此处不再赘述。只是此处选择了⼀个⽆限⼤的外边界。
GeoJSON（重点）
使⽤GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物。
前⽂的WMTS和WMS服务加载的数据是Tile数据，此处相当于常规的地图WFS服务，只是⽆法根据条件进⾏过滤。
