其他分享
首页 > 其他分享> > Cesium+GeoServer部署开发

Cesium+GeoServer部署开发

作者:互联网

目录

1 背景

Cesium是当前最流行的前端3维GIS库之一,结合开源的GeoServer可以快速搭建一套完整的GIS系统。

2 GeoServer安装部署

本文简绍Windows下的安装(下载链接),下到本地后双击开始安装,一路next就,其中一步选择安装类型,推荐Run as a Service,而不是Process。如果选了作为进程安装,点击windows开始栏里的Start GeoServer启动会报错,必须到GeoServer的根目录手动执行启动命令。

安装完后启动GeoServer,请求localhost:8080,以admin用户登录,显示如下页面。

3 处理跨域问题

默认情况下,GeoServer限制了跨域,前端请求GeoServer服务会报错。解决方法为:

  1. GeoServer的根目录下,编辑webapps/geoserver/WEB-INF/web.xml,将下面两处代码的注释删除。
  <filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
      <param-name>chainPreflight</param-name>
      <param-value>false</param-value>
    </init-param>
    <init-param>
      <param-name>allowedOrigins</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>allowedMethods</param-name>
      <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
    </init-param>
    <init-param>
      <param-name>allowedHeaders</param-name>
      <param-value>*</param-value>
    </init-param>
  </filter>

...

    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
  1. 由于是采用Windows Installer安装,服务器为Jetty,去maven官网下载相应版本的两个库:jetty-servlets和jetty-util

然后拷贝到webapps\geoserver\WEB-INF\lib路径下,并重启GeoServer。

4 Cesium环境配置

4.1 安装nodejs

nodejs官网下载Windows Installer并安装。安装完命令行执行node -v显示当前安装的版本。

4.2 Cesium

下载Ceiusm源码,当前最新版本为1.95

git clone -b 1.95 --single-branch https://github.com/CesiumGS/cesium

打包源码

npm install 
npm run release

打包后Build目录下生成了三个文件夹:Cesium、CesiumUnminified、Documentation,区别如下:

4.3 本地开发环境

另起一个项目,将Cesium目录整体拷到项目根目录里。

项目需要挂到Web服务器路径下,Nginx、Apache、IIS,也可以用node、Go起一个Web服务器。本文用gin框架代理静态html,代码见Github

cesium需要利用geoserver发布的WMS服务,核心代码如下:

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

// add geoserver wms layer
var provider = new Cesium.WebMapServiceImageryProvider({
    url: 'http://localhost:8080/geoserver/topp/wms',
    layers: 'topp:states',
    parameters: {
        service : 'WMS',
        format: 'image/png',
        transparent: true,
    }
    }
);

viewer.imageryLayers.addImageryProvider(provider);

服务监听在9001端口,我们打开localhost:9001,便能看到GeoServer发布的WMS地图影像已经覆盖在三维地球表面了。

标签:部署,代码,GeoServer,geoserver,Cesium,根目录,安装
来源: https://www.cnblogs.com/greyxy/p/16518422.html