【mapboxgl叠加单个图层】

mapboxgl叠加单个图层

引言

上文说到，mapboxgl添加rest地图服务嵌套图层组中的单个图层后，如何叠加单个图层，就往下看吧。

横向对比

mapboxgl与leaflet、openlayers不同，leaflet与openlayers中使用map.addlayer方法可以直接添加图层，而mapboxgl需要添加source，再添加source中的图层到map中

设计理念

源（Source）和层（Layer）的分离：

源（Source）：指的是数据的来源。Mapbox GL JS 支持多种来源，如矢量切片、栅格图像、GeoJSON 等。源是一种数据结构，定义了何种数据与如何访问这些数据。
层（Layer）：图层定义了如何呈现这些数据，比如用什么颜色、透明度、样式等。可以在同一数据源上添加多个层，以不同的样式展示相同的数据。
灵活性和性能：

分开源和层的设计，允许开发者根据需要复用相同的数据源，并针对不同的目的或者样式来创建多个图层。这种方式使渲染更加高效，尤其是在处理复杂的地图时。
使用单独的源和层可以更好地支持动态样式更新和复杂渲染需求。
比其他库更复杂的场景：

Mapbox GL JS 的设计具有更强的能力来处理复杂的场景，如三维建筑、动态数据变化等。通过分离数据源和样式，开发者可以利用这种能力创建更丰富的用户体验。

总结一句就是：虽然在 Leaflet 和 OpenLayers 中使用图层相对简单，但这种实现方式的设计目的是为了提高灵活性和性能。Mapbox GL JS 通过分离源和图层，使得在处理丰富的交互、复杂样式和性能要求时能够更加高效和灵活。

代码

var t2 = '[0:0.0.0]'//子图层的id，不加载子图层只加载完整地图服务可以忽略此项
    function addMyLayer(){
        this.map.addSource("t1",{//t1为图层资源标题，自由指定，不可与其他地图资源重复
            type: 'raster',//图层类型
            tiles: ['http://172.16.12.70:8090/iserver/services/map-WorldUdbx/rest/maps/worldGroup/zxyTileImage.png?prjCoordSys='
            +encodeURIComponent('{"epsgCode":4326}')+'&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID='+ t2,
            ]
        });
        this.map.addLayer(//添加图层
            {
                'id': 'simple-tiles1',//指定图层在地图中的标题，可自行编辑，之后通过id获取地图
                'type': 'raster',//图层类型与source保持一致
                'source': 't1',//指定资源 上方资源名称一致
                'minzoom': 0,
                'maxzoom': 22
            },
        )
    }

总结

本文介绍了叠加单图层到地图上的方法，区别于leaflet与openlayers的叠加方法，应该添加source再从source中添加layer。