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

最新推荐文章于 2023-06-27 14:39:38 发布

清云青云

最新推荐文章于 2023-06-27 14:39:38 发布

阅读量2.5k

点赞数

分类专栏： supermap 叠加文章标签： javascript jquery

本文链接：https://blog.csdn.net/ZHANGLIZENG/article/details/104656932

版权

supermap 叠加专栏收录该内容

1 篇文章 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>

清云青云

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
supermap mapboxgl多个图层叠加 xyz图片结尾的方式不支持地图叠加

注意点：1.使用zyz结尾的方式不支持地图叠加var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',2.最底图加载时需要加参数crs: 'EPSG:4326', 进行标识3.叠加图层加载地图的时候都需要配置参数 r...
复制链接

扫一扫