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包目录下\examples\SampleData\kml\model.kml文件,将../models/Cesium_Ground.gltf节点内的路径修改成目标模型所在的路径,然后修改< gx:Track>…< /gx:Track>节点内的内容,其中 “< altitudeMode>…< /altitudeMode >” 表示高度模式,“< when>…< / when>” 表示模型在某位置对应的时间,“< gx:coord>…< /gx:coord>” 表示节点动画中的某个位置,“< gx:angles>…< /gx:angles>” 表示模型角度的调整参数(可省略)。值得注意的是“< when>”和“< gx:coord>”必须成对出现,每个位置都有一个对应的时间。详细内容可参考KML开发者指南:https://developers.google.com/kml/documentation/kmlreference#gxtrack

阅读更多

扫码向博主提问

去开通我的Chat快问

supermapsupport

非学,无以致疑;非问,无以广识
版权声明:本文为博主原创文章,欢迎转载,SuperMap技术问答社区 http://ask.supermap.com https://blog.csdn.net/supermapsupport/article/details/79977480
文章标签: WebGL 服务 三维
个人分类: 三维 iClient
上一篇windows下spark开发环境搭建
下一篇如何对地图进行标注
想对作者说点什么? 我来说一句

KML图层操作提

2017年12月07日 2.49MB 下载

没有更多推荐了,返回首页

关闭
关闭