Cesium学习 (二)——下载源码并运行至本地

623 阅读3分钟

cesium学习(二)——下载源码并运行至本地

承接上文:Cesium学习 (一)——它能做什么&界面认识

一:下载源码

image.png 如上图所示,便是Cesium的官网,我们学习的话主要是Learn菜单,如下图主要这两个一个是文档,一个是在线示例

image.png 这些我们先不管,我们直接滑至页脚,去下载源码

image.png

image.png

image.png

二:运行项目

下载后解压至自己的学习文件夹,然后使用编辑器打开,这里我使用的是vscode

image.png 然后打开命令行,运行npm install 或者 cnpm install,安装依赖项,依赖项安装成功后,需要启动项目,可使用node server.js 启动成功后,命令行会提示 :Connect to http://localhost:8081/ 【这里我的8080端口已占用,所以变成8081,一般为8080,这个无所谓】

image.png

至此,我们可直接打开浏览器输入 http://localhost:8081/, 便可直接访问本地启动的项目。如下界面

image.png 如图所见,有一个Hello World 我们点击直接进入,到这里,你进入了Cesium的第一个程序页面 Hello World 此页面与第一小节介绍的相同!

image.png

三:本地运行后我们的关注点

主要就是 Sandcastle & Documentation

image.png

Sandcastle : 这个比较厉害,准确的说,它是一个沙盒,你可以在里面进行代码调试,并内置了很多案例供你参考

image.png

PS:

针对本地运行模式,有读者可能会好奇

1:为什么不能像我们之前做静态页面一样,直接打开一个index.html文件,来展示运行效果呢?

尽管从技术上讲,你可以直接通过打开一个静态的HTML文件(如index.html)来查看一个基本的Cesium应用,但在实际开发和复杂应用场景下,直接运行静态页面存在一些限制,这也是为何通常推荐使用本地服务器环境来运行Cesium应用的原因,具体原因包括但不限于以下几点:

  • 跨域资源共享(CORS)限制: 现代浏览器实施了同源策略,这限制了从一个域名加载的网页脚本访问另一个域名的数据。当你尝试加载如地图瓦片、3D模型等外部资源时,如果没有正确的CORS头设置,浏览器会阻止这些请求。使用本地服务器可以配置CORS,允许Cesium应用安全地请求外部资源。
  • 文件协议与WebGL限制: 使用file://协议直接打开HTML文件时,某些浏览器或WebGL功能可能受限或无法正常工作。例如,WebGL要求使用HTTPS或HTTP协议,因为出于安全考虑,某些特性在本地文件系统上会被禁用。
  • 资源加载路径问题: Cesium应用经常需要加载各种资源,如纹理、模型、地形数据等。在没有服务器的情况下,相对路径或绝对路径可能解析不正确,导致资源加载失败。
  • 开发便利性: 使用本地服务器(如Node.js的http-server或Python的SimpleHTTPServer)可以让开发者利用热重载(Live Reload)等现代开发工具,提高开发效率。当修改代码后,浏览器自动刷新,无需手动刷新页面。
  • 模拟生产环境: 在本地服务器上运行更接近于线上部署环境,有助于提前发现和解决部署时可能出现的问题,比如路径问题、资源加载顺序等。

2:本地启动必须使用node server.js吗?

其实这就是一个本地部署的管理,官方给出的源代码中,配套了nodejs的server端,以及可以通过nodejs进行安装部署。实际上可以将Cesium部署进入tomcat(geoserver)、apache、nginx等服务器中。当然,如果你使用webpack,Vite或者是在Vue/React等项目中使用,那么则可以使用其对应的命令来运行。

下一节:Cesium学习 (三)——使用vue3+ts运行Cesium