腾讯地图JSAPI-在地图上添加自定义覆盖物

如下内容转载自多多洛爱学习的文章《JSAPI-在地图上添加自定义覆盖物》css

做者：多多洛爱学习html

连接：https://juejin.im/post/5ee5f80d51882542e2695874前端

来源：掘金node

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。web

地图上的覆盖物

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

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

这就要使用到DOMOverlay了。它并非一个具体的DOM覆盖物，而是全部DOM覆盖物的抽象基类，InfoWindow就继承自它。DOMOverlay抽象出了DOM覆盖物的生命周期，公共属性及方法，实现了地图事件的监听绑定及解绑，你只须要关注DOM节点的建立和位置计算方法便可。前端工程师

DOMOverlay 接口设计

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

公共属性及方法

事件监听及触发

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

地图绑定与解绑

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实现自定义覆盖物

举个🌰：自定义环形饼图

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

const SVG_NS = 'http://www.w3.org/2000/svg';

// 自定义环状饼图 - 继承DOMOverlay
class 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')监听到点击事件了，这是为何呢？由于你没有触发事件啊😂 首先你须要监听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;
    }

在click事件回调中能够直接执行你想要的操做，或者调用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，提供了散点图、弧线图、轨迹图、区域图等可视化类型。