使用Tomcat架设Cesium本地服务器(含Nodejs,Python方法)

2024-06-12 09:18

本文主要是介绍使用Tomcat架设Cesium本地服务器(含Nodejs,Python方法),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文主要说明如何使用Tomcat作为本地web服务器,然后将Cesium整个文件夹部署在Tomcat的Webapps文件夹内,即可实现浏览器访问Cesium本地主页。
我们将Cesium部署在本地服务器上主要有以下方面的考虑:

  • 局域网内,创建Web服务,通过对Cesium服务端文件的修改,展示我们自己想要提供的功能,从而可以在局域网内任何一台机器上通过浏览器即可访问
  • 将测试修改后的Cesium文件部署到云主机中自己的网站上,实现个人网站的发布

以下各代码及说明均在Windows10操作系统下。

有关Cesium请参考:
- Cesium简介
- Cesium官方文档

还有两种常见的Web服务方式:Node.js和Python,Cesium官方文档里都有介绍,这里简单的说一下过程(假设Cesium已经下载并解压缩好)

Node.js方式
  1. 从官网安装Node.js
  2. 打开控制台,并进入到Cesium的安装目录,然后输入:npm install
    然后将会自动安装依赖的模块包,并自动在Cesium根目录下创建一个‘node_modules’文件夹
  3. 在控制台继续输入:node server.js,即可启动Web服务,见下图
  4. 浏览器网址栏输入:http://localhost:8080,即可访问Cesium的主文件
    Cesium_Nodejs
Python方式
  1. 假设已经安装好Python,我使用的是Anaconda 5.1,Python版本是3.6的
  2. 通过开始菜单打开Anaconda Prompt控制台程序,并进入到Cesium的安装目录,然后输入:python -m http.server 9090,即可打开Web服务,见下图(其中9090为端口号,可自行设置,只要不与其他端口冲突就行了)
  3. 在浏览器地址栏中输入:http://localhost:9090/ ,即可访问Cesium的主文件
    Cesium_Python

Tomcat的安装与配置

有关tomcat的介绍,可参考Tomcat 快速入门

Tomcat是由Apache公司发布的一款适合于JSP程序设计和Java EE程序设计开发的轻量级Web服务器。符合W3C标准,支持Servlet和JSP规范。由于其拥有技术先进、性能稳定和开源免费的特征,深受Java开发者的喜爱并得到了部分软件开发商的许可,成为目前比较流行的Web应用服务器。

下载

去Tomcat官网下载,当前日期(2018年4月)我下载的是apache-tomcat-9.0.7。注意,下载.zip文件为免安装版本。
Tomcat
放在合适位置,直接解压缩即可,我放在 D:\apache-tomcat-9.0.7

环境变量配置

配置系统的环境变量(右键计算机-属性-高级系统设置-环境变量-新建系统变量)
变量名:CATALINA_HOME,变量值为安装目录” D:\apache-tomcat-9.0.7”,根据你自己安装的目录进行对应修改,见下图。
Tomcat环境变量
由于tomcat依赖于JAVA的运行环境,因此应确保JRE的安装,我安装的JDK版本是1.8,同样查看JRE的环境变量是否配置正确,确保JRE_HOME指向正确的位置。
JRE环境变量
有关Java运行环境JDK的安装,请参考:https://blog.csdn.net/u011575168/article/details/79920107

启动服务

进入到Tomcat安装目录的bin目录下,找到startup.bat文件,双击运行,即可看到以下界面,注意,在tomcat提供web服务期间,不要关闭此窗口。
Tomcat启动界面
然后打开浏览器,在里面输入http://localhost:8080/ 就可以看到如下界面:
tomcat服务器界面
到此Tomcat就搭建好了,web服务即开启。

关闭服务

直接关闭命令行窗口时,Tomcat就停止了。

修改端口号

tomcat提供web服务默认的端口号是8080,如果想要修改端口号,则进入Tomcat安装目录下的conf目录,打开server.xml,修改以下代码中的port值,然后重启tomcat即可。

<Connector port="8080" protocol="HTTP/1.1"  connectionTimeout="20000"  redirectPort="8443" /> 

注意,如果是建立个人网站,则端口号设置为80

tomcat报warinig Unable to add the resource at [..] to the cache..

信息大致的意思就是不能给资源加cache了,因为没有足够的可用空间了。
原来 tomcat8中增加了静态资源缓存的配置
以下是两个相关参数说明:

  1. cacheMaxSize:静态资源缓存最大值,以KB为单位,默认值为10240KB
  2. cachingAllowed:是否允许静态资源缓存,默认为true

解决方法:
增大缓存 在 conf/context.xml中加入:

<Resources cachingAllowed="true" cacheMaxSize="102400"/>

tomcat增加缓存大小

修改tomcat默认主页

前面介绍开启tomcat服务时,默认登录的页面是tomcat的,那么如何修改TOMCAT的默认主页为你自己项目的主页呢?

最简单的办法是删除Tomcat目录下的\webapps\ROOT文件夹下所有文件,然后将自己主页的文件全部放在Root文件夹下面。

同时删除文件夹\work\Catalina内的所有文件即可。

Cesium的配置

下载Cesium(2018年4月的版本是1.44),将其解压缩在Tomcat目录下的Webapps文件夹内,Cesium文件夹结构如下(为了方便可以将文件夹名称Cesium-1.44改为Cesium):
tomcat_cesium
其中,文件夹lyf是我自己创建的。
注意,我们下载的压缩包文件是放在服务器端的,index.html就是我们通过浏览器访问tomcat服务器上的Cesium的主页面,不能直接双击打开,必须通过浏览器访问才能打开。

浏览器访问Cesium及调试

确保你的浏览器支持WebGl,现在最新的浏览器如Chrome/Edge都支持的。
确保tomcat的服务打开,在浏览器地址栏输入http://localhost:8080/Cesium-1.44/即可打开:
Cesium_index
注意,上图中,Lyf.HelloWord是我通过修改index.html内容增加的,见下代码处:

  <dt><a href="Apps/HelloWorld.html">Hello World</a></dt><dd>The simplest possible Cesium application.</dd><dt><a href="lyf/LyfHelloWorld.html">Lyf.HelloWord</a></dt><dt><a href="Apps/CesiumViewer/index.html">Cesium Viewer</a></dt>

我个人建议在本地机器利用Cesium开发的简单流程如下:

  1. 在Cesium-1.44文件夹内创建自己的个人文件夹(我的是lyf),以后自己所有开发的所有网页(html,img,css)都放在这个文件夹中。
  2. 拷贝Cesium-1.44/Apps/HelloWorld.html文件到个人文件下,并修改名称(如LyfHelloWorld.html),以便区别。
  3. 在Cesium主文件index.html中,创建连接指向个人文件夹中的html文件,如LyfHelloWorld.html。
  4. 利用各种网页编辑器(Eclipse,Visual Studio Code,PyCharm等)直接修改LyfHelloWorld.html,或者创建其他的网页。
  5. 然后浏览器刷新主页http://localhost:8080/Cesium-1.44/,点击指向所要测试的连接即可查看修改后的效果。
    Cesium调试

一个例子

例如,我想将下面的图片加载到3D地球上
WhiteOnBlue.bmp
则将图片WhiteOnBlue.bmp放在lyf文件夹下的imag文件夹内,然后修改lyfHelloworld.html中代码如下:

<body><div id="cesiumContainer"></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {baseLayerPicker: false});layers.addImageryProvider(new Cesium.SingleTileImageryProvider({url : 'imag/WhiteOnBlue.bmp',rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)}));  </script>
</body>

保存后,重新加载http://localhost:8080/Cesium-1.44/,点击lyf.HelloWord,即可打开我自己修改后的页面(后面修改html代码后,可直接更新此页面):
Cesium_map

Have Fun!

这篇关于使用Tomcat架设Cesium本地服务器(含Nodejs,Python方法)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1053801

相关文章

ElasticSearch+Kibana通过Docker部署到Linux服务器中操作方法

《ElasticSearch+Kibana通过Docker部署到Linux服务器中操作方法》本文介绍了Elasticsearch的基本概念,包括文档和字段、索引和映射,还详细描述了如何通过Docker... 目录1、ElasticSearch概念2、ElasticSearch、Kibana和IK分词器部署

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本

Linux流媒体服务器部署流程

《Linux流媒体服务器部署流程》文章详细介绍了流媒体服务器的部署步骤,包括更新系统、安装依赖组件、编译安装Nginx和RTMP模块、配置Nginx和FFmpeg,以及测试流媒体服务器的搭建... 目录流媒体服务器部署部署安装1.更新系统2.安装依赖组件3.解压4.编译安装(添加RTMP和openssl模块

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud