工具类 最后更新时间: 2021年01月22日
在线插件
工具插件是在基础地图服务上增加的额外功能,您可以根据自己的需要选择添加,它不依赖于UI元素,完成某些地图功能,比如鼠标工具(MouseTool)等。
插件名称 | 说明 | 是否插件 |
---|---|---|
鼠标工具插件 | 是 | |
圆编辑插件,用于编辑AMap.Circle对象 | 是 | |
折线、多边形编辑插件 | 是 | |
贝瑟尔曲线编辑插件 | 是 | |
椭圆编辑插件 | 是 | |
矩形编辑插件 | 是 | |
地图热点 | 是 | |
点聚合插件 | 是 | |
距离量测插件 | 是 |
鼠标工具插件。通过该插件,可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
代码示例
mapObj.plugin(["AMap.MouseTool"],function(){
var mousetool = new AMap.MouseTool(mapObj);
mousetool.marker(); //使用鼠标工具,在地图上画标记点
});
构造函数 | 说明 |
---|---|
| MouseTool的构造函数,目前仅支持桌面浏览器 |
方法 | 返回值 | 说明 |
---|---|---|
|
| 开启鼠标画点标注模式。鼠标在地图上单击绘制点标注,标注样式参考MarkerOptions设置 |
| 开启鼠标画折线模式。鼠标在地图上点击绘制折线,鼠标左键双击或右键单击结束绘制,折线样式参考PolylineOptions设置 | |
| 开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形,鼠标左键双击或右键单击结束当前多边形的绘制,多边形样式参考PolygonOptions设置 | |
| 开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置 | |
| 开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置 | |
| 开启距离量测模式。鼠标在地图上单击绘制量测节点,并计算显示两两节点之间的距离,鼠标左键双击或右键单击结束当前量测操作。量测线样式参考 PolylineOptions 设置 注:不能同时使用rule方法和RangTool插件进行距离量测 | |
| 开启面积量测模式。鼠标在地图上单击绘制量测区域,鼠标左键双击或右键单击结束当前量测操作,并显示本次量测结果。量测面样式参考PolygonOptions设置 | |
| 开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置 | |
| 开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置 | |
| 关闭当前鼠标操作。参数arg设为true时,鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象;设为false时,保留所绘制的覆盖物对象。默认为false |
事件 | 参数 | 说明 |
---|---|---|
|
| 鼠标工具绘制覆盖物结束时触发此事件,obj对象为绘制出来的覆盖物对象。 |
圆编辑插件。用于编辑AMap.Circle对象,功能包括使用鼠标改变圆半径大小、拖拽圆心改变圆的位置。
代码示例
var circle = new AMap.Circle({
map: mapObj,
center:new AMap.LngLat("116.40332221984863","39.90025505675715"),
radius:1000,
strokeColor: "#F33",
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "ee2200",
fillOpacity: 0.35
});
mapObj.plugin(["AMap.CircleEditor"],function(){
circleEditor = new AMap.CircleEditor(mapObj,circle);
circleEditor.open();
});
构造函数 | 说明 |
---|---|
| CircleEditor的构造函数,参数Map为指定的地图对象,Circle为需要编辑的圆形对象。 目前仅支持桌面浏览器 |
方法 | 返回值 | 说明 |
---|---|---|
| 打开编辑功能 | |
| 关闭编辑功能 |
事件 | 参数 | 说明 |
---|---|---|
|
| 拖拽圆心调整圆形位置时触发此事件 type: 事件类型 target: 发生事件的目标对象 lnglat: 调整后圆的圆心坐标 |
|
| 鼠标调整圆形半径时,触发此事件 type: 事件类型 target: 发生事件的目标对象 radius: 调整后圆的半径,单位:米 |
|
| 该方法会在调用close方法后触发,target即为编辑后的圆对象 |
折线、多边形编辑插件,用于编辑AMap.Polyline、AMap.Polygon对象,目前支持通过鼠标调整折线、多边形的形状。
代码示例
//编辑折线
function editLine(){
var arr=new Array();//经纬度坐标数组
arr.push(new AMap.LngLat("116.368904","39.913423"));
arr.push(new AMap.LngLat("116.382122","39.901176"));
arr.push(new AMap.LngLat("116.387271","39.912501"));
arr.push(new AMap.LngLat("116.398258","39.904600"));
//定义折线对象
polyline=new AMap.Polyline({
path:arr, //设置折线的节点数组
strokeColor:"#F00",
strokeOpacity:0.4,
strokeWeight:3,
strokeStyle:"dashed",
strokeDasharray:[10,5]
});
polyline.setMap(mapObj);//地图上添加折线
//构造折线编辑对象,并开启折线的编辑状态
mapObj.plugin(["AMap.PolyEditor"],function(){
polylineEditor = new AMap.PolyEditor(mapObj,polyline);
polylineEditor.open();
});
}
构造函数 | 说明 |
---|---|
| PolyEditor的构造函数,参数Map为指定的地图对象,Object为需要编辑的折线或多边形对象。 目前仅支持桌面浏览器 |
方法 | 返回值 | 说明 |
---|---|---|
| 打开编辑功能。 功能开启后,多边形/折线上显示可编辑点,其中不透明点为实际结点,鼠标左键单击该类节点可进行删除操作; 半透明点为虚拟节点,单击该类节点将为多边形/折线新增结点; 实际结点和虚拟节点均可进行拖动操作,以改变多边形/折线的形状。 | |
| 关闭编辑功能 |
AMap.BezierCurveEditor插件
贝瑟尔曲线的编辑插件,用于编辑AMap.BezierCurve对象,支持途经点控制点的调整和控制点的增加删除,前往示例
操作方法:1)单击途经点或者控制点可删除被点击的途经点或者控制点
2)PC上右键点击途经点或者手机上长按途经点可以在该途经点之前增加控制点
构造函数 | 说明 |
---|---|
| 贝瑟尔曲线编辑器的构造函数,参数Map为指定的地图对象,curve为需要编辑的贝瑟尔曲线对象,ops为构造配置参数 支持桌面浏览器和手机浏览器 |
BezierCurveEditorOptions | 类型 | 说明 |
---|---|---|
|
| 用于自定义编辑控制点的样式,返回字段同MarkerOptions。type有'pathNode','ctrlNode','midNode'。分别指途经点、控制点和中间点。如:
|
|
| 用于自定义控制线的样式,返回字段同PolylineOptions,如:
|
方法 | 返回值 | 说明 |
---|---|---|
| 打开编辑功能。 功能开启后及,曲线上显示途经点和控制点,按照上面的操作方法即可进行曲线的编辑 | |
| 关闭编辑功能 |
椭圆的编辑插件,用于编辑AMap.Ellipse对象,目前支持通过鼠标调整椭圆的圆心和形状。
代码示例:
function editEllipse() {
var ellipse = new AMap.Ellipse({
center: [ 116.4, 39.91 ],
radius: [ 2000, 1000 ]
})
ellipse.setMap(mapObj)
maoObj.plugin(['AMap.EllipseEditor'], function() {
var ellipseEditor = new AMap.EllipseEditor(mapObj, ellipse)
ellipseEditor.open()
})
}
构造函数 | 说明 |
---|---|
AMap.EllipseEditor(map: Map, ellipse: AMap.Ellipse) | EllipseEditor的构造函数,参数map为指定的地图对象,ellipse是需要编辑的椭圆对象。目前仅支持桌面浏览器。 |
方法 | 返回值 | 说明 |
---|---|---|
open() | 打开编辑功能。功能开启后,通关编辑点可调整椭圆的圆心和长短轴半径 | |
close() | 关闭编辑功能 |
事件 | 参数 | 说明 |
---|---|---|
move | { type, lnglat, target } | 鼠标调整椭圆的圆心位置时会触发该事件 |
adjust | { type, lnglat, target } | 鼠标调整横向和纵向半径时触发该事件 |
end | { type, target } | 在调用close方法时,触发该事件,target即编辑的椭圆 |
矩形的编辑插件,用于编辑AMap.Rectangle对象,目前支持通过鼠标调整矩形的形状。
代码示例
function editRectangle() {
var Rectangle = new AMap.Rectangle({
bounds: new AMap.Bounds(new AMap.LngLat(116.2, 39.6), new AMap.Bounds(new AMap.LngLat(116.4, 39.8)))
})
Rectangle.setMap(mapObj)
maoObj.plugin(['AMap.RectangleEditor'], function() {
var RectangleEditor = new AMap.RectangleEditor(mapObj, Rectangle)
RectangleEditor.open()
})
}
构造函数 | 说明 |
---|---|
AMap.RectangleEditor(map: Map, Rectangle: AMap.Rectangle) | RectangleEditor的构造函数,参数map为指定的地图对象,Rectangle是需要编辑的矩形对象。目前仅支持桌面浏览器。 |
方法 | 返回值 | 说明 |
---|---|---|
open() | 打开编辑功能。功能开启后,通过编辑点可调整矩形的形状 | |
close() | 关闭编辑功能 |
事件 | 参数 | 说明 |
---|---|---|
adjust | { type, radius, target } | 鼠标调整横向和纵向半径时触发该事件 |
end | { type, target } | 在调用close方法时,触发该事件,target即编辑的矩形 |
底图热点插件,该插件作用是为底图上POI点增加热点事件。底图热点也支持通过Map的isHotspot属性开启。
代码示例
mapObj = new AMap.Map("iCenter");
//加载麻点图插件
var hotspot;
mapObj.plugin('AMap.HotSpot', function () {
hotspot = new AMap.HotSpot(mapObj);
AMap.event.addListener(hotspot, 'click', openInfo);//点击热点时打开信息窗体
});
或者通过Map的isHotspot属性开启
mapObj = new AMap.Map("iCenter", {
//二维地图显示视口
view: new AMap.View2D({
center:new AMap.LngLat(116.397428,39.90923),//地图中心点
zoom:13 //地图显示的缩放级别
}),
isHotspot:true //打开地图热点,默认:false,不打开
});
构造函数 | 说明 |
---|---|
| 构造函数,构造底图热点类对象 |
方法 | 返回值 | 说明 |
---|---|---|
| 设置添加该图层的地图对象,参数设置为null时,取消该插件 |
事件 | 参数 | 说明 |
---|---|---|
|
| 点击热点触发事件 |
|
| 鼠标移进热点触发事件 |
| 鼠标移出热点触发事件 |
用于地图上加载大量点标记,提高地图的绘制和显示性能。目前点聚合插件聚合的点的数量在10万以内时可以保持较好的性能。点聚合支持用户自定义点标记。使用用户自定义点样式代码如下:
代码示例
//利用styles属性修改点聚合的图标样式
var sts=[{
url:"imgs/1.png",
size:new AMap.Size(32,32),
offset:new AMap.Pixel(-16,-30)
},
{
url:"imgs/2.png",
size:new AMap.Size(32,32),
offset:new AMap.Pixel(-16,-30)
},
{
url:"imgs/3.png",
size:new AMap.Size(48,48),
offset:new AMap.Pixel(-24,-45),
textColor:'#CC0066'
}];
mapObj.plugin(["AMap.MarkerClusterer"],function() {
cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
});
//使用renderClusterMarker属性实现聚合点的完全自定义绘制
var count = markers.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count/count,1/18)
var div = document.createElement('div');
var Hue = 180 - factor* 180;
var bgColor = 'hsla('+Hue+',100%,50%,0.7)';
var fontColor = 'hsla('+Hue+',100%,20%,1)';
var borderColor = 'hsla('+Hue+',100%,40%,1)';
var shadowColor = 'hsla('+Hue+',100%,50%,1)';
div.style.backgroundColor = bgColor
var size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
div.style.width = div.style.height = size+'px';
div.style.border = 'solid 1px '+ borderColor;
div.style.borderRadius = size/2 + 'px';
div.style.boxShadow = '0 0 1px '+ shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size+'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
context.marker.setContent(div)
}
var cluster = new AMap.MarkerClusterer(map,markers,{
gridSize:80,
renderClusterMarker:_renderClusterMarker
});
构造函数 | 说明 |
---|---|
| 构造一个点聚合插件对象。参数map为地图实例,将要进行点聚合的地图对象;markers为需要进行聚合显示的点标记集合。opts属性参考MarkerClustererOptions列表中的说明 |
MarkerClustererOptions | 类型 | 说明 |
---|---|---|
|
| 聚合计算时网格的像素大小,默认60 |
|
| 聚合的最小数量。默认值为2,即小于2个点则不能成为一个聚合 |
|
| 最大的聚合级别,大于该级别就不进行相应的聚合。默认值为18,即小于18级的级别均进行聚合,18及以上级别不进行聚合 |
|
| 聚合点的图标位置是否是所有聚合内点的中心点。默认为否,即聚合点的图标位置位于聚合内的第一个点处 |
|
| 指定聚合后的点标记的图标样式,可缺省,缺省时为默认样式; 数据元素分别对应聚合量在1-10,11-100,101-1000…的聚合点的样式; 当用户设置聚合样式少于实际叠加的点数,未设置部分按照系统默认样式显示; 单个图标样式包括以下几个属性: 1. 2. 3. 4. 5. 6. |
|
| 该方法用来实现聚合点的自定义绘制,由开发者自己实现,API将在绘制每个聚合点的时候调用这个方法,可以实现聚合点样式的灵活设定,指定了 该函数的入参为一个Object,包含如下属性: 1. 2. 3. 在 |
|
| 点击聚合点时,是否散开,默认值为:true |
方法 | 返回值 | 说明 |
---|---|---|
| 添加一个需进行聚合的点标记 | |
| 删除一个聚合的点标记 | |
|
| 获取聚合点的总数量 |
|
| 获取聚合网格的像素大小 |
|
| 获取地图中点标记的最大聚合级别 |
|
| 获取单个聚合的最小数量 |
|
| 获取聚合的样式风格集合 |
| 设置聚合网格的像素大小 | |
| 设置地图中点标记的最大聚合级别 | |
| 设置单个聚合的最小数量 | |
| 设置聚合的样式风格 | |
| 从地图上彻底清除所有聚合点标记 | |
| 设置将进行点聚合的地图对象 | |
| 设置将进行点聚合显示的点标记集合 | |
| 获取该点聚合的地图对象 | |
|
| 获取该点聚合中的点标记集合 |
| 添加一组需进行聚合的点标记 | |
| 删除一组聚合的点标记 | |
|
| 获取单个聚合点位置是否是聚合内所有标记的平均中心 |
| 设置单个聚合点位置是否是聚合内所有标记的平均中心 |
事件 | 参数 | 说明 |
---|---|---|
|
| 点击事件,其中: cluster:点击的聚合点对象, lnglat:点击的位置点坐标, target:点聚合插件对象, marker:点击的聚合点所包含的点对象。 |
热力图,基于第三方heatmap.js实现,以特殊高亮的形式显示数据密集程度。根据密集程度的不同,图上会呈现不同的颜色,以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0,v2.0基于新的渲染模型,具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。
代码示例
var heatmap;
var points =[
{"lng":116.191031,"lat":39.988585,"count":10},
{"lng":116.389275,"lat":39.925818,"count":11},
{"lng":116.287444,"lat":39.810742,"count":12},
{"lng":116.481707,"lat":39.940089,"count":13},
{"lng":116.410588,"lat":39.880172,"count":14},
{"lng":116.394816,"lat":39.91181,"count":15},
{"lng":116.416002,"lat":39.952917,"count":16}
];
map.plugin(["AMap.Heatmap"],function() { //加载热力图插件
heatmap = new AMap.Heatmap({map:map}); //在地图对象叠加热力图
heatmap.setDataSet({data:points,max:100}); //设置热力图数据集
<!--heatmap.setOptions({
radius:40,
gradient:{
0.5:'blue',
0.65:'rgb(117,211,248)',
0.7:'rgb(0, 255, 0)',
0.9:'#ffea00',
1.0:'red'
}
}); -->//具体参数见接口文档
});
构造函数 | 说明 |
---|---|
| 构造一个热力图插件对象,map为要叠加热力图的地图对象,opts属性参考HeatmapOptions列表中的说明。 |
HeatmapOptions | 类型 | 说明 |
---|---|---|
|
| 热力图中单个点的半径,默认:30,单位:pixel |
|
| 热力图的渐变区间,热力图按照设置的颜色及间隔显示热力图,例: { 0.4:'rgb(0, 255, 255)', 0.65:'rgb(0, 110, 255)', 0.85:'rgb(100, 0, 255)', 1.0:'rgb(100, 0, 255)' } 其中 key 表示间隔位置,取值范围: [0,1],value 为颜色值。默认:heatmap.js标准配色方案 |
|
| 热力图透明度数组,取值范围[0,1],0表示完全透明,1表示不透明,默认:[0,1] |
|
| 支持的缩放级别范围,取值范围[3-18],默认:[3,18] |
方法 | 返回值 | 说明 |
---|---|---|
| 设置热力图要叠加的地图对象,也可以在Map中的layers属性中设置为默认显示的图层 | |
| 设置热力图属性,参考HeatmapOptions列表中的说明 | |
| 向热力图数据集中添加坐标点,count不填写时默认:1 | |
| 设置热力图展现的数据集,数据集格式为: {max: Number 权重的最大值, data: Array 坐标数据集}, 其中max不填则取数据集count最大值 例: {max: 100, data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …]} url:jsonp格式数据的服务地址 urlDataParser: 当jsonp返回结果和官方结构不一致的时候,用户可以传递一个函数用来进行数据格式转换 | |
| 隐藏热力图 | |
| 显示热力图 | |
| 获取热力图叠加地图对象 | |
|
| 获取热力图的属性信息 |
|
| 输出热力图的数据集,数据结构同setDataSet中的数据集 |
距离量测插件,提供更为丰富的样式设置功能。
代码示例
//加载距离测量插件
mapObj.plugin(["AMap.RangingTool"],function(){
var ruler = new AMap.RangingTool(mapObj);
});
构造函数 | 说明 |
---|---|
| 构造一个距离量测插件对象。参数map为地图实例。 opts属性参考RangingToolOptions列表中的说明 |
RangingToolOptions | 类型 | 说明 |
---|---|---|
|
| 设置量测起始点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
|
| 设置量测中间点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
|
| 设置量测结束点标记属性对象,包括点标记样式、大小等,参考 MarkerOptions 列表 |
|
| 设置距离量测线的属性对象,包括线样式、颜色等,参考 PolylineOptions 列表 |
|
| 设置距离量测过程中临时量测线的属性对象,包括线样式、颜色等,参考 PolylineOptions 列表 |
|
| 设置量测起始点标签的文字内容,默认为“起点” |
|
| 设置量测中间点处标签的文字内容,默认为当前量测结果值 |
|
| 设置量测结束点处标签的文字内容,默认为当前量测结果值 |
| 设置量测起始点标签的偏移量。默认值:Pixel(-6, 6) | |
| 设置量测中间点标签的偏移量。默认值:Pixel(-6, 6) | |
| 设置量测结束点标签的偏移量。默认值:Pixel(-6, 6) |
方法 | 返回值 | 说明 |
---|---|---|
| 开启距离量测功能 | |
| 关闭距离量测功能 |
事件 | 参数 | 说明 |
---|---|---|
|
| 每添加一个量测点时触发此事件,参数: marker:添加的标记点对象 position:添加的标记点坐标 type:事件类型为addnode |
|
| 每删除一个量测点时触发此事件,参数: target:距离量测对象 polyline:量测线对象 points:量测点(LngLat)对象的集合 distance:本次距离量测的总距离值,单位默认为:公里 |
|
| 距离量测结束后触发此事件,参数: target:距离量测对象 polyline:量测线对象 points:量测点(LngLat)对象的集合 distance:本次距离量测的总距离值,单位默认为:公里 |