Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

时间：2021-11-29 21:58:26

废话不多说，今天就先在Eclipse上搭建Cesium开发环境吧~

零、Cesium简介

Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一个跨平台，开源，非常有前途的webgis表现层库。

Cesiumjs源自 Analytical Graphics, Inc. (AGI) 公司为他们客户开发一个虚拟地球项目，后来将cesium项目贡献给开源社区并一直活跃开发中。（AGI 开发的 STK Terrain Server 是一种针对Cesium-应用的流式高分辨率服务器）另一个公司级的贡献者是NICTA (National ICT Australia) 澳大利亚最大的信息与通讯技术中心，NICTA的员工们贡献了瓦片地图服务、地形处理等cesium的核心功能。并一直使用cesium开发环境监测分析、交通基础设施建模仿真优化等领域的应用。

此前我对比了一些GIS开源框架，相对来说Cesium是比较适合web gis的，只要浏览器支持webgl就可以无需下载任何插件运行，目前大多数主流浏览器都支持webgl，包括很多手机自带的浏览器也逐渐开始支持webgl，因此webgl的普及也必定是大势所趋。

一、开发环境
　　1、系统：windows 7/8/10均可
　　2、jdk：1.8.0_144

　　3、服务器：apache-tomcat-9.0.8

　　4、cesium：Cesium-1.54
　　5、IDE：eclipse+jsp

　　【新手请自行搜索jdk的下载及配置、Tomcat的下载及配置，eclipse的下载及配置~】

二、代码测试

1、首先，我们需要从Cesium的官网下载最新的包：

　　Cesium的官方网站：https://cesiumjs.org/，点击这个按钮来获取最新的Cesium：下载Cesium。Github站点为：https://github.com/AnalyticalGraphicsInc/cesium.git但是速度太慢了。

2、接下来，使用Eclipse建立一个新的Dynamic Web Project项目，如下图 所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

　　在“Project Name”中输入“CesiumStudy”。

3、将Cesium包解压，解压缩后的目录如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

4、将解压缩后的Build文件夹下面的Cesium子目录复制到项目的目录下，如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境         =====〉Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

5、在项目CesiumStudy上右键单击，添加Html File，在“File Name”中输入index.html，如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

之后在index.html文件中输入以下的测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Tell IE to use the latest, best version. -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->

<meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<title>Hello World!</title>

<script src="./Cesium/Cesium.js"></script>

<style>

@import url(./Cesium/Widgets/widgets.css);

html, body, #cesiumContainer {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}

</style>

</head>

<body>

    <div id="cesiumContainer"></div>

      <script>

        var viewer = new Cesium.Viewer('cesiumContainer');

      </script>

    </body>

</html>

注意代码中蓝色加粗处的路径设置。

6、启动server，查看页面的运行效果图，操作如下所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

　　apache-tomcat-9.0.8服务器start以后，也可以使用任意一款浏览器，输入网址访问测试网页：

　　http://localhost:8888/CesiumStudy/index.html（8888位端口号，每台计算机在用的端口号可能不一样，根据实际情况调整）。效果如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

7、此外，也可以将该Web项目部署到webapps文件夹下，即在默认安装目录的webapps（即C:\Program Files\apache-tomcat-9.0.8\webapps）下新建目录“CesiumStudy”，再将CesiumStudy项目的webContent目录下的Cesium文件夹和index.html文件复制到新建的CesiumStudy目录下，如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

　　之后运行C:\Program Files\apache-tomcat-9.0.8\bin\startup.bat来启动apache-tomcat-9.0.8服务器。服务器启动成功后，在浏览器中输入如下地址：

　　http://localhost:8080/CesiumStudy/cesium/Apps/HelloWorld.html

　　我们就可以运行基于开源Cesium的测试页面啦，并且在右上角可以切换各种地图。效果如下图所示：

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境

　　这样一来，Cesium的基本开发环境就搭建好了。

　　如果我们想要隐藏下方的版权信息，在下面这句代码

　var viewer = new Cesium.Viewer('cesiumContainer');

　　后面加上下面这句代码就可以实现啦！

  viewer._cesiumWidget._creditContainer.style.display="none";

　　去掉版权信息后如下图，看起来清爽了许多！！！

Cesium学习2：如何从零开始在Eclipse IDE，Java语言搭建cesium开发环境的更多相关文章

  1. Eclipse&plus;ADT&plus;Android SDK 搭建安卓开发环境

    Eclipse+ADT+Android SDK 搭建安卓开发环境   要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2 ...

  2. Eclipse&plus;ADT&plus;Android SDK 搭建安卓开发环境（版权属于forever-z）

    运行环境 windows 7或者10(64位); 为例eclipse-jee-neon-3-win32-x86_64: ADT-23.0.4 下载地址 安装JDK 这里可以参考关于安装JDK的教程,请 ...

  3. Eclipse&plus;ADT&plus;Android SDK 搭建安卓开发环境（转）

    要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2-win32(32位);ADT-23.0.4 下载地址 环境下载 最近 ...

  4. 在Eclipse平台中，搭建SpringBoot开发环境

    1.查看eclipse版本号,Help->About Eclipse IDE 2.下载对应版本的STS插件 下载地址:https://spring.io/tools3/sts/all(注意版本对 ...

  5. Hadoop学习之路（八）在eclispe上搭建Hadoop开发环境

    一.添加插件 将hadoop-eclipse-plugin-2.7.5.jar放入eclipse的plugins文件夹中 二.在Windows上安装Hadoop2.7.5 版本最好与Linux集群中的 ...

  6. Eclipse&plus;ADT&plus;Android SDK搭建安卓开发环境

    第一步:打开[Android.rar]压缩包,如图所示[评论区回复我,压缩包地址] 第二步:配置环境变量 (1) 解压[android-sdk_r24.4.1-windows.zip]压缩包 (2)  ...

  7. ios学习笔记（一）Windows7上使用VMWare搭建iPhone开发环境（转）

    原文地址:http://blog.csdn.net/shangyuan21/article/details/18153605 我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是M ...

  8. java 学习笔记1 java语言概述及开发环境

    高级语言运行机制 高级语言按程序的执行方式分为编译型和解释型两种. java语言比较特殊,Java程序的执行必须经过先编译后解释的步骤. 1 编译生成字节码,只面向JVM(.class) 2Jvm执行 ...

  9. 【分享】01&period; Eclipse for PHP &plus; phpStudy 搭建php开发环境

    配置php编译器 配置phpStudy服务器项目发布目录 修改hosts文件127.0.0.1      www.350zx.cn 新建项目 启动的你的phpStudy  

随机推荐

  1. Github个人使用经历

    Github是什么? 简单来说Git是一个分布式的版本控制系统.GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,Git ...

  2. iOS在UITableViewController里使用UISearchDisplayController报错&quot&semi;&lbrack;UISearchResultsTableView dequeueReusableCellWithIdentifier&colon;forIndexPath&colon;&rsqb;&quot&semi;

    出现如下错误: 2016-02-13 22:09:22.318 Test[2757:192106] *** Assertion failure in -[UISearchResultsTableVie ...

  3. java自动化测试-http请求结合抓包工具实际应用

    继上文我编写了java的get请求与post请求之后,我现在开始写一下实际操作 很多人有疑问,接口测试的代码是哪里来的,怎么来的呢?看得见吗?我来做一个简单的演示 我们这里简单介绍一下抓包工具,对于一 ...

  4. PHP7 网络编程（一）多进程初探

    准备 我们都知道PHP是单进程执行的,PHP处理多并发主要是依赖服务器或PHP-FPM的多进程及它们进程的复用,但PHP实现多进程也意义重大,尤其是在后台Cli模式下处理大量数据或运行后台DEMON守 ...

  5. PAT L2-022 重排链表

    https://pintia.cn/problem-sets/994805046380707840/problems/994805057860517888 给定一个单链表 L​1​​→L​2​​→⋯→ ...

  6. Jmeter使用流程及简单分析监控

    本文摘自:一颗糖果   https://www.cnblogs.com/linglingyuese/archive/2013/03/04/linglingyuese-one.html 1.下载Jmet ...

  7. 如何在 Mac 上通过 Boot Camp 安装 Windows&quest;

    如何在 Mac 上通过 Boot Camp 安装 Windows? The following contents are chosen from the apple website, thanks f ...

  8. vue v-model 表单控件绑定

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...

  9. js学习笔记32----new

    new:用于创建一个对象. 有 new 与 无 new 时的区别,查看下面的示例代码应该会增加感觉: <!DOCTYPE html> <html lang="en&quot ...

  10. sublime Text 块编辑方法

    比如我们要把SQL语句中的多表查询结果封装成pojo SQL: SELECT a.id, a.title, a.sell_point, a.price, a.image, b.`name` categ ...

相关文章