注意点:
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>