SuperMap iClient3D for WebGL 地图/MVT服务贴倾斜显示

一、前言

矢量数据通常包含了丰富的地理信息，如道路、河流、建筑物边界等，将其贴到三维模型表面，能够为模型增加详细的地理背景，有助于用户理解地理环境，或者在城市规划方面可以帮助更准确的空间分析，一起看下SuperMap iClient3D for WebGL中如何实现的吧。

二、地图服务贴倾斜显示

对于配好的矢量地图发布的rest地图服务，SuperMap iClient3D for WebGL 中贴倾斜显示设置代码如下：

//加载地图服务
var imageryLayer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
    url : 'http://localhost:8090/iserver/services/map-Mian/rest/maps/%E9%9D%A2'
}));
var scene = viewer.scene;
//加载倾斜数据
var promise = scene.open('http://localhost:8090/iserver/services/3D-local3DCache-Config4/rest/realspace');
SuperMap3D.when(promise,function (layers) {
     var layer =scene.layers.find('Combine');
     //地图服务贴倾斜
     layer.coverImageryLayer = imageryLayer;
});

也支持将多个地图叠加到倾斜图层上面，示例如下：

//多个地图图层叠加到倾斜摄影上面
layer.coverImageryLayer = [imageryLayer1,imageryLayer2,imageryLayer3]

三、MVT服务贴倾斜显示

对于发布的MVT服务，SuperMap iClient3D for WebGL 中贴倾斜显示设置代码如下：

//加载MVT服务
var mvtMap = scene.addVectorTilesMap({
    url: 'http://localhost:8090/iserver/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/mvt',
    canvasWidth: 512,
    name: 'testMVT',
    viewer: viewer
});
var scene = viewer.scene;
//加载倾斜数据
var promise = scene.open('http://localhost:8090/iserver/services/3D-local3DCache-Config4/rest/realspace');
SuperMap3D.when(promise,function (layers) {
     var layer =scene.layers.find('Combine');
     //MVT服务贴倾斜
     layer.coveredMap = mvtMap;
});

也支持将多个地图叠加到倾斜图层上面，示例如下：

//多个MVT服务叠加到倾斜摄影上面
layer.coveredMap = [mvtMap1,mvtMap2,mvtMap3]

矢量数据叠加倾斜效果如下: