目录
前言一、地形1.1、SuperMap iServer地形(1)单独加地形(2)通过scene.open加载 1.2、stk全球地形服务 二、二维底图2.1、第三方在线地图服务2.1.1、天地图2.1.2、BingMap2.1.3、谷歌2.1.3、高德2.1.4、Arcgis方式一:通过ArcGisMapServerImageryProvideri接口,但不支持CGCS2000坐标系方式二:通过CGCS2000MapServerImageryProvideri接口,支持CGCS2000、WGS84、全球墨卡托等坐标系方式三:通过WebMapTileServiceImageryProvider接口,构造WMTS地址 2.2、本地图片2.3、OGC标准地图服务2.3.1、WMS2.3.2、WMTS 2.4、SuperMap rest地图2.5、SuperMap 三维地图瓦片2.5.1、单独加载2.5.2、通过scene.open加载 三、S3M图层3.1、单独加载3.2、通过scene.open加载 四、MVT五、场景加载六、实体6.1、Primitive6.2、dataSource6.3、entity 七、地质体
前言
最近小编整理了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 = new Cesium.Viewer('cesiumContainer',{ terrainProvider:new Cesium.CesiumTerrainProvider({ url:'http://localhost:8090/iserver/services/3D-SiChuanDiXingYingXiang/rest/realspace/datas/DatasetDEM', invisibility:true isSct : 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= new Cesium.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 = new Cesium.TiandituImageryProvider({ mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务(经纬度投影),如果不加这行代码默认就是使用IMG_W墨卡托投影全球影像底图 token: "10a5ea344938a74c3b311e9351a20490" }); viewer.imageryLayers.addImageryProvider(labelImagery);
2.1.2、BingMap
接口:BingMapsImageryProvider
示例代码:
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({ key : URL_CONFIG.BING_MAP_KEY,//可至官网(https://www.bingmapsportal.com/)申请key url : URL_CONFIG.BINGMAP }));
2.1.3、谷歌
接口:UrlTemplateImageryProvider
示例代码:
var GG = new Cesium.UrlTemplateImageryProvider({ url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali', tilingScheme:new Cesium.WebMercatorTilingScheme(), subdomains: '1234',});viewer.imageryLayers.addImageryProvider(GG );
2.1.3、高德
接口:UrlTemplateImageryProvider
示例代码:
var GD = new Cesium.UrlTemplateImageryProvider({ url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', tilingScheme:new Cesium.WebMercatorTilingScheme(), subdomains: '1234',});viewer.imageryLayers.addImageryProvider(GD);
2.1.4、Arcgis
方式一:通过ArcGisMapServerImageryProvideri接口,但不支持CGCS2000坐标系
var layer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.ArcGisMapServerImageryProvider({ url: 'http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer' }));
方式二:通过CGCS2000MapServerImageryProvideri接口,支持CGCS2000、WGS84、全球墨卡托等坐标系
var layer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.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(new SuperMap3D.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(new SuperMap3D.SingleTileImageryProvider({ url: './images/worldimage.jpg' }));
2.3、OGC标准地图服务
2.3.1、WMS
接口:WebMapServiceImageryProvider
示例代码:
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);
详细可参考博客:https://blog.csdn.net/supermapsupport/article/details/89472404
2.3.2、WMTS
接口:WebMapTileServiceImageryProvider
示例代码:
//添加天地图全球矢量标注服务(经纬度)viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.com/cia c/wmts?tk=1d109683f4d84198e37a38c442d68311',layer: 'cia ' , style: 'default',format: 'tiles ', tileMatrixSetID: 'c', tileMatrixLabels: matrixIds, tilingScheme: new Cesium.GeographicTilingScheme({ numberOfLevelZeroTilesX: 2, numberOfLevelZeroTilesY: 1})
详细可参考博客:https://blog.csdn.net/supermapsupport/article/details/89471734
2.4、SuperMap rest地图
接口:SuperMapImageryProvider
示例代码:
//利用服务url创建SuperMapImageryProvider实例 var provider_mec = new Cesium.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 = new Cesium.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(new Cesium.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", ]; function showModel() { var models = []; // 也可以不设置纹理,设置颜色 models.push({ id: 1, model: modelUrls[0], color: new Cesium.Color(179 / 255, 179 / 255, 179 / 255, 1) }); models.push({ id: 2, model: modelUrls[1], color: new Cesium.Color(94 / 255, 179 / 255, 59 / 255, 1) }); models.push({ id: 3, model: modelUrls[2], color: new Cesium.Color(52 / 255, 94 / 255, 35 / 255, 1) }); models.push({ id: 4, model: modelUrls[3], color: new Cesium.Color(115 / 255, 115 / 255, 115 / 255, 1) }); models.push({ id: 5, model: modelUrls[4], color: new Cesium.Color(171 / 255, 85 / 255, 66 / 255, 1) }); models.push({ id: 6, model: modelUrls[5], color: new Cesium.Color(68 / 255, 68 / 255, 68 / 255, 1) }); solidModelsProfile.addModels(models); solidModelsProfile.addedEvent.addEventListener((param) => { console.log(param); viewer.camera.flyTo( { destination: new Cesium.Cartesian3.fromDegrees(param.modelPosition[0].position.x, param.modelPosition[0].position.y, 60000) }) }); } showModel();