图层
图层的作用在于分类和管理，是个虚拟的东西，其价值在于对于图形要素或者数据的管理，你可以把它理解成文件夹主要用来管理和分类
在maptalks体系里所有的图层的都是基于图层顶级父类的Layer的,所以其有哪些方法和事件一定要熟知，因为其是所有图层的父类,即所有的图层都会拥有其的方法和事件
maptalks里图层的继承关系
注意：
- Layer
- OverlayLayer
- CanvasLayer
这三个图层的作用在于顶层的抽象和设计,其目的是方便扩展图层和插件开发,不要直接使用他们,使用他们的子类即可, 除非现有的图层不能满足你的需求需要扩展图层是才会用到他们
Layer
- 常用的方法有:
| 方法 | 描述 |
|---|---|
| getMap() | 获取地图 |
| show() | 显示 |
| hide() | 隐藏 |
| isVisible() | 是否可见 |
| config(conf) | 修改配置属性 |
| setOpacity(opacity) | 设置透明度 |
| remove() | 从地图上移除 |
| addTo(map) | 将图层加到地图上 |
| on() | 监听事件 |
| setZIndex(zIndex) | 设置图层的层级关系 |
- 常用的事件有：
| 事件名字 | 描述 |
|---|---|
| setopacity | 透明度改变触发 |
| show | 显示时触发 |
| hide | 隐藏时触发 |
| visiblechange | 图层可见性变化时触发 |
layer.on("show hide setopacity", () => {});WARNING
图层里没有鼠标的事件(click等),maptalks里图层是用来分类的和管理图形和瓦片的，其是个抽象的产物， 没有click这些事件，设计如此
- 常见的配置属性有：
| 属性名 | 描述 |
|---|---|
| minZoom | 图层显示的最小层级 |
| maxZoom | 图层显示的最大层级 |
| geometryEvents | 是否开启图形事件交互 |
layer.config({ minZoom: 10, maxZoom: 20 });Layer的子类们
| 名字 | 描述 | 渲染方式 | 所在的包 | 应用场景 |
|---|---|---|---|---|
| TileLayer | 瓦片图层 | webgl | maptalks | 加载栅格瓦片数据 |
| WMSTileLayer | wms瓦片图层 | webgl | maptalks | 加载栅格瓦片数据 |
| GroupTileLayer | 瓦片组图层 | webgl | maptalks | 将多个栅格瓦片图层合并成一个组统一管理 |
| OverlayLayer | 覆盖物抽象图层 | maptalks | 图形管理基础图层，方面插件的开发 | |
| VectorLayer | 矢量图层 | canvas | maptalks | 核心库自带的矢量图层,用来管理点线面等图形 |
| CanvasLayer | canvas抽象图层 | maptalks | canvas基础图层方便插件开发 | |
| ImageLayer | 图片图层 | webgl | maptalks | 图片图层 |
| VectorTileLayer | 矢量瓦片图层 | webgl | @maptalks/gl-layers | 矢量瓦片图层 |
| GeoJSONVectorTileLayer | geojsonvt瓦片图层 | webgl | @maptalks/gl-layers | geojson前端的矢量瓦片图层 |
| PointLayer | 矢量点图层 | webgl | @maptalks/gl-layers | 点图层 |
| LineStringLayer | 矢量线图层 | webgl | @maptalks/gl-layers | 线图层 |
| PolygonLayer | 矢量面图层 | webgl | @maptalks/gl-layers | 面图层 |
| GLTFLayer | gltf图层 | webgl | @maptalks/gl-layers | gltf模型图层 |
| Geo3DTilesLayer | 3d切片图层 | webgl | @maptalks/gl-layers | 倾斜摄影等3d切片的图层 |
| GroupGLLayer | webgl图层管理图层 | webgl | @maptalks/gl-layers | webgl图层管理的图层 |
| ExtrudePolygonLayer | 3d面拔高图层 | webgl | @maptalks/gl-layers | 3d拔高面的图层 |
| ThreeLayer | threejs扩展图层 | webgl | maptalks.three | threejs扩展图层 |
WARNING
webgl图层放到GroupGLLayer里后是不支持设置zIndex的， 他们的位置关系有webgl深度测试决定的,他们会共享一个webgl上下文了
这些图层里也就只有VectorLayer调整zIndex有意义,
vectorLayer.setZIndex(100);因为只有其是canvas渲染的,当然你也可以不把这些图层放到 GroupGLLayer里,但是这样他们就没法子共享一个webgl上下文了,会导致三维关系被破坏，所以我们一般不这么干,除非你 有特殊的需求
图层分类
根据这些图层的作用和管理能力，我们将他们分成几大类：
- 瓦片管理类
| 名字 |
|---|
| TileLayer |
| WMSTileLayer |
| GroupTileLayer |
| VectorTileLayer |
| GeoJSONVectorTileLayer |
| Geo3DTilesLayer |
- 图形数据管理类
| 名字 |
|---|
| VectorLayer |
| ImageLayer |
| PointLayer |
| LineStringLayer |
| PolygonLayer |
| GLTFLayer |
| ExtrudePolygonLayer |
| ThreeLayer |
- 插件开发的基类
| 名字 |
|---|
| OverlayLayer |
| CanvasLayer |
- 图层集合的管理和融合类
| 名字 |
|---|
| GroupGLLayer |
这些图层中有个两个图层需要强调下:
- GroupGLLayer 这个图层比较特殊,其是个webgl上下文融合器，其主要用来管理webgl图层，让加入进来的图层共享webgl深度信息，GroupGLLayer的配置属性还是挺复杂的，需要你认真的查询其文档，里面包含了大量的webgl配置信息
const groupgl = new GroupGLLayer("layer", [], {});
groupgl.addLayer();
groupgl.removeLayer();WARNING
GroupGLLayer不能加入到GroupGLLayer里，否则就会导致套娃现象的出现，从上面的图层表格我们可以看到VectorLayer也不能被加入到 GroupGLLayer，因为其是canvas渲染，这是个历史遗留的问题，所以在项目里使用时要一定注意和消息
- ThreeLayer图层主要是利用threejs来扩展maptalks的webgl一些能力，一般都是maptalks官方图层里没有提供的一些图形信息，比如这样的图形：
maptalks官方是不自带这些奇奇怪怪的图形要素的，但是业务里我们可能会用到，这时用ThreeLayer来搞就再适合不过了
WARNING
注意threejs的版本兼容性非常差，在项目里使用时可能需要锁定版本，不能随随便便的升级其版本
调节图层的叠加顺序
图层是存在zIndex的概念，如果需要调整图层的叠加顺序，可用的方法有：
- setZIndex(zIndex)
- bringToFront()
- bringToBack()
TIP
zindex 的值和 CSS 里一样，值越大的在顶部
WARNING
- 如果把图层直接添加到地图上可以直接调整他们的zIndex,但是webgl图层一般都放入GroupGLLayer里
- 如果把图层添加到GroupGLLayer里,他们就共享一个webgl上下文，zIndex将失效 ,他们只有深度关系,其所有子图层都有GroupGLLayer的zIndex的值进行整体控制
- webgl没有zIndex的概念的
- 如果你的业务需要不同的图层直接维持三维关系那么你就把他们放到GroupGLLayer里
- GroupGLLayer是可以调整的zIndex的,
- VectorLayer 因为不能加入 GroupGLLayer 所以其始终可以调整zIndex
- 一般情况下地图上有的图层的有： GroupGLLayer,VectorLayer,webgl图层我们一般都是放入GroupGLLayer里