- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
Cesium-01:Vue 中基础使用 。
Cesium-02:飞机模型简单点对点飞行 。
Cesium-03:洪水淹没 。
最开始想做洪水淹没的话,查了一些资料。又基于不同的实现的,如 ArcScene 实现,有基于 Cesium 实现.
对比分析了下,ArcGIS 下的实现主要是软件中,如果想自己代码实现的话,还要借助 Arc Engine。加上自己前面也使用过 Cesium ,这里就选择了 Cesium 去做.
这里特别说明下,所做的洪水淹没,是简单的水面的抬升,没有降水、水流等算法分析在里面(了解过一些算法,要对接的话还有很多工作要做).
准备数据 。
1、底图卫星数据,这里选用天地图卫星切片; 。
2、DEM 数据,直接下载的哨兵数据(数据下载地址 ASF Data Search (alaska.edu) ,可以参考 这里 ) 。
3、DEM 切片,并发布服务 。
。
处理过程中注意点 。
1、哨兵数据下载网站,需要注册; 。
2、没有选择自己下载卫星数据,是因为分辨率、处理等问题,不如直接使用在线的天地图卫星; 。
3、DEM 切片使用的是 CesiumLab,但发布的 DEM 服务,可以使用 CesiumLab 也可以自己发布 。
如果自己发布 DEM 服务的话,在 DEM 切片时,选择“散列”,如下图:
。
Nginx 发布 DEM 切片,和一般的 Web 站点的配置一样,如下:
server { listen 9001 ; root ./www/hzDEMcache ; # Add index.php to the list if you are using PHP index index.html index.htm ; server_name _ ; location / { # First attempt to serve request as file , then # as directory , then fall back to displaying a 404 . try_files $uri $uri/ =404 ; add_header Access-Control-Allow-Origin * ; # 跨域设置 } add_header Cache-Control "no-cache,must-revalidate" ; # 跨域设置 }
在配置完成后,浏览器中打开 http://localhost:9001/layer.json,没有问题的话,证明发布成功! 。
数据都完成后,可以进行开发啦! 。
下面两个问题时间:21年11月时没有问题,22年11月出现下面两个问题.
1、Cesium 版本问题 。
前几篇文章中,使用的 Cesium 是1.89版本。这个项目在初始化时,直接安装 Cesium 包,安装的是 1.99 版本。启动后项目报错,".?" 运算符不能识别.
经过分析,新版的 Cesium 对 TS 的支持更好,其中一些使用到了 TS 的新语法。这个对于使用 Vue3 + TS 会更友好.
因当前使用的还是 Vue2 ,切没有 TS,所以版本回退到了 1.89 ,再次运行正常! 。
2、token 。
在使用 Cesium 自带的底图、高程时,直接报错,没有显示。看了官网的文档,发现现在需要 token.
所以要先在官网注册,并申请 token。在使用地图前赋值 token:
Cesium.Ion.defaultAccessToken = 'token'
。
实现 。
底图代码:
this .cesiumViewer = new Cesium.Viewer('cesiumContainer' , { infoBox: false , // terrainProvider: Cesium.createWorldTerrain(), // Cesium 自带地形数据 // terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'http://localhost:9003/terrain/LktyW4LU' }), // cesiumLab 切的地形数据服务 terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'http://localhost:9001/' }), // nginx 代理切片,最后要带上"/" baseLayerPicker: true , // 图层选择器 // 不设置,默认使用自带底图,需要 token imageryProvider: new Cesium.UrlTemplateImageryProvider({ // url 和 openlayer 使用区别,t{0-7}.tianditu ,这里需要指定数值 url: 'http://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=07d4e04324b413cb0582fa99fe833cd3' }) })
洪水淹没代码:这里使用的是 Cesium.CallbackProperty,直接修改 extrudedHeight 会出现闪烁的情况 。
drawWater() { this .showWater = true this .waterEntity && this .cesiumViewer.entities.remove( this .waterEntity) const waterCoord = [119.642769, 30.361905, 100, 119.591604, 30.448757, 100, 119.695767, 30.488232, 100, 119.748406, 30.395983, 100 ] let startHeight = 100 const targetHeight = 500 this .waterEntity = this .cesiumViewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(waterCoord), material: Cesium.Color.fromBytes( 64, 157, 253, 200 ), perPositionHeight: true , extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false ) } }) const waterInterval = setInterval(() => { if (startHeight < targetHeight) { startHeight += 10 if (startHeight >= targetHeight) { startHeight = targetHeight clearInterval(waterInterval) this .showWater = false } // 使用该方式会闪烁,改用 Cesium.CallbackProperty 平滑 // this.waterEntity.polygon.extrudedHeight.setValue(startHeight) } }, 100 ) }
效果动图:
。
最后此篇关于Cesium-03:洪水淹没的文章就讲到这里了,如果你想了解更多关于Cesium-03:洪水淹没的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
如何在 iOS 中隐藏并显示标签栏,如 Groupon iPhone app是吗? 最佳答案 如果您不想弄乱实际的选项卡栏框架、子类化等,请使用伪选项卡栏。例如,将分段 Controller 放在不大
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
我刚刚开始学习一点关于 Canvas 的知识! 我想绘制在设定的时间间隔后闪烁的矩形(显示/隐藏/显示/隐藏/显示...)。 如果我删除 setInterval() 和 clear_canvas()
我正在编写一个小型 Android 游戏,每当我第一次运行时,一切都工作正常,但它会随机挂起并开始在 eclipse 的 LogCat 中无休止地发送垃圾邮件 12-30 12:40:05.344:
当我在具有 Google map fragment 的 Activity 上拖动 map 时,我的 logcat 充满了 "W/Google Maps Android API: GLHudOverla
上下文:这个命令是用python脚本生成的,它旨在连接不同格式的不同小视频,有0.5s的停顿,考虑到一些视频没有音轨。 ffmpeg.exe -report -i input0.mp4 -i inpu
我是一名优秀的程序员,十分优秀!