Cesium学习2:如何从零开始在Eclipse IDE,Java语言搭建cesium开发环境
废话不多说,今天就先在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项目,如下图 所示:

在“Project Name”中输入“CesiumStudy”。
3、将Cesium包解压,解压缩后的目录如下图所示:

4、将解压缩后的Build文件夹下面的Cesium子目录复制到项目的目录下,如下图所示:
=====〉
5、在项目CesiumStudy上右键单击,添加Html File,在“File Name”中输入index.html,如下图所示:

之后在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,查看页面的运行效果图,操作如下所示:

apache-tomcat-9.0.8服务器start以后,也可以使用任意一款浏览器,输入网址访问测试网页:
http://localhost:8888/CesiumStudy/index.html(8888位端口号,每台计算机在用的端口号可能不一样,根据实际情况调整)。效果如下图所示:

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

之后运行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的基本开发环境就搭建好了。
如果我们想要隐藏下方的版权信息,在下面这句代码
var viewer = new Cesium.Viewer('cesiumContainer');
后面加上下面这句代码就可以实现啦!
viewer._cesiumWidget._creditContainer.style.display="none";
去掉版权信息后如下图,看起来清爽了许多!!!
Cesium学习2:如何从零开始在Eclipse IDE,Java语言搭建cesium开发环境的更多相关文章
- Eclipse+ADT+Android SDK 搭建安卓开发环境
Eclipse+ADT+Android SDK 搭建安卓开发环境 要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2 ...
- Eclipse+ADT+Android SDK 搭建安卓开发环境(版权属于forever-z)
运行环境 windows 7或者10(64位); 为例eclipse-jee-neon-3-win32-x86_64: ADT-23.0.4 下载地址 安装JDK 这里可以参考关于安装JDK的教程,请 ...
- Eclipse+ADT+Android SDK 搭建安卓开发环境(转)
要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2-win32(32位);ADT-23.0.4 下载地址 环境下载 最近 ...
- 在Eclipse平台中,搭建SpringBoot开发环境
1.查看eclipse版本号,Help->About Eclipse IDE 2.下载对应版本的STS插件 下载地址:https://spring.io/tools3/sts/all(注意版本对 ...
- Hadoop学习之路(八)在eclispe上搭建Hadoop开发环境
一.添加插件 将hadoop-eclipse-plugin-2.7.5.jar放入eclipse的plugins文件夹中 二.在Windows上安装Hadoop2.7.5 版本最好与Linux集群中的 ...
- Eclipse+ADT+Android SDK搭建安卓开发环境
第一步:打开[Android.rar]压缩包,如图所示[评论区回复我,压缩包地址] 第二步:配置环境变量 (1) 解压[android-sdk_r24.4.1-windows.zip]压缩包 (2) ...
- ios学习笔记(一)Windows7上使用VMWare搭建iPhone开发环境(转)
原文地址:http://blog.csdn.net/shangyuan21/article/details/18153605 我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是M ...
- java 学习笔记1 java语言概述及开发环境
高级语言运行机制 高级语言按程序的执行方式分为编译型和解释型两种. java语言比较特殊,Java程序的执行必须经过先编译后解释的步骤. 1 编译生成字节码,只面向JVM(.class) 2Jvm执行 ...
- 【分享】01. Eclipse for PHP + phpStudy 搭建php开发环境
配置php编译器 配置phpStudy服务器项目发布目录 修改hosts文件127.0.0.1 www.350zx.cn 新建项目 启动的你的phpStudy
随机推荐
- 【协议】3、HTTP 协议入门
HTTP 协议是互联网的基础协议,也是网页开发的必备知识,最新版本 HTTP/2 更是让它成为技术热点. 本文介绍 HTTP 协议的历史演变和设计思路. 一.HTTP/0.9 HTTP 是基于 TCP ...
- JavaScript函数箭头的优势在哪里
译者按: 看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本 ...
- 【工具相关】Web--nodejs的安装
一,从官网下载nodejs.org. https://nodejs.org/en/ 二,按照步骤一步一步安装就好.
- Hbase简单配置与使用
一. HBase的 二.基于Hadoop的HBase架构 HBase内置有zookeeper,但一般我们会有其他的Zookeeper集群来监管master和regionserver,Zookeeper ...
- Windows下 webpack4.0 的安装
这里我们通过npm来进行安装 1. 安装 webpack // 全局安装webpack npm install webpack -g 2. 通过 webpack -v 命令查看当前安装的版本 此时如果 ...
- linux-nc命令介绍
转载:https://www.cnblogs.com/nmap/p/6148306.html
- node中__dirname、__filename、process.cwd()、process.chdir()表示的路径
直接上结论:__dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径module.filename ==== __filename 等价process.cwd( ...
- JavaScript大杂烩18 - Web开发的MVVM模式
MVC VS. MVP VS. MVVM 了解MVVM模式之前,我们先来简单了解一下从MVC到MVVM的变迁.这个变迁是耦合从紧到松的变迁,是对依赖处理的进化,是应对变化技术的成熟. MVC MV ...
- Redis系列(二):Redis的数据类型及命令操作
原文链接(转载请注明出处):Redis系列(二):Redis的数据类型及命令操作 Redis 中常用命令 Redis 官方的文档是英文版的,当然网上也有大量的中文翻译版,例如:Redis 命令参考.这 ...
- [20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED3.txt
[20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED3.txt --//简单探究12c TABLE ACCESS BY INDEX ROWID BATCH ...