效果

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium|xt3d</title><!-- 引入Cesium --><script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"><!--  引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}</style>
</head><body><div id="map3d"></div><script>let xt3dInit = {init(el) {this.initViewer(el);this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: true,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,shouldAnimate: true,terrainProvider: new Cesium.CesiumTerrainProvider({url: "http://data.xtgis.cn/terrain",requestWaterMask: true,requestVertexNormals: true}),imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"})});this.viewer.scene.globe.depthTestAgainstTerrain = false; //默认为false  this.viewer.animation.container.style.visibility = 'hidden'; // 不显示动画控件 },setView() {let flyToOpts = {destination: {x: -1244121.9426581487,y: 5085439.458440664,z: 3654926.4730463736},orientation: {heading: 4.788047581496534,pitch: -0.4322797689024851,roll: 6.27971882399201},duration: 1};this.viewer.scene.camera.flyTo(flyToOpts);},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");</script>
</body></html>

预览地址

xt3d 在线预览地址

Cesium|xt3d加载中国地形相关推荐

cesium 3dtiles 加载本地数据_记一次Cesium地形数据生成过程
问题描述有一小块带高程值的点状数据,需要根据该数据生成Cesium支持的3dtiles数据,在Cesium中显示.经过一周多时间的摸索,终于能够在Cesium中加载成功.现将数据处理流程做个记录,以 ...
Cesium本地加载地形（dem高程）数据
cesium本地加载dem数据,首先需要下载地区的高程数据,一般通常在地理空间数据云里面下载:http://www.gscloud.cn/ 这里一般可以下载到90m和30m精度的数据,当然也可以用自己 ...
Cesium for UE4 加载离线地形和影像
Cesium for UE4 加载离线地形和影像 CTB 切片地形编译cesium-terrain-builder {"tilejson": "2.1.0", ...
Ogre 编辑器二(用Ogre的地形组件加载天龙八部地形)
主界面如上文设计完成后,场景刚开始添加了是Ogre例子里的,发现场景里实物太少,于是想到直接把天龙的场景拿下来,天龙网上有源码,参考了下,把天龙的地形用Ogre的地形组件完成了下,如下是效果图: 因为 ...
cesium首次加载gltf模型成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/111305160 根据资料gltf格式模型可以直接在cesium上加载: 网上搜索gltf, ...
cesium 直接加载 geotiff 影像图
前言最近碰到了一个需求,需要通过 cesium 直接加载 geotiff 影像图. 咋一听,这个需求好像蛮奇怪,cesium 本身本来就支持加载 tile 影像图,也就是所谓的切片地图.原理其实就是 ...
Cesium Primitives加载大量图标点
Cesium Primitives加载大量图标点前言效果关键代码前言使用entity的方式加载大量图标点会出现卡顿现象,cesium提供了BillboardCollection可以实现大量图 ...
Cesium 无法加载出地球
Cesium 无法加载出地球问题描述 Cesium 无法加载出地球,在控制台中看到这样一条报错信息: 401错误,不可用的token值. 解决方案 1.注册一个免费的账户网址:https://ce ...
echarts5.3.2版本加载中国地图
echarts5.3.2版本加载中国地图效果图可下载echarts4.9版本获取地图包 npm install echarts@4.9.0 附:打包时发现echarts地图不显示,后查看china ...

Cesium|xt3d加载中国地形

Cesium|xt3d加载中国地形

效果

代码

预览地址

Cesium|xt3d加载中国地形相关推荐

最新文章

热门文章