本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件,除此之外还介绍了Cesium工具栏的屏蔽方法、天地图的加载、地球初始状态设置等几个部分的内容,其中又不乏参照、优化诸如: 想成为大神的前端王菜鸟、 loves小鱼儿、 Alice爱俪丝等大神作品的内容,在此表示感谢,他们的文章地址分别如下:
https://blog.csdn.net/wwqqqq123/article/details/90400366
https://blog.csdn.net/xiaoyuer666999/article/details/75370428
https://blog.csdn.net/qq_18144905/article/details/81979807
文章内容都是我在学习和项目中实际遇到的需求,希望对大家也有所助益。
1.关于数据的获取和处理
建筑物模型数据很多地方都号称有,不过获取可能要花点周折。本着开放学习交流的初心,文章会附带我做试验的原始及成果数据,希望对大家有用。
(1)shp数据转换为Geojson数据
虽然有很多工具,但Geojson数据和json数据还是有差别的,大家首先会想到ArcGIS,但我并没有用它达到理想的效果,最终采用的是QGIS实现shp数据转Geojson数据的,操作很简单,仅为加载,图层右键输出Geojson格式数据这样简单的操作。
(2)3dtile数据的生成
网上会宣称shp转换为3dtiles数据的处理工具,但同样要想使用这些工具,也要花费周折,我因刚接触Cesium不久,但终会在不久后会做出这样的工具,并将代码开放出了,敬请博文公告。这里就会在数据包中连同数据处理工具。
2.加载Geojson建筑物模型数据并渲染
var viewer = new Cesium.Viewer('cesiumContainer');
//添加geojson格式地理数据(由shp格式文件转换得来)
Cesium.Math.setRandomNumberSeed(0);
var promise =Cesium.GeoJsonDataSource.load('ShangHai3Dtiles.geojson');
promise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
var entities =dataSource.entities.values;
for (var i = 0; i < entities.length;i++) {
var entity = entities[i];
var builingHeight = entity.properties.Floor;
if(builingHeight>=3&&builingHeight<10){
entity.polygon.material = Cesium.Color.GOLDENROD;
}else if(builingHeight>=10&&builingHeight<20){
entity.polygon.material = Cesium.Color.GRAY;
}else if(builingHeight>=20&&builingHeight<30){
entity.polygon.material = Cesium.Color.GHOSTWHITE;
}else if(builingHeight>=30&&builingHeight<50){
entity.polygon.material = Cesium.Color.CADETBLUE;
}else if(builingHeight>=50){
entity.polygon.material = Cesium.Color.GOLD ;
}else{
entity.polygon.material = Cesium.Color.FIREBRICK;
}
entity.polygon.outline = false;
entity.polygon.extrudedHeight =(entity.properties.Floor)*10;
}
});
viewer.flyTo(promise);
注意:大家在添加自己的数据时请注意文件的名称及路径。
3.加载3dtiles格式数据
var viewer = new Cesium.Viewer('cesiumContainer');
//加载3Dtiles
var tileset = new Cesium.Cesium3DTileset({ url: 'tileset.json' });
viewer.scene.primitives.add(tileset);
viewer.flyTo(tileset);
注意:3dtile数据不同于Geojson数据,这个数据的渲染后面会有专门的博文介绍,但大家不要受有些博文的误导,硬是拿Entity实体结构的渲染方法去渲染3dtile模型文件。
4.Cesium工具栏的屏蔽方法
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationInstructionsInitiallyVisible: false,
showRenderLoopErrors: false, //是否显示渲染错误
//设置背景透明
orderIndependentTranslucency:false,
contextOptions:{
webgl:{
alpha:true
}
},
});
//隐藏版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
5.加载天地图的方法
//天地图URL配置
//在线天地图影像服务地址(墨卡托投影)
var TDT_IMG_W="http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk" ;
//在线天地图矢量地图服务(墨卡托投影)
var TDT_VEC_W="http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk";
//在线天地图影像中文标记服务(墨卡托投影)
var TDT_CIA_W="http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default.jpg&tk=自己的申请的tk"
//在线天地图矢量中文标记服务(墨卡托投影)
var TDT_CVA_W="http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default.jpg&tk=自己的申请的tk";
//在线天地图影像服务地址(经纬度)
var TDT_IMG_C="http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk";
//在线天地图矢量地图服务(经纬度)
var TDT_VEC_C="http://{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk";
//在线天地图影像中文标记服务(经纬度)
var TDT_CIA_C="http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk"
//在线天地图矢量中文标记服务(经纬度)
var TDT_CVA_C="http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=自己的申请的tk"
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationInstructionsInitiallyVisible: false,
showRenderLoopErrors: false, //是否显示渲染错误
//设置背景透明
orderIndependentTranslucency:false,
contextOptions:{
webgl:{
alpha:true
}
},
//天地图影像服务(经纬度)
imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
url: TDT_VEC_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
tilingScheme:new Cesium.GeographicTilingScheme(),
tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
maximumLevel:50,
show: false
}),
});
//调用影响中文注记服务
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: TDT_CIA_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
tilingScheme:new Cesium.GeographicTilingScheme(),
tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
maximumLevel:50,
show: false
}));
6.改变球体初始位置
//调整视图初始位置
viewer.camera.rotateRight(Cesium.Math.toDegrees(0.5).toFixed(1));
// /*定义初始缩放,值可以改动,以下括号里的值可以看情况自己设置。*/
// viewer.camera.zoomIn(0);
// /*放大*/
// viewer.camera.zoomIn(1000);
// /*缩小*/
// viewer.camera.zoomOut(1000);
// /*左旋转*/
// viewer.camera.rotateLeft(Cesium.Math.toDegrees(0.005).toFixed(2));
// /*viewer.camera.rotateLeft(0.000001);*/
// /*右旋转*/
// viewer.camera.rotateRight(Cesium.Math.toDegrees(0.005).toFixed(2));
// /*viewer.camera.rotateRight(0.000001);*/
// /*上倾斜,偏左旋转*/
// viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
// /*下倾斜,偏右旋转*/
// viewer.camera.twistLeft(Cesium.Math.toDegrees(0.005).toFixed(2));
//配置home键的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(80, 22, 130, 50);//home定位到中国范围
本文所用数据及数据处理工具请在此处下载//download.csdn.net/download/feixiegis/11505844,有相关领域的问题需要探讨和交流的请关注和私信,谢谢。
最后,祝愿大家在Cesium的技术之旅中载誉而归!!!