在地图上添加覆盖物有两种方式,一是在canvas画布上渲染,好比JSAPI GL绘制MultiMarker/MultiPolygon
等矢量图形覆盖物就是经过编写对应图形的数据解析及渲染程序,直接绘制在底图上层。这样的渲染方式下视角变换时图形也能够实现3D形变。另外一种方式是经过CSS布局将其余DOM元素叠加到地图容器之上,这种方式下视角变换时DOM元素需从新计算布局,好比JSAPI v2的Marker/Polygon
等覆盖物,以及JSAPI GL的InfoWindow
信息窗,这些都属于DOM覆盖物。css
若是你须要叠加一个自定义的复杂元素,第一种方式的话须要实现对应的数据解析和着色器程序,须要了解WebGL的渲染原理,成本很高,且不易变通。而DOM是每一个前端工程师都很是熟悉的,简单几个标签加CSS就能实现高度定制的DOM元素。可是如何将一个DOM元素正确地安置在地图上,而且随着地图平移、旋转、缩放实时调整本身的位置呢?html
这就要使用到DOMOverlay
了。它并非一个具体的DOM覆盖物,而是全部DOM覆盖物的抽象基类,InfoWindow
就继承自它。DOMOverlay
抽象出了DOM覆盖物的生命周期,公共属性及方法,实现了地图事件的监听绑定及解绑,你只须要关注DOM节点的建立和位置计算方法便可。前端
先来看看DOMOverlay
的类关系图,这里结合了官网示例DOMOverlay中定义的Donut
类做为DOMOverlay
的实现:node
从上图可见,DOMOverlay
继承自Node.js的EventEmitter
类,因此它已经实现了事件监听、触发等功能的封装,不太熟悉的同窗能够看看Node.js EventEmitter | 菜鸟教程。web
DOMOverlay
有一个公共属性map
,其值为该覆盖物绑定的地图实例,同时提供了setMap(map: Map)
和getMap()
方法做为map
参数的访问器。 要将自定义覆盖物显示在地图上,首先得明确具体的地图实例,有两种办法,一是在初始化参数中定义map
属性,二是经过setMap
进行动态设置,能够绑定到另外一个地图实例上,或者解绑。 setMap
作了什么呢?绑定时一方面主要是将createDOM()
返回的DOM元素加入到特定的节点下,使其覆盖在地图上方且能够进行相对定位;另外一方面是监听地图变换执行updateDOM()
,使DOM元素能够跟随地图更新定位或内容。解绑时则是将其从父节点下去除,同时删除对地图事件的监听。canvas
DOMOverlay
的公共属性dom
指向的是该覆盖物的具体元素,能够是HTMLElement
或者SVGElement
,该元素的建立由子类进行实现,绑定地图后会挂载到覆盖在canvas
画布上层的一个div
容器中。segmentfault
当覆盖物再也不被使用时应适时进行销毁操做,以防内存泄漏。destroy
方法封装了销毁时应执行的操做,一方面将地图解绑,另外一方面删除对象上注册的全部监听器。bash
DOMOverlay
提供了4个抽象方法,在生命周期的不一样阶段进行调用。前端工程师
onInit
在初始化阶段调用,并透传了构造函数的参数options
,用于参数注入createDOM
在初始阶段调用,用于建立DOM元素并将其返回,做为dom
属性的值,并加入到特定的父节点下updateDOM
在地图发平生移、缩放、旋转时调用,用于更新DOM元素定位onDestroy
在销毁阶段调用,可在此函数中对自定义的对象和事件监听进行删除具体的生命周期以下: app
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。
有的同窗发现建立了自定义覆盖物以后就不能像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);
}
}
复制代码
相似的,你能够监听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,提供了散点图、弧线图、轨迹图、区域图等可视化类型。