700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Cesium最新基础教程系列2—Viewer离线加载地图数据(高程数据 地图瓦片(卫星影像

Cesium最新基础教程系列2—Viewer离线加载地图数据(高程数据 地图瓦片(卫星影像

时间:2022-08-19 03:20:15

相关推荐

Cesium最新基础教程系列2—Viewer离线加载地图数据(高程数据 地图瓦片(卫星影像

浏览器打开后,右上角点击图层,cesium所带图层都是在线图层,话不多说、直接代码,可以参考注释

var viewer = new Cesium.Viewer('cesiumContainer',{

animation: true, //是否显示动画控件

shouldAnimate : true,

homeButton: false, //是否显示Home按钮

fullscreenButton: false, //是否显示全屏按钮

baseLayerPicker: true, //是否显示图层选择控件

geocoder: false, //是否显示地名查找控件

timeline: true, //是否显示时间线控件

sceneModePicker: false, //是否显示投影方式控件

navigationHelpButton: false, //是否显示帮助信息控件

infoBox: false, //是否显示点击要素之后显示的信息

selectionIndicator:false,//绿色选中框

requestRenderMode: true, //启用请求渲染模式

scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存

sceneMode: 3//初始场景模 1 2D模式;2- 2D循环模式;3 3D模式

});

如何将cesium自带图层去掉,然后加载自定义的图层呢?

Cesium给出了扩展接口imageryProviderViewModels来实现此方法。

先将现有图层隐藏不显示,加入如下样式:

<style>

.cesium-baseLayerPicker-section:last-child{

display:none;

}

.cesium-baseLayerPicker-sectionTitle:nth-child(3){

display:none;

}

</style>

其次,自定义图层,采用tomcat将图层数据发布,下载好的地图瓦片png\jpg格式的,直接扔进tomcat的webapp下即可。

然后根据UrlTemplateImageryProvider定义图层, ProviderViewModel根据定义的图层来省城地图模型,其次将定义好的模型放入数组中,最后将数组赋值给 imageryProviderViewModels即可。

var roadMap = new Cesium.UrlTemplateImageryProvider({

url:'http://192.168.0.19:9000/MapData/roadmap/{z}/{x}/{y}.png',

fileExtension:'png'

});

var roadMapModel = new Cesium.ProviderViewModel({

name:'电子图',

iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/OpenStreetMap.png'),

creationFunction:function(){

return roadMap;

}

});

var satelliteMap = new Cesium.UrlTemplateImageryProvider({

url:'http://192.168.0.19:9000/MapData/satellite/{z}/{x}/{y}.jpg',

fileExtension:'jpg'

});

var satelliteMapModel = new Cesium.ProviderViewModel({

name:'卫星影像图',

iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/mapboxSatellite.png'),

creationFunction:function(){

return satelliteMap;

}

});

var terrainMap = new Cesium.UrlTemplateImageryProvider({

url:'http://192.168.0.19:9000/MapData/bjterrain/{z}/{x}/{y}.jpg',

fileExtension:'jpg'

});

var terrainMapModel = new Cesium.ProviderViewModel({

name:'地形影像图',

iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/mapboxSatellite.png'),

creationFunction:function(){

return terrainMap;

}

});

var providerViewModels = [];

providerViewModels.push(roadMapModel);

providerViewModels.push(satelliteMapModel);

providerViewModels.push(terrainMapModel);

viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;//图层放入图层模型中。

viewer.baseLayerPicker.viewModel.selectedImagery=viewer.baseLayerPicker.viewModel.imageryProviderViewModels[1];//默认加载卫星影像图

效果图如下:

Cesium最新基础教程系列2—Viewer离线加载地图数据(高程数据 地图瓦片(卫星影像 电子地图)) Viewer属性详解 及离线自定义图层

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。