supermap mapboxgl多个图层叠加 xyz图片结尾的方式不支持地图叠加

青旅半醒 2023-10-07 10:32 65阅读 0赞

注意点：

1.使用 xyz结尾的方式不支持地图叠加var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z=\{z\}&x=\{x\}&y=\{y\}',

2.最底图加载时需要加参数crs: 'EPSG:4326', 进行标识

3.叠加图层加载地图的时候都需要配置参数 rasterSource: 'iserver'

4.第二个图层需要设置为透明： 'transparent':true,

5.第二个图层需要转成图片：'format':'png',案例：世界地图上叠加京津冀图层，复制放到官网直接运行测试

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
                body {
                    margin: 0;
                    padding: 0;
                }
    
                #map {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                }
            </style>
    </head>
    <body>
    <div id="map"></div>
    <script type="text/javascript">
                var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
                var map = new mapboxgl.Map({
                    container: 'map', 
                    style: {
                        version: 8,
                        sources: {
                            'raster-tiles': {
                                type: 'raster',
                                tileSize: 256,
                                tiles: [host + '/iserver/services/map-world/rest/maps/World'],
                                rasterSource: 'iserver'
                            }
                        },
    
                        layers: [
                            {
                                id: 'simple-tiles',
                                type: 'raster',
                                source: 'raster-tiles',
                                minzoom: 0,
                                maxzoom: 22
                            }
                        ]
                    },
                    crs: 'EPSG:4326', 
                    center: [116.3, 39.9],
                    zoom: 4
                });
                map.on('load', function() {
                    map.addSource("theme", {
                        "type": 'raster',
                        "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区地图'],
                        'transparent':true,
                        "tileSize": 256,
                        'format':'png',
                        'rasterSource': 'iserver'
                    });
                    map.addLayer({
                        "id": "themeLayer",
                        "type": "raster",
                        "source": "theme",
                    });
                });
            </script>
    </body>
    </html>