天天看点

mapbox-gl加载超图iserver发布切片

 如何在mapbox-gl加载超图iserver发布的切片数据。​

超图isever发布数据的形式,跟arcgis server发布的有些不同,在加载时,也有一定的区别,超图在线可测试地图数据网址如下:

​​http://support.supermap.com:8090/iserver/services/map-world/rest/maps/World​​

支持操作如下截图:

mapbox-gl加载超图iserver发布切片

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的请求形式:

mapbox-gl加载超图iserver发布切片

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
            }]