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
随机推荐
- IDEA从SVN中导入多模块项目
idea多模块项目的导入 在IntelliJ IDEA中间新建一个空项目,名字可以是svn要检索的的项目名称,原则是开心就好: 现在,我们将我们在svn中的多模块的项目down下来 选中顶部的导航中的 ...
- CSS如何让不相等的字符上下对齐
最后效果: <div class="main"> <span style="font-size:12px;"><dl class= ...
- Mybatis事务管理
一.Mybatis事务 1.事务管理方式 Mybatis中的事务管理方式有两种: 1.JDBC的事务管理机制,即使用JDBC事务管理机制进行事务管理 2.MANAGED的事务管理机制,Mybatis没 ...
- js之全选即点击全选标签可选择全部复选框
目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...
- Window7 上跑 Spark 单机模式
一.下载Spark 下载地址:http://www.eu.apache.org/dist/spark/spark-1.5.2/spark-1.5.2-bin-hadoop2.4.tgz 我这里测试这个 ...
- js动态控制表单表格
js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...
- 【转】ASP.NET Core 依赖注入
DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET Core的DI实现以及对实例 ...
- nginx-2-nginx的反向代理
Nginx服务器的反向代理服务 nginx服务器的反向代理服务是其最常用的重要功能之一,在实际的工作当中应用广泛,涉及的指令也比较多,各类指令完成的功能也不尽相同.
- MySQL主从复制--原理
简介 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重新执行一 ...
- Oracle 启动实例(instance)、打开数据库
Oracle启动实例(instance).打开数据库 by:授客 QQ:1033553122 启动实例(instance).打开数据库 1.开启sqlplus [laiyu@localhost ~ ...