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

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

零、Cesium简介

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

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

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

7、此外也可以将该Web项目部署到webapps文件夹下,

  之后在浏览器输入如下地址:http://localhost:8080/CesiumStudy/cesium/Apps/HelloWorld.html。我们就可以运行Cesium的HelloWorld demo啦~右上角可以切换各种地图。

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

  如果我们想要隐藏下方的版权信息,在 var viewer = new Cesium.Viewer('cesiumContainer'); 后面加上下面这句代码就可以实现啦~

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

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

猜你喜欢

转载自www.cnblogs.com/rainbow70626/p/10458284.html