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

原创 2018年04月17日 17:02:17

当前,越来越多的用户开始使用三维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数据放在一个新的目录下面。

这里写图片描述

总结:矢量数据,模型数据,倾斜摄影数据以及各种专题图都必须先切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

版权声明:本文为博主原创文章,欢迎转载,SuperMap技术问答社区 http://ask.supermap.com https://blog.csdn.net/supermapsupport/article/details/79977480

WebGL数据制作流程及加载

作者:翔翔 随着科技的不断进步和客户需求不断提高,无插件客户端WebGL已慢慢成为主流。那么WebGL的数据如何制作?如何加载数据?接下来我会为大家一一解开这些迷惑。下面我将介绍WebGL的数据制作和...
  • supermapsupport
  • supermapsupport
  • 2016-12-09 09:51:50
  • 3710

Three.js WebGL 绘制流程(一)

Three.js 中3D 物体 都继承于 Object3D; 而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。 Gemotry 中 vert...
  • liyong748
  • liyong748
  • 2012-08-17 10:24:49
  • 2911

SuperMap iClient3D 8C(2017) for WebGL发布

SuperMap iClient3D 8C(2017) for WebGL已正式发布,下载产品请点击:http://www.supermapol.com/webgl/downloads.html,本次...
  • supermapsupport
  • supermapsupport
  • 2016-10-28 13:25:58
  • 2571

googleearth基站扇区图层制作工具

  • 2014年03月27日 14:01
  • 1.01MB
  • 下载

Google图层制作工具

  • 2013年07月08日 10:08
  • 937KB
  • 下载

KML基站图层制作工具

  • 2017年02月07日 11:03
  • 1015KB
  • 下载

影像发布及瓦片缓存制作流程

  • 2018年03月08日 11:16
  • 2.09MB
  • 下载

WebGL blendMode 详解

结合栗子详细讲解了 webgl 的混合模式的运用。
  • jiexiaopei_2004
  • jiexiaopei_2004
  • 2015-09-24 19:46:51
  • 1554

二、WebGL入门,基本开发流程

WebGL的标准来自于OpenGLES2.0,而OpenGLES2.0来自于纯可编程管线技术,有别与以前OpenGL的固定管线技术,可编程管线技术更加灵活,效率更高,但是对开发人员的要求更高。比如:以...
  • a23366192007
  • a23366192007
  • 2016-01-17 15:43:04
  • 1343

04 WebGL绘图之着色器

WebGL不同于canvas 2D的绘图方式,WebGL需要去调用OpenGL的接口的着色器去绘图。所以,我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种:1.顶点着色器(Verte...
  • qq_30100043
  • qq_30100043
  • 2017-04-26 22:43:39
  • 650
收藏助手
不良信息举报
您举报文章:WebGL几种常用服务图层的制作流程
举报原因:
原因补充:

(最多只允许输入30个字)