高德 JS api 总结
简介
此次是对最近使用高德地图的JS api做一个总结，关于各个类可以实现什么效果，以及如何使用。之后会总结一些常见问题的优化思路和解决办法。
本文博客地址-https://encaik.gitee.io/blog/amap.html
Vue 中引入高德地图 api
- npm 包引入
npm i amap-js -S
优点：开箱即用，使用简单
- script 脚本引入
在 index.html 中加入链接，链接后跟申请的 key。
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=[key]"
></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
在 vue.config.js 中配置全局名，在代码中可以通过 vue 实例直接调用。
module.exports = {
configureWebpack: {
externals: {
AMap: "AMap",
AMapUI: "AMapUI"
}
};
}
优点：定制化程度高，可以按需组合功能。
高德地图基础概念
地图
地图是高德地图 api 的承载，所有的 api 都需要由一个地图来接收，同一个界面可以有多个地图。
<!-- 地图 -->
<div id="container" style="width: 100%; height: 100%"></div>
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.CanvasLayer | Canvas 图层，可将 Canvas 叠加在地图的对应区域 | 否 |
| AMap.VideoLayer | Video 图层，可将视频叠加在地图的对应区域 | 否 |
| 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 对象有任意一个不一样就会再次绑定。
