解决方案

开源三维GIS之Cesium环境搭建(一)

seo靠我 2023-09-26 00:25:43

之前一直在做三维GIS方面的开发,使用的是睿城传奇的stampGIS,目前该三维GIS平台支持IE浏览器,在大规模三维场景渲染方面速度还可以。业余时间也查阅了相关三维方面的GIS平台,特别是开源方面,SEO靠我其中Cesium表现比较突出,所以花了点时间学习一下。

Cesium是基于JavaScript编写的,使用WebGL的地图引擎,一款开源3DGIS的js库。无插件支持多种浏览器,IE,Chrome,火狐SEO靠我等,目前最新版本的Cesium版本为4.8。下面来学习一下Cesium环境的搭建。这里我们使用的服务器是tomcat,版本为9.0.0。从github上下载最新版本的Cesium,整个文件的结构如下图SEO靠我所示。

      将Build整个目录拷贝到tomcat的webapp项目工程,这里将Build修改为CesiumAPI了,当然可以根据自己的需要,进行修改。具体如下图所示。

在index.html页面中添加CeiSEO靠我sum的javascript脚本和css样式,这里只是简单的做了展现球的测试。具体代码如下。

<!DOCTYPE html> <html lang="en"> <headSEO靠我><!-- Use correct character set. --><meta charset="utf-8"><!-- Tell IE to use the latest, best versiSEO靠我on. --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Make the application on mobile takeSEO靠我 up the full browser screen and disable user scaling. --><meta name="viewport" content="width=deviceSEO靠我-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Hello World!</tiSEO靠我tle><script src="CesiumAPI/Cesium/Cesium.js"></script><style>@import url(CesiumAPI/Cesium/Widgets/wiSEO靠我dgets.css);html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow:SEO靠我 hidden;}</style> </head> <body><div id="cesiumContainer"></div><script>var viewer =SEO靠我 new Cesium.Viewer(cesiumContainer);</script> </body> </html>

       最后的测试效果如下。

注意运行的时候必须将tomSEO靠我cat服务开启。还有,本人在学习的时候没有完整的复制Build目录出现一些问题,因此需要完整复制Build目录下的文件。

                                                               更多内容,微信扫二维码关注公众号

“SEO靠我”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与 我们联系删除或处理,客服邮箱:html5sh@163.com,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同 其观点或证实其内容的真实性。

网站备案号:浙ICP备17034767号-2