🗺️maptalks study

Appearance

目录

VectorLayer ​

VectorLayer是个矢量图层，继承自OverlayLayer,在核心库里，用来管理图形数据的，里面可以存放各种图形

  • 点
  • 线
  • 面
  • 矩形
  • 圆等

在业务里使用VectorLayer主要是不断的：

  • 添加图形
  • 移除图形
  • 清空图形
  • 设置图层的zindex
  • 显示图层
  • 隐藏图层等

注意：VectorLayer的作用是用来管理图形，方便的图形的批量显示，隐藏，添加等操作，所以其具有的特性是：

  • 看不见摸不着
  • 没有click等这些事件的

VectorLayer是支持海拔的 ​

VectorLayer 有个配置选项enableAltitude,开启下即可

js
const layer = new maptalks.VectorLayer("layer", {
    enableAltitude: true,
}).addTo(map);

const coordinates = [
    [116.33607780651141, 39.89606849343474, 33],
    [116.33887422799637, 39.89620964067049, 50],
];
const line = new maptalks.LineString(coordinates, {
    symbol: {
        lineWidth: 3,
        lineColor: "red",
    },
});

const center = map.getCenter().toArray();
center.push(44);
const point = new maptalks.Marker(center);
line.addTo(layer);
point.addTo(layer);
  • VectorLayer 开启enableAltitude
  • 每个图形的坐标数据里携带自己的高度值即可

WARNING

注意由于设计不周和考虑欠佳，老版本的maptalks里，图形携带海拔数据是放到图形的properties属性里，这个是属于设计失误，推荐的做法如上面的代码，将海拔的数据放到图形的坐标里，当然老的方法也是被兼容的，但是建议海拔数据放到图形的坐标数据里

调节图层的叠加顺序 ​

VectorLayer内部是有canvas渲染，所以其存在zIndex的概念，如果需要调整图层的叠加顺序，可用的方法有：

  • setZIndex(zIndex)
  • bringToFront()
  • bringToBack()

TIP

zindex 的值和 CSS 里一样，值越大的在顶部

WARNING

webgl图层是没有zIndex的概念的，所有整个@maptalks/gl-layers包里的所有图层都不存zIndex的效果，只有webgl里的深度关系

支持碰撞检测 ​

VectorLayer有个配置选项collision开启下即可

js
var layer = new maptalks.VectorLayer("layer", {
    collision: true,
    collisionDelay: 250,
    forceRenderOnMoving: true,
    forceRenderOnZooming: true,
    forceRenderOnRotating: true,
    // debug:true
}).addTo(map);

具体的可以参阅这个例子 layer_collision

VectorLayer连续缩放地图不会一直渲染？ ​

为了性能考量，VectorLayer渲染是做了一些限制，当地图处于快速交互的过程中，就没有一直渲染，如果你希望其一直渲染，可以配置其配置参数使其一直渲染，主要有：

参数描述
forceRenderOnMoving地图移动的过程中强制渲染
forceRenderOnZooming地图缩放的过程中强制渲染
forceRenderOnRotating地图旋转的过程中强制渲染
js
var layer = new maptalks.VectorLayer("layer", {
    forceRenderOnMoving: true,
    forceRenderOnZooming: true,
    forceRenderOnRotating: true,
    // debug:true
}).addTo(map);

VectorLayer渲染polygon数据出现漏洞 ​

maptalks内默认会对图形进行simplify，这个问题是由于图形节点被简化导致的

你可以根据自己的需要设置简化的阈值

js
const polygon = new maptalks.Polygon(coordinates, {
    simplifyTolerance: 2,
});
//update options
// polygon.config({
//     simplifyTolerance: 1,
// });

simplifyTolerance的值越大,简化的越狠,性能也越好，根据自己的需要设置合适值即可，默认值2,

如果你的数据渲染出现这种空洞, 可以将其设置为1试试 当然你可以简单的粗暴的你设置图形不要进行simplify

js
const polygon = new maptalks.Polygon(coordinates, {
    enableSimplify: false,
});

//update options
// polygon.config({
//     enableSimplify: false,
// });

VectorLayer不能被加到GroupGLLayer ​

GroupGLLayer是个webgl融合器图层，而VectorLayer底层是canvas渲染的， 所有其不能被加入GroupGLLayer里，早期的maptalks里矢量数据是用canvas渲染的， 后来开发了webgl插件包maptalks-gl，从而导致遗留下了这个历史问题

不同的图层有不同的用处：

  • VectorLayer拥有占用资源小，更新数据方便，渲染效果更好，适合简单的地图的应用
  • webgl图层适合强三维的系统，渲染性能更好，但是渲染效果相对于VectorLayer要差点，数据更新性能不一定比VectorLayer好

所有要根据自己的业务需求选择合适的图层

性能方面 ​

  • 底层是用canvas渲染的
  • 是maptalks核心库的唯一的矢量图层，诞生的比较早

canvas相对于webgl渲染的数据量不大，但是其也有其自己的优点:

  • 兼容好
  • 渲染效果好(阴影，渐变，文字等)
  • 数据更新速度快

当图层内的数据量多了，感觉卡了，你可以开启图层的渐进渲染模式

js
const layer = new maptalks.VectorLayer("layer", {
    forceRenderOnMoving: true,
    forceRenderOnZooming: true,
    forceRenderOnRotating: true,
    progressiveRender: true,
    progressiveRenderCount: 1000,
    progressiveRenderDebug: false,
}).addTo(map);

WARNING

该特性要求maptalks version>=1.0.0-rc.29

WARNING

因为canvas每帧渲染数据量的限制，所有当地图处于快速交互时(动画，pitching,rotating,moving,zooming时)会只拿当前渲染帧对应的数据来渲染，是无法渲染全量的数据的，否则又卡了。

在下面情况下,图层将重头渲染的:

  • 图层上图形进行动态添加和移除时
  • 图形的样式进行更新
  • 图形的形状改变时
  • 图形zindex改变
  • 图层状态改变
  • 相对于webgl渲染器体验要差点，但是可以做到大数据量数据不卡了，而且测试下来20w的点数据，10w的polygon数据可以做到事件流畅交互,很适合静态数据的渲染展示和可视化
  • 如果你对其的效果和体验不满意，你可以使用webgl图层来渲染,VectorLayer有其存在的价值的，每种图层各有自己的优点,自己根据自己需求进行取舍

This document is generated by mdpress