absolute被覆盖_腾讯地图JSAPI教程-在地图上添加自定义覆盖物

在地图上添加覆盖物有两种方式，一是在canvas画布上渲染，比如JSAPI GL绘制 MultiMarker/MultiPolygon 等矢量图形覆盖物就是通过编写对应图形的数据解析及渲染程序，直接绘制在底图上层。这样的渲染方式下视角变换时图形也可以实现3D形变。另一种方式是通过CSS布局将其他DOM元素叠加到地图容器之上，这种方式下视角变换时DOM元素需重新计算布局，比如JSAPI v2的 Marker/Polygon 等覆盖物，以及JSAPI GL的 InfoWindow 信息窗，这些都属于DOM覆盖物。

如果你需要叠加一个自定义的复杂元素，第一种方式的话需要实现对应的数据解析和着色器程序，需要了解WebGL的渲染原理，成本很高，且不易变通。而DOM是每个前端工程师都非常熟悉的，简单几个标签加CSS就能实现高度定制的DOM元素。但是如何将一个DOM元素正确地安置在地图上，并且随着地图平移、旋转、缩放实时调整自己的位置呢？

这就要使用到 DOMOverlay 了。它并不是一个具体的DOM覆盖物，而是所有DOM覆盖物的抽象基类， InfoWindow 就继承自它。 DOMOverlay 抽象出了DOM覆盖物的生命周期，公共属性及方法，实现了地图事件的监听绑定及解绑，你只需要关注DOM节点的创建和位置计算方法即可。

DOMOverlay 接口设计

先来看看 DOMOverlay 的类关系图，这里结合了 官网示例DOMOverlay 中定义的 Donut 类作为 DOMOverlay 的实现：

公共属性及方法

事件监听及触发

从上图可见， DOMOverlay 继承自Node.js的 EventEmitter 类，所以它已经实现了事件监听、触发等功能的封装，不太熟悉的同学可以看看 Node.js EventEmitter | 菜鸟教程 。

地图绑定与解绑

DOMOverlay 有一个公共属性 map ，其值为该覆盖物绑定的地图实例，同时提供了 setMap(map: Map) 和 getMap() 方法作为 map 参数的访问器。 要将自定义覆盖物显示在地图上，首先得明确具体的地图实例，有两种办法，一是在初始化参数中定义 map 属性，二是通过 setMap 进行动态设置，可以绑定到另一个地图实例上，或者解绑。 setMap 做了什么呢？绑定时一方面主要是将 createDOM() 返回的DOM元素加入到特定的节点下，使其覆盖在地图上方且可以进行相对定位；另一方面是监听地图变换执行 updateDOM() ，使DOM元素可以跟随地图更新定位或内容。解绑时则是将其从父节点下去除，同时删除对地图事件的监听。

DOM元素

DOMOverlay的公共属性dom指向的是该覆盖物的具体元素，可以是HTMLElement或者SVGElement，该元素的创建由子类进行实现，绑定地图后会挂载到覆盖在canvas画布上层的一个div容器中。

销毁

当覆盖物不再被使用时应适时进行销毁操作，以防内存泄漏。 destroy 方法封装了销毁时应执行的操作，一方面将地图解绑，另一方面删除对象上注册的所有监听器。

抽象方法

DOMOverlay 提供了4个抽象方法，在生命周期的不同阶段进行调用。

• onInit 在初始化阶段调用，并透传了构造函数的参数 options ，用于参数注入
• createDOM 在初始阶段调用，用于创建DOM元素并将其返回，作为dom属性的值，并加入到特定的父节点下
• updateDOM 在地图发生平移、缩放、旋转时调用，用于更新DOM元素定位
• onDestroy 在销毁阶段调用，可在此函数中对自定义的对象和事件监听进行删除

具体的生命周期如下：

基于 DOMOverlay 实现自定义覆盖物

举个:chestnut:：自定义环形饼图

以官网示例中的 Donut 为例，创建自定义环形饼图。官网示例中使用了原生JS语法实现继承，这里我们改用ES6语法实现下：

const SVG_NS = 'http://www.w3.org/2000/svg';// 自定义环状饼图 - 继承DOMOverlayclass Donut extends TMap.DOMOverlay {    constructor(options) {        super(options);    }    // 初始化：获取配置参数    onInit({        position,        data,        minRadius = 0,        maxRadius = 50,    } = {}) {        Object.assign(this, {            position,            data,            minRadius,            maxRadius,        });    }    // 创建DOM元素，返回一个Element，使用this.dom可以获取到这个元素    createDOM() {        let svg = document.createElementNS(SVG_NS, 'svg');        svg.setAttribute('version', '1.1');        svg.setAttribute('baseProfile', 'full');        let r = this.maxRadius;        svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));        svg.setAttribute('width', r * 2);        svg.setAttribute('height', r * 2);        svg.style.cssText = 'position:absolute;top:0px;left:0px;';        let donut = createDonut(this.data, this.minRadius, this.maxRadius);        svg.appendChild(donut);        return svg;    }    // 更新DOM元素，在地图移动/缩放后执行    updateDOM() {        if (!this.map) {            return;        }        // 经纬度坐标转容器像素坐标        let pixel = this.map.projectToContainer(this.position);        // 使饼图中心点对齐经纬度坐标点        let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';        let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';        this.dom.style.transform = `translate(${left}, ${top})`;    }    // 销毁时    onDestroy() {}}

其中 createDonut 是根据数据和半径创建对应的SVG图形，这里先不过多关注。

如何进行元素定位？

这里重点说明下 updateDOM 的实现，如何进行定位更新。 首先，我们在初始化阶段给 position 属性赋值， position 是一个经纬度对象，可以通过 map.projectToContainer 方法转为地图容器内的像素坐标，记为 pixel 。地图容器坐标系是以地图容器左上角为原点，向右为x正方向，向下为y正方向的坐标系。 另外，我们在 createDOM 方法中对生成的svg元素设置了CSS样式 position:absolute;top:0px;left:0px; ，所以元素实际定位是与地图容器左上角对齐。 我们需要让环形饼图的中心与 pixel 位置对齐，首先可以通过 clientWidth/clientHeight 获取元素宽高，然后计算得到元素左上角的像素坐标为( left 、 top )，最后通过 transform: translate(${left}, ${top}) 设置平移偏移量，将元素移动到对应位置。

为什么不使用 top: ${top}; left: ${left} 进行定位呢？ 因为 transform 比 top/left 性能好很多。 top/left 是在CPU上进行计算，会引起周围区域的重绘；而transform是利用GPU计算能力，且是在独立的图层中进行变换，不会引起重绘。具体可以参考 创建前端平移动画为何translate()优于top/right/bottom/left 。

如何实现click监听？

有的同学发现创建了自定义覆盖物之后就不能像 MultiMarker 那样通过 on('click') 监听到点击事件了，这是为什么呢？因为你没有触发事件啊:joy: 首先你需要监听DOM元素的点击事件，可以在 createDOM 中实现：

// 创建DOM元素，返回一个Element，使用this.dom可以获取到这个元素    createDOM() {        ...        // click事件回调        this.onClick = () => {            // DOMOverlay继承自EventEmitter，可以使用emit触发事件            this.emit('click');        };                // 使用addEventListener实现DOM元素的click监听        svg.addEventListener('click', this.onClick);        return svg;    }

在 clic k事件回调中可以直接执行你想要的操作，或者调用 emit 触发事件，就可以触发通过 on 挂载的监听器了，如下：

let donut = new Donut({    map,    position: new TMap.LatLng(40.02906301748584, 116.25499991104516),    data: [18, 41, 50],    minRadius: 20,    maxRadius: 28})donut.on('click', () => {    console.log(`环形图被点击，位置为${donut.position}`);});

需要注意的是，在销毁时应该将事件监听删除，所以 onDestroy 应相应修改为：

// 销毁时需解绑事件监听    onDestroy() {        if (this.onClick) {            this.dom.removeEventListener(this.onClick);        }    }

类似的，你可以监听 mousedown 、 mouseup 以及移动端的 touchstart 、 touchend 等事件，因为是自定义元素，所以控制权在你自己手上哦。

为什么出现偏移？

有的同学在实现自定义覆盖物之后，发现创建多个元素会发生向下偏移，且逐个的偏移量越来越多，这是为什么？ 或许你可以检查下DOM元素是不是没有设置 position:absolute;top:0px;left:0px; ，如果没有设置绝对定位以及坐标为(0, 0)的话，则 transform 是在元素原本的定位上进行偏移，且元素没有脱离文档流，后加入的元素会依次下移。

其他应用

DOMOverlay 可以应用在各种图文结合、不易绘制的元素上。 比如使用点聚合接口时，如果想要使用自定义样式，而且需要显示簇大小，就可以使用自定义DOM元素来表达聚合簇。

再比如编辑器中，绘制和编辑图形时图形需要实时变化，使用矢量图形图层需要不断重构数据，有较大开销，所以也是结合DOM覆盖物，通过SVG渲染单个图形。

另外，有的同学还问到，JSAPI v2中的marker跳动动画在GL里怎么实现呢？其实也可以使用自定义覆盖物来实现，官网也提供了 marker动画示例 。

什么情况下不适合使用 DOMOverlay ？ 需要注意的是，当你需要绘制大量(>1000)的覆盖物时是不适合使用 DOMOverlay 的，因为每个DOM元素都是单独进行定位更新的计算，会带来非常大的开销，在地图变化时会非常卡顿。 海量覆盖物的渲染还是推荐使用 MultiMarker/MultiPolygon 等矢量图形图层，或者 位置数据可视化API ，提供了散点图、弧线图、轨迹图、区域图等可视化类型。