【GIS】Cesium地下模式设置
1、代码
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>地上地下</title> <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="./css/pretty.css" rel="stylesheet"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script src="./js/config.js"></script> <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script> </head> <script src="/js/lib/cesiumplugins/ImageryProvider-WebExtend.js"></script> <body> <div id="cesiumContainer"></div> <div id='toolbar' class="param-container tool-bar"> <label style="color: #FFFFFF">影像: </label> <input type="range" id="影像" min="0" max="1" value="1" step="0.05" style="width: 170px"> <br /> <label style="color: #FFFFFF">地形: </label> <input type="checkbox" id="地形">    <br /> </div> <script> function onload(Cesium) { var Routes1; var Routes2; var Routes3; var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, { url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}" }); var viewer = new Cesium.Viewer('cesiumContainer', { // imageryProvider: GoogleMap }); // viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({ // url: './images/BlackMarble_2016.jpg' // })); viewer.imageryLayers.addImageryProvider(GoogleMap); var globe = viewer.scene.globe; viewer.scene.undergroundMode = true; viewer.scene.sun.show = false; viewer.scene.moon.show = false; viewer.scene.skyBox.show = false; viewer.scene.skyAtmosphere.show = false; viewer.scene.fxaa = true; $("#影像").on("input change", function() { globe.globeAlpha = this.value; }); var blueBox = viewer.entities.add({ name: 'Blue box with black outline', position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0), box: { dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), material: Cesium.Color.BLUE.withAlpha(0.5), outline: true, // height: 100, outlineColor: Cesium.Color.BLACK, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); var yellowBox = viewer.entities.add({ name: 'Yellow box with black outline', position: Cesium.Cartesian3.fromDegrees(-108.202, 41.202), box: { dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), material: Cesium.Color.YELLOW.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); var czml = [{ "id": "document", "name": "box", "version": "1.0" }, { "id": "shape2", "name": "Red box with black outline", "position": { "cartographicDegrees": [-107.0, 40.0, -150000.0] }, "box": { "dimensions": { "cartesian": [400000.0, 300000.0, 500000.0] }, "material": { "solidColor": { "color": { "rgba": [255, 0, 0, 128] } } }, "outline": true, "outlineColor": { "rgba": [0, 0, 0, 255] }, "heightReference": Cesium.HeightReference.CLAMP_TO_GROUND } }]; var dataSourcePromise = Cesium.CzmlDataSource.load(czml); viewer.dataSources.add(dataSourcePromise); viewer.zoomTo(viewer.entities); }; </script> </body>
2、效果
博客地址: http://www.cnblogs.com/defineconst/
博客版权: 本文以学习、研究和分享为主,欢迎转载和各类爬虫,但必须在文章页面明显位置给出原文链接。 如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
博客版权: 本文以学习、研究和分享为主,欢迎转载和各类爬虫,但必须在文章页面明显位置给出原文链接。 如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库