WebGL几种常用服务图层的制作流程

当前，越来越多的用户开始使用三维GIS平台SuperMap iClent3D for WebGL，对于新用户来说最常见的两个问题就是：1.为什么打开场景看不到数据？2.为何范例能实现的效果，我的数据就不行了？而造成这两个问题绝大多数的原因是数据处理不当，本文将讲解制作WebGL常用服务图层的流程及注意事项。

 

 

###一.Spatial 3D Model类型服务图层：S3MTilesLayer

 

Spatial 3D Model（以下简称s3m）类型服务图层通常来源于矢量数据，模型数据，倾斜摄影数据以及各种专题图切s3m格式的缓存，然后将缓存发布成三维服务。（1）矢量数据和专题图切缓存必须先保存场景，然后选中保存的场景，点击鼠标右键，生成场景缓存，缓存格式为s3m。（2）模型数据可以先保存场景，然后选中保存的场景点击鼠标右键，生成场景缓存，也可以直接选中模型数据集，点击鼠标右键，生成场景缓存，缓存格式为s3m。（3）倾斜摄影数据（OSGB）同样需要转换成s3m格式，转换工具位于：“倾斜摄影”选项卡--“WebGL客户端”--“生成s3m数据”。

 

总结：矢量数据，模型数据，倾斜摄影数据以及各种专题图都必须先切s3m格式的缓存，然后再发布服务，注意切缓存的时候图层名不能带有特殊字符'#'，否则WebGL解析服务地址时会出错。另外值得一提的是，当矢量数据必须以贴地模式才能展示良好效果时，就不要把矢量数据切s3m缓存，因为目前WebGL中S3MTilesLayer 暂不支持贴地模式，建议将矢量数据做成二维地图，然后在WebGL中直接调用发布的二维地图服务。
###二.影像地图服务图层：ImageryLayer
影像地图服务图层通常来源于本地图片，iserver发布的Rest地图服务，iserver发布的Rest三维影像服务以及第三方厂商地图服务，OGC标准地图服务（WMS和WMTS）。

 

（1）WebGL加载本地图片建议将图片长宽比处理成2:1,示范代码：

 

function onload(Cesium) {
  var viewer = new Cesium.Viewer('cesiumContainer',{
      //使用本地的一张图片初始化地球，建议图片长宽比2:1
      imageryProvider:new Cesium.SingleTileImageryProvider({
          url : './images/worldimage.jpg'
      })
  });
}

 

（2）WebGL加载iserver发布的Rest地图服务和iserver发布的Rest三维影像服务方式是一样的。对于地图服务只需制作好地图，发布成Rest地图服务即可。对于Rest三维影像服务，在对影像数据集切缓存的时候，必须通过选中数据集点击鼠标右键的方式来生成三维影像缓存，不能将影像数据集添加到场景对整个场景切缓存,否则WebGL加载不出来三维影像服务图层，示范代码：

 

function onload(Cesium) {
  var viewer = new Cesium.Viewer('cesiumContainer');
  var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
              url : url
          }));
}

 

(3)WebGL支持加载Arcgis，天地图，谷歌，必应等多个第三方在线地图服务，以加载必应在线地图为例：

 

function onload(Cesium) {
  //使用BingMap影像服务初始化viewer部件
  var viewer = new Cesium.Viewer('cesiumContainer',{
      imageryProvider :  new Cesium.BingMapsImageryProvider({
          key : "AjQhMyw76oicHqFz7cUc3qTEy3M2fC2YIbcHjqgyMPuQprNVBr3SsvVdOfmlVc0v",//可至官网（https://www.bingmapsportal.com/）申请key
          url : '//dev.virtualearth.net'
      })
  });
}

 

（4）WebGL加载WMS和WMTS服务，以加载WMS服务为例：

 

function onload(Cesium) {
  var viewer = new Cesium.Viewer('cesiumContainer');
  var provider = new Cesium.WebMapServiceImageryProvider({
         url : 'https://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer',
         layers : '0',
         proxy: new Cesium.DefaultProxy('/proxy/')
});
viewer.imageryLayers.addImageryProvider(provider);
}

 

###三.地形服务图层：TerrainProvider
WebGL只能加载一个地形图层，如果有多个地形图层想添加怎么办？需要先在iDesktop中合并Tin缓存，然后再把合并后的Tin缓存发布成服务，合并的功能位于：“数据”选项卡--“Tin地形”--“合并Tin缓存”。值得一提的是，如果要使用坡度坡向分析，就需要生成“带法线图”的Tin缓存才行。

 

 

WebGL加载地形服务图层范例代码如下：

 

function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer',{
//创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
  terrainProvider : new Cesium.CesiumTerrainProvider({
      url : 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace/datas/srtm_54_07@zhufeng',
      isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
  })
});
}

 

###四.KML图层：KmlDataSource
KML图层通常是将对象绘制好了之后，再添加到WebGL上使用，但是点，线，面，地标怎么添加上去？模型怎么添加上去？什么格式的模型才能添加上去？模型节点动画怎么制作？用iDesktop可以制作吗？下面将一一回答这些问题。

 

首先尽管iDesktop创建的KML也是符合opengis标准，但是由于其支持的对象类型更加多样，对象风格更为复杂，所以暂时不能直接用到WebGL上面。

 

（1）推荐在Google Earth上面为KML图层添加点，线，面，地标对象。

 

（2）WebGL主要支持的模型格式为gltf和s3m。gltf格式模型的制作方式可参考文章：http://support.supermap.com.cn:8090/webgl/examples/TopicDoc/LoadGltfModel_OperateTopic.html。
s3m格式的模型可以先将模型处理成超图的模型数据集，然后将模型数据集在场景中打开，选中模型后点击鼠标右键，导出模型，导出格式为s3m。

 

（3）添加模型到KML文件上以及制作节点动画的方法是直接修改KML文件。首先打开WebGL包目录下examplesSampleDatakmlmodel.kml文件，将../models/Cesium_Ground.gltf节点内的路径修改成目标模型所在的路径，然后修改