美文网首页
腾讯位置服务JSAPI教程-在地图上添加自定义覆盖物

腾讯位置服务JSAPI教程-在地图上添加自定义覆盖物

作者: _草木一秋 | 来源:发表于2020-06-24 12:23 被阅读0次

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

    作者:多多洛爱学习

    链接:https://juejin.im/post/5ee5f80d51882542e2695874

    来源:掘金

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    地图上的覆盖物

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

    image

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

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

    DOMOverlay 接口设计

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

    image

    公共属性及方法

    事件监听及触发

    从上图可见,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在销毁阶段调用,可在此函数中对自定义的对象和事件监听进行删除

    具体的生命周期如下:

    image

    基于DOMOverlay实现自定义覆盖物

    举个🌰:自定义环形饼图

    [图片上传失败...(image-31064d-1592972629878)]

    以官网示例中的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获取元素宽高,然后计算得到元素左上角的像素坐标为(lefttop),最后通过transform: translate(${left}, ${top})设置平移偏移量,将元素移动到对应位置。

    为什么不使用top: ${top}; left: ${left}进行定位呢?
    因为transformtop/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;
        }
    

    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);
            }
        }
    
    

    类似的,你可以监听mousedownmouseup以及移动端的touchstarttouchend等事件,因为是自定义元素,所以控制权在你自己手上哦。

    为什么出现偏移?

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

    其他应用

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

    image

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

    image

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

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

    相关文章

      网友评论

          本文标题:腾讯位置服务JSAPI教程-在地图上添加自定义覆盖物

          本文链接:https://www.haomeiwen.com/subject/dsrrfktx.html