vue 给圆遮盖物添加文字 高德地图_近期使用高德地图 JS api 的部分总结
高德 JS api 总结
简介
此次是对最近使用高德地图的JS api做一个总结，关于各个类可以实现什么效果，以及如何使用。之后会总结一些常见问题的优化思路和解决办法。
Vue 中引入高德地图 api
npm 包引入
npm i amap-js -S
复制代码
优点：开箱即用，使用简单
script 脚本引入
在 index.html 中加入链接，链接后跟申请的 key。
src="https://webapi.amap.com/maps?v=1.4.15&key=[key]"
>
复制代码
在 vue.config.js 中配置全局名，在代码中可以通过 vue 实例直接调用。
module.exports = {
configureWebpack: {
externals: {
AMap: "AMap",
AMapUI: "AMapUI"
}
};
}
复制代码
优点：定制化程度高，可以按需组合功能。
高德地图基础概念
地图
地图是高德地图 api 的承载，所有的 api 都需要由一个地图来接收，同一个界面可以有多个地图。
复制代码
this.map = new this.AMap.Map("container", {
resizeEnable: true, // 是否监控地图容器尺寸变化
zoom: 15, // 初始化地图层级
zooms: [5, 18], //地图允许缩放的层级
center: [117.96, 40.96], // 初始化地图中心点
mapStyle: "amap://styles/407154d906b9cd83d4e5e57df8b27cec" //自定义地图发布的样式
});
复制代码
图层
图层是覆盖在地图上的一个个层，每一层具有不同的功能，层与层之间拥有层级关系。
官方图层
类名说明是否插件AMap.TileLayer切片图层类否
AMap.TileLayer.Satellite卫星图层类，继承自 TileLayer否
AMap.TileLayer.RoadNet路网图层类，继承自 TileLayer否
AMap.TileLayer.Traffic实时交通图层类，继承自 TileLayer否
AMap.Buildings楼块图层，独立显示矢量楼块数据的一种图层否
AMap.MassMarks图海量麻点图层类否
AMap.Heatmap热力图插件是
AMap.LayerGroup图层集合，用来包装其它图层类的实例并对集合做批量操作否
AMap.LabelsLayer标注图层，用于添加 LabelMarker 类型标注否
// 卫星
let satellite = new AMap.TileLayer.Satellite();
// 路网
let road = new AMap.TileLayer.RoadNet();
this.map.setLayers([satellite, road]);
复制代码
自建图层
类名说明是否插件AMap.TileLayer.Flexible自定义切片图层，即可灵活自定义切片内容的栅格图层，继承自 AMap.TileLayer否
AMap.ImageLayer图片图层，可将图片叠加在地图的对应区域否
AMap.CanvasLayerCanvas 图层，可将 Canvas 叠加在地图的对应区域否
AMap.VideoLayerVideo 图层，可将视频叠加在地图的对应区域否
AMap.CustomLayer完全自定义绘制的图层否
let imageLayer = new AMap.ImageLayer({
url:
"http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
bounds: new AMap.Bounds([116.327911, 39.939229], [116.342659, 39.946275])
});
复制代码
WMS/WMTS
类名描述是否插件AMap.TileLayer.WMS用于加载 OGC 标准的 WMS 图层否
AMap.TileLayer.WMTS用于加载 OGC 标准的 WMTS 图层否
var wms = new AMap.TileLayer.WMTS({
url:
"https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/",
blend: false,
tileSize: 256,
params: {
Layer: "0",
Version: "1.0.0",
Format: "image/png",
TileMatrixSet: "EPSG:3857"
}
});
复制代码
覆盖物
覆盖物是绘制在地图上的一些矢量图形或图标。
Marker 类
点标记，图标可以自定义。
Text 类
文本标注，可以添加自定义样式的文本。
Polyline 类
折线
Polygon 类
多边形
BezierCurve 类
贝塞尔曲线
Circle 类
圆形
OverlayGroup 类
OverlayGroup 是覆盖物管理类，可以用此类批量管理覆盖物的显示隐藏及其他操作。
信息窗体
信息窗体是根据地图位置偏移显示在界面上的一个 HTML 节点。
this.infoWindow = new this.AMap.InfoWindow({
isCustom: true,
autoMove: true,
closeWhenClickMap: true,
anchor: "top-left",
content: document.getElementById("infoWindow"),
offset: new this.AMap.Pixel(22, 22)
});
复制代码
地图控件
地图控件是官方封装的一些用来控制地图操作的组件。
控件名称说明是否插件AMap.ControlBar组合了旋转、倾斜、复位、缩放在内的地图控件，在 3D 地图模式下会显示(自 V1.4.0 版本新增)是
AMap.MapType地图类型切换插件，用来切换固定的几个常用图层是
AMap.OverView地图鹰眼插件，默认在地图右下角显示缩略图是
AMap.Scale地图比例尺插件是
AMap.ToolBar地图工具条插件，可以用来控制地图的缩放和平移是
this.map.plugin(["AMap.ControlBar"], () => {
let controlBar = new AMap.ControlBar(Options);
this.map.addControl(controlBar);
});
复制代码
工具
插件名称说明是否插件AMap.MouseTool鼠标工具插件是
AMap.CircleEditor圆编辑插件，用于编辑 AMap.Circle 对象是
AMap.PolyEditor折线、多边形编辑插件是
AMap.BezierCurveEditor贝瑟尔曲线编辑插件是
AMap.EllipseEditor椭圆编辑插件是
AMap.RectangleEditor矩形编辑插件是
AMap.Hotspot地图热点是
AMap.MarkerClusterer点聚合插件是
AMap.RangingTool距离量测插件是
事件监听
使用on( eventName, handler, context)和off( eventName, handler, context)方法对地图及地图元素进行监听。
eventName：事件名称(必填)
handler：事件回调函数(必填)
context：事件回调中的上下文(可选，缺省时，handler 中 this 为调用 on 方法的对象本身，否则 this 指向 context 引用的对象)
注意：多次绑定时，当 eventName、handler 函数对象、context 对象有任意一个不一样就会再次绑定。