如何在mapbox-gl加载超图iserver发布的切片数据。
超图isever发布数据的形式,跟arcgis server发布的有些不同,在加载时,也有一定的区别,超图在线可测试地图数据网址如下:
http://support.supermap.com:8090/iserver/services/map-world/rest/maps/World
支持操作如下截图:
mapbox-gl加载iserver发布的切片数据,可以采取以下几种方式:
tileFeature 矢量切片形式
tileImage 经纬度切片形式
zxyTileImage 墨卡托切片形式
1、tileFeature 加载
http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/mapboxgl/editor.html#mvtVectorTile
数据源:
"sources": {
"vector-tiles": {
"attribution": attribution,
"type": "vector",
"tiles": [host + "/iserver/services/map-china400/rest/maps/China/tileFeature.mvt?_cache=false&returnAttributes=true&width=512&height=512&viewBounds={bbox-epsg-3857}"]
},
},
//加载其中的图层:
map.addLayer({
"id": "China_Boundary",
"type": "line",
"source": "vector-tiles",
"source-layer": "China_Boundary_A_ln@China",
"paint": {
"line-color": "hsl(230, 8%, 51%)",
"line-width": {
"base": 1,
"stops": [
[
3,
0.5
],
[
10,
2
]
]
}
}
});
2、tileImage 加载
http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/mapboxgl/editor.html#01_tiledMapLayer_4326
数据源:
tiles: [host + ‘/iserver/services/map-world/rest/maps/World’],
rasterSource: 'iserver'
图层:
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
注意:iserver的切片是以比例尺+X索引+Y索引进行请求的,所以,加载此类图层,需要使用超图基于mapbox-gl的扩展。
tileImage的请求形式:
3、zxyTileImage 加载
http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/mapboxgl/editor.html#01_tiledMapLayer
数据源:
sources": {
"raster-tiles": {
"attribution": attribution,
"type": "raster",
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
"tileSize": 256
}
},
//图层:
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]