作者：kxj
前言
SuperMap iClient for MapboxGL支持通过不同格式的资源加载REST地图服务，包括：iServer zxyTileImage资源模板、iServer image资源模板、iServer tileImage资源模板、iServer tileFeature资源模板。其中：iServer zxyTileImage资源模板、iServer image资源模板、iServer tileImage资源模板为栅格瓦片出图；Server tileFeature资源模板为矢量瓦片出图，接下来一起看看不同格式资源如何进行加载吧！
一、iServer zxyTileImage资源模板
zxyTileImage 资源就表示以 ZXY 规范划分的地图的小块。详细请参考：ZXY标准地图瓦片。需要注意的是ZXY规范的地图瓦片仅支持 Web Mercator 坐标系(即 PCS_WGS_1984_WORLD_MERCATOR ，EPSG Code：3857)下的固定比例尺集合，所以非该坐标系和比例尺瓦片发布的REST地图服务无法使用该资源出图。
1.1 tiles参数填写格式
tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}’],
1.2 示例代码
<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" 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 map = new mapboxgl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tileSize: 256,
tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}'],
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
center: [0, 0],
zoom: 2
});
</script>
</body>
</html>
注意：zxyTileImage资源出图时不需要携带rasterSource: 'iserver’参数
1.3 加载效果
二、iServer image资源模板
image 资源作为 map 资源的一个子资源，用于获取 map 资源的一幅图片。
2.1 tiles参数填写格式
tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}’],
2.2 示例代码
<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 map = new mapboxgl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tileSize: 256,
tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
//rasterSource: 'iserver'
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
注意：1. image资源出图时不需要携带rasterSource: 'iserver’参数。
2.官网示例服务加载存在转义问题，如需使用示例服务请使用本地示例服务。
2.3加载效果
三、iServer tileimage资源模板
通过对 tileImage 资源执行 GET 请求，可以获取地图（{mapName}）中相应的格网图片，可以在 URI 中包含一些定制输出图片的参数，如设置出图的图层、图片大小、格网行列号、地图是否透明、动态投影的目标投影等。这些参数必须包含在 URI 中，不能放在请求体里。格网的划分规则如下：将地图全幅显示时的图片从左上角开始，往下和往右进行切割，切割的大小默认为 256*256 像素，左上角的格网行号为 0，列号为 0，往下和往右依次递增。其中，格网的大小和地图的比例尺等参数都可以在请求时进行指定。
3.1 tiles参数填写格式
tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={“x”:-180,“y”:90}’],
3.2 示例代码
<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 map = new mapboxgl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tileSize: 256,
tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
//rasterSource: 'iserver'
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
注意：1. tileImage资源出图时不需要携带rasterSource: 'iserver’参数。
2.官网示例服务加载存在转义问题，如需使用示例服务请使用本地示例服务。
3.3加载效果
四、iServer tileFeature资源模板
通过对 tileFeature 资源执行请求，可以获取地图中矢量图层{layerName}中的瓦片要素。客户端获取的瓦片要素，可以通过自定义的样式进行渲染，并可查询交互。
4.1style参数填写格式
style: ‘http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true’,
(注：tileFeature为矢量瓦片无法加载栅格数据图层，World地图包含栅格图层使用tileFeature出图会丢失栅格数据图层，因此该示例使用China服务）
4.2 示例代码
<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" 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 map = new mapboxgl.Map({
container: 'map', // container id
style: 'http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
center: [120.143, 30.236],
zoom: 3
});
</script>
</body>
</html>
4.3加载效果
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
