自定义图层 最后更新时间: 2023年03月27日
自定义图层 CustomLayer
自定义图层是完全由开发者指定绘制方法的图层。该图层可以是 canvas、svg、甚至可以是 dom 组成的图层。 JS API 能够实现自定义图层与高德地图的同步平移和缩放，并调用开发者的 render 方法进行图层的重绘。 自定义图层使用 AMap.CustomLayer 类来进行构造，构造函数接受两个参数，第一个参数是作为图层的 dom 画布，第二个参数是图层的相关属性设定，与通用图层属性相同。以下为自定义图层的使用方法：
1
创建一个自定义图层
// 创建 canvas
var canvas = document.createElement('canvas');
// 将 canvas 宽高设置为地图实例的宽高
canvas.width = map.getSize().width;
canvas.height = map.getSize().height;
// 创建一个自定义图层
var customLayer = new AMap.CustomLayer(canvas, {
zIndex: 12,
zooms: [3, 18] // 设置可见级别，[最小级别，最大级别]
});
// 将自定义图层添加到地图
map.add(customLayer);2
自定义渲染方法
可使用 render 方法自定义图层渲染，开发者应该更新绘制时使用的容器内像素位置来重新绘制图层内容，像素位置是由经纬度坐标转换而来，通常使用 map. lnglatToContainer 方法进行转换。
提示
render 方法在自定义图层初次绘制、地图移动与缩放结束时调用。
// 使用 canvas 在地图中心点绘制一个圆形
customLayer.render = () => {
// 获取地图中心点位置
var center = map.getCenter()
var pos = map.lngLatToContainer(center);
var r = 20;
// 使用 canvas 绘制圆形
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#08f';
ctx.strokeStyle = '#fff';
ctx.beginPath();
ctx.moveTo(pos.x + r, pos.y)
ctx.arc(pos.x, pos.y, r, 0, 2 * Math.PI);
ctx.lineWidth = 3
ctx.closePath();
ctx.stroke();
ctx.fill();
}