SuperMap iClient3D for WebGL 多源数据加载篇—常用汇总

目录

前言

最近小编整理了SuperMap iClient3D for WebGL常见的多源数据加载方式和示例代码，供大家参考。本文章适用于稍微有基础的同学。
如有遗漏，欢迎大家补充。

一、地形

1.1、SuperMap iServer地形

地形服务生产：
数据生成TIN或者DEM缓存后。可加载到场景中，保存工作空间，然后发布iServer。也可直接发布sct配置文件，数据来源选择三维切片缓存，服务类型选择REST-三维服务。
详细可参考博客：https://www.jianshu.com/p/8df809ee93cb
地形服务使用：
详细可参考博客：https://blog.csdn.net/supermapsupport/article/details/89448119

（1）单独加地形

注意：地形服务源自SuperMap iServer发布时需设置isSct为true
使用接口：

CesiumTerrainProvider

示例代码：

var viewer =newCesium.Viewer('cesiumContainer',{terrainProvider:newCesium.CesiumTerrainProvider({url:'http://localhost:8090/iserver/services/3D-SiChuanDiXingYingXiang/rest/realspace/datas/DatasetDEM',invisibility:trueisSct:true//地形服务源自SuperMap iServer发布时需设置isSct为true})});

（2）通过scene.open加载

通过scene.open打开可直接查看到地形效果，该效果只限于将地形保存于工作空间发布iServer的情况。

1.2、stk全球地形服务

由于国外的stk服务地址（//assets.agi.com/stk-terrain/world）有时候访问慢或直接访问不到，所以我们使用SuperMap iServer进行了一次转发，效果和stk一样。
使用接口：

CesiumTerrainProvider

示例代码：

var terrainProvider=newCesium.CesiumTerrainProvider({url:"https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",requestWaterMask:true,//开启法向量requestVertexNormals:true,//开启水面特效isSct:false})
    viewer.terrainProvider=terrainProvider;

二、二维底图

2.1、第三方在线地图服务

2.1.1、天地图

接口：

TiandituImageryProvider 

示例代码：

//初始化天地图全球中文注记服务，并添加至影像图层var labelImagery =newCesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle.CIA_C,//天地图全球中文注记服务（经纬度投影），如果不加这行代码默认就是使用IMG_W墨卡托投影全球影像底图token:"10a5ea344938a74c3b311e9351a20490"});
 viewer.imageryLayers.addImageryProvider(labelImagery);

2.1.2、BingMap

接口：

BingMapsImageryProvider

示例代码：

    viewer.imageryLayers.addImageryProvider(newCesium.BingMapsImageryProvider({key:URL_CONFIG.BING_MAP_KEY,//可至官网（https://www.bingmapsportal.com/）申请keyurl:URL_CONFIG.BINGMAP}));

2.1.3、谷歌

接口：

UrlTemplateImageryProvider

示例代码：

varGG=newCesium.UrlTemplateImageryProvider({url:'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',tilingScheme:newCesium.WebMercatorTilingScheme(),subdomains:'1234',});
viewer.imageryLayers.addImageryProvider(GG);

2.1.3、高德

接口：

UrlTemplateImageryProvider

示例代码：

varGD=newCesium.UrlTemplateImageryProvider({url:'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',tilingScheme:newCesium.WebMercatorTilingScheme(),subdomains:'1234',});
viewer.imageryLayers.addImageryProvider(GD);

2.1.4、Arcgis

方式一：通过ArcGisMapServerImageryProvideri接口，但不支持CGCS2000坐标系

var layer = viewer.imageryLayers.addImageryProvider(newSuperMap3D.ArcGisMapServerImageryProvider({url:'http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'}));

方式二：通过CGCS2000MapServerImageryProvideri接口，支持CGCS2000、WGS84、全球墨卡托等坐标系

var layer = viewer.imageryLayers.addImageryProvider(newSuperMap3D.CGCS2000MapServerImageryProvider({url:'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',// suggest: true,//4490坐标系，按照suggest切片方案切的瓦片,需要设置该参数// tilingScheme: new SuperMap3D.ArcGisGeographicTilingScheme({})}));

        viewer.flyTo(layer);

方式三：通过WebMapTileServiceImageryProvider接口，构造WMTS地址

var wmtsLayer = viewer.imageryLayers.addImageryProvider(newSuperMap3D.WebMapTileServiceImageryProvider({url:'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/WMTS',layer:'ChinaOnlineStreetPurplishBlue',format:"image/jpgpng",style:'default',tileMatrixSetID:"default028mm",}));
            viewer.flyTo(wmtsLayer);

2.2、本地图片

接口：

SingleTileImageryProvider

示例代码：

//使用本地的一张图片初始化地球，建议图片长宽比2:1
 viewer.imageryLayers.addImageryProvider(newSuperMap3D.SingleTileImageryProvider({url:'./images/worldimage.jpg'}));

2.3、OGC标准地图服务

2.3.1、WMS

接口：

WebMapServiceImageryProvider

示例代码：

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

详细可参考博客：https://blog.csdn.net/supermapsupport/article/details/89472404

2.3.2、WMTS

接口：

WebMapTileServiceImageryProvider

示例代码：

//添加天地图全球矢量标注服务(经纬度)
viewer.imageryLayers.addImageryProvider(newCesium.WebMapTileServiceImageryProvider({url:'http://t0.tianditu.com/cia c/wmts?tk=1d109683f4d84198e37a38c442d68311',layer:'cia ',style:'default',format:'tiles ',tileMatrixSetID:'c',tileMatrixLabels: matrixIds,tilingScheme:newCesium.GeographicTilingScheme({numberOfLevelZeroTilesX:2，
    numberOfLevelZeroTilesY:1})

详细可参考博客：https://blog.csdn.net/supermapsupport/article/details/89471734

2.4、SuperMap rest地图

接口：

SuperMapImageryProvider

示例代码：

//利用服务url创建SuperMapImageryProvider实例var provider_mec =newCesium.SuperMapImageryProvider({url:'http://localhost:8090/iserver/services/map-agscache-test318/rest/maps/test318'//墨卡托投影地图服务});//初始化时添加经纬度投影地图图层
          viewer.imageryLayers.addImageryProvider(provider_mec);

2.5、SuperMap 三维地图瓦片

2.5.1、单独加载

对影像数据集或者地图右键生成三维缓存，然后在iServer发布，数据来源选择三维切片缓存，服务类型选择REST-三维服务。
接口：

SuperMapImageryProvider

示例代码：

//利用服务url创建SuperMapImageryProvider实例var provider_mec =newCesium.SuperMapImageryProvider({url:'http://localhost:8090/iserver/services/3D-SanWeiGaoJiRenZhengShuJu/rest/realspace/datas/%E4%B8%AD%E5%B1%B1%E5%B8%82%E5%BD%B1%E5%83%8F'//墨卡托投影地图服务});
           viewer.imageryLayers.addImageryProvider(provider_mec);

2.5.2、通过scene.open加载

对影像数据集或者地图右键生成三维缓存，保存工作空间。然后在iServer发布工作空间，服务类型选择REST-三维服务。后期通过scene.open打开场景即可查看到场景中的三维影像缓存。

三、S3M图层

包括建模白模数据、城市精模数据、倾斜摄影三维模型、点云、BIM、三维点/线/面、三维场数据、三维网络数据等多源异构空间数据。

3.1、单独加载

接口：

scene.addS3MTilesLayerByScp

示例代码：

scene.addS3MTilesLayerByScp("http://localhost:8090/iserver/services/3D-KongJianZuoBiaoGuanWang/rest/realspace/datas/SQCSPSQZ/config");

3.2、通过scene.open加载

将数据在SuperMap iDesktopX存入场景中，保存工作空间。然后在iServer发布工作空间，服务类型选择REST-三维服务。后期通过scene.open打开场景即可

四、MVT

数据生产：在SuperMap iDesktopX中将矢量地图生成遵循 MapBox MVT规范的矢量瓦片。
服务发布：服务来源选择：UGCV5（MVT瓦片）；服务类型选择：REST-矢量瓦片服务
接口：

viewer.scene.addVectorTilesMap

示例代码：

var url ='http://localhost:8090/iserver/services/map-mvt-Xian_GuangDong/restjsr/v1/vectortile/maps/%E5%8E%BF_%E5%B9%BF%E4%B8%9C';
                mvtMap = viewer.scene.addVectorTilesMap({url: url,canvasWidth:512,name:'testMVT',viewer: viewer
                });

五、场景加载

使用接口：

scene.open

保存在场景中的地图，s3m图层，地形，影像都会被保存在场景中（除天地图等第三方在线底图和web数据源图层不能通过该方式添加）

六、实体

6.1、Primitive

Primitive偏底层，图形绘制和数据加载效率较高，但开发难度更大。
示例代码：

//加载3Dtiles数据
        viewer.scene.primitives.add(newCesium.Cesium3DTileset({url:'./data/little/tileset.json',}));

6.2、dataSource

数据源是Cesium中用于加载和管理地理数据的组件。它可以处理多种格式的数据，包括GeoJSON、TopoJSON、KML和CZML。不同的文件类型只是为了不同方式的输入数据结构而已，本质上内部还是转换为Entity对象保存。
示例代码：

//加载kml文件
                       viewer.dataSources.add(Cesium.KmlDataSource.load('./SampleData/kml/model.kml',{camera: scene.camera,canvas: scene.canvas
                       }))

6.3、entity

在Cesium中，实体(Entity)是用来描述具有几何形状和属性的对象的基类。实体可以是点、线、面、模型等，它们可以包含额外的信息，如名称、描述和标签。实体在Cesium中非常有用，因为它们可以被轻松地添加、更新和删除，从而为场景添加丰富的交互性。
示例代码：

                        viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(parseFloat(selectedFeatures[i].fieldValues["12"]),parseFloat(selectedFeatures[i].fieldValues["13"]),parseFloat(selectedFeatures[i].fieldValues["16"])),billboard:{image:'./images/location4.png',width:30,height:40,},name: selectedFeatures[i].fieldValues["11"],description: des
                          });

七、地质体

数据生产：参考博客：https://blog.csdn.net/supermapsupport/article/details/122036528
服务发布：用原始的地质体模型在iServer发布数据服务。
示例代码：

var modelUrls =["http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer1/features/1.stream","http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer2/features/1.stream","http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer3/features/1.stream","http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer4/features/1.stream","http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer5/features/1.stream","http://www.supermapol.com/realspace/services/data-dizhiti/rest/data/datasources/%E5%9C%B0%E8%B4%A8%E4%BD%93/datasets/Layer6/features/1.stream",];functionshowModel(){var models =[];// 也可以不设置纹理，设置颜色
            models.push({id:1,model: modelUrls[0],color:newCesium.Color(179/255,179/255,179/255,1)});
            models.push({id:2,model: modelUrls[1],color:newCesium.Color(94/255,179/255,59/255,1)});
            models.push({id:3,model: modelUrls[2],color:newCesium.Color(52/255,94/255,35/255,1)});
            models.push({id:4,model: modelUrls[3],color:newCesium.Color(115/255,115/255,115/255,1)});
            models.push({id:5,model: modelUrls[4],color:newCesium.Color(171/255,85/255,66/255,1)});
            models.push({id:6,model: modelUrls[5],color:newCesium.Color(68/255,68/255,68/255,1)});

            solidModelsProfile.addModels(models);

            solidModelsProfile.addedEvent.addEventListener((param)=>{
                console.log(param);
                viewer.camera.flyTo({destination:newCesium.Cartesian3.fromDegrees(param.modelPosition[0].position.x, param.modelPosition[0].position.y,60000)})});}showModel();