上面地形数据,是调用cesium官方的地图服务,需要先注册cesium账户,配置cesium的账户token才行
1、在线地形服务的示例代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cesium示例</title> <!-- 引用cesium的js和css,天地图的扩展js --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script> <style type="text/css"> html, body, #tiandituContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body onload="loadData()"> <div id="tiandituContainer"> </div> <script> //Cesium官网注册后的授权token,没有token不能使用cesium在线的地形服务,这里需要改成自己的token Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjE1MDIwOC1jOGYxLTQzZWItYjNhOC1iNjZlMWM1OGYxMDIiLCJpZCI6MTAyODY5LCJpYXQiOjE2NTkwMDA3ODN9.Vy4hW4jpjbZs6ee4BcRl3-cCl-oRGn42e2_Hjbo5nas"; var viewer; function loadData() { //默认会调用微软virtualearth地图 viewer = new Cesium.Viewer('tiandituContainer',{ animation:false, //是否显示动画控件 homeButton:true, //是否显示home键 geocoder:true, //是否显示地名查找控件,如果设置为true,则无法查询 baseLayerPicker:true, //是否显示图层选择控件 timeline:false, //是否显示时间线控件 fullscreenButton:true, //是否全屏显示 infoBox:true, //是否显示点击要素之后显示的信息 sceneModePicker:true, //是否显示投影方式控件 三维/二维 navigationInstructionsInitiallyVisible:false, //导航指令 navigationHelpButton:false, //是否显示帮助信息控件 selectionIndicator:false, //是否显示指示器组件 }); //隐藏cesium的logo viewer._cesiumWidget._creditContainer.style.display = "none"; //默认的Cesium会加载一个bingMap底图,这个地图网络不太好,一般要先去掉这个默认的 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ name:"img_arcgis", url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" })); //加载Cesium的在线Asset地形数据--有点慢 // var terrainProvider = new Cesium.CesiumTerrainProvider({ // url : Cesium.IonResource.fromAssetId(1), // requestWaterMask: true, // 请求水体效果所需要的海岸线数据 // requestVertexNormals: true, // 请求地形照明数据 // }); // viewer.terrainProvider = terrainProvider; //加载Cesium默认的地形数据。Bing在线地形影像--很慢,可以指定mapStyle,详见BingMapsStyle类 var terrainProvider = Cesium.createWorldTerrain({ requestWaterMask: true, // 请求水体效果所需要的海岸线数据 requestVertexNormals: true, // 请求地形照明数据 }); viewer.terrainProvider = terrainProvider; viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关,打开后地形会遮挡看不到的区域 viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果 //将三维球定位到指定位置,camera是相机,是当前视野范围相机 //destination是相机的目标位置,参数是经度、纬度、高度 //orientation是相机朝向 // heading-代表镜头左右方向,正值为右,负值为左 // pitch-代表镜头上下方向,正值为上,负值为下. // roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(114.47004, 37.0904, 20000000), orientation: { heading : Cesium.Math.toRadians(348.4202942851978), pitch : Cesium.Math.toRadians(-89.74026687972041), roll : Cesium.Math.toRadians(0) }, complete:function callback() { // 定位完成之后的回调函数 } }); } </script> </body> </html>
2、自己下载高精地形数据,并发布服务
下载地址:地理空间数据云 (gscloud.cn)
(1)下载数据
(2)数据处理
下载之后的数据为压缩包,解压之后,在ArcGIS中拼接、裁剪(也可以选择其他软件)
(3)用cesiumlab进行切片
(4)用tomcat或者nginx发布地图服务
把切片结果(文件夹YiChangShi)拷贝至tomcat的webapps文件下,启动服务,记录访问地址http://localhost:7080/YiChangShi/
window.viewer = new Cesium.Viewer('mapContainer', {
sceneMode: Cesium.SceneMode.SCENE3D,
infoBox: false, //信息框
selectionIndicator: false, //绿色框
geocoder: false,//是否显示geocoder小器件,右上角查询按钮
homeButton: false,//是否显示Home按钮
sceneModePicker: false,//是否显示3D/2D选择器
baseLayerPicker: false,//是否显示图层选择器
navigationHelpButton: false,//是否显示右上角的帮助按钮
animation: false,//是否创建动画小器件,左下角仪表
timeline: false,//是否显示时间轴
fullscreenButton: false,//是否显示全屏按钮
// imageryProvider: tdtImageryProvider, // 天地图
terrainProvider: new Cesium.CesiumTerrainProvider({
url:"http://localhost:7080/YiChangShi/",
minimumLevel: 0,
maximumLevel: 15,
}),
});