vue/cli3整合Cesium，加载离线arcgis 切片

最開始使用webpack進行cesium 集成, 出现了问题一大堆，最后只好选择传统的方法直接引入了，具体操作如下

一、安装cesium
二、使用script引用cesium
三、使用webpack引入cesium
四、使用Geoserve 发布地图服务
五、解决cesium加载资源不允许跨越问题
六、最终效果呈现

一、安装cesium

首选创建一个测试项目 vue create vue-join-cesium

然后直接cd 到项目目录，使用npm 直接拉取cesium

	$ npm install cesium --save

安装成功后会在 node_modules 下看见一个cesium的目录

二、使用script引用cesium

1、切换到 `node_modules/cesium/Build/` 目录

2、将`Cesium`拷贝到项目中的 `public` 目录下

3、在index.html引入 js 与css

4、修改`HelloWorld.vue`



<template>

<div class="test-cesium">

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

</div>

</template>

<script>

    export default {

        data () {

            return {

                viewer :'',

                tileset: '',

            }

        },

        mounted (){

            //103.37324413479338, 29.544684360197113

            var initialLon = 103.37324413479338;

            var lat = 29.544684360197113;

            var height = 10.0;

            // // 创建viewer实例

            this.viewer = new Cesium.Viewer('cesiumContainer', {

                // 需要进行可视化的数据源的集合

                animation: false, // 是否显示动画控件

                shouldAnimate: true,

                homeButton: false, // 是否显示Home按钮

                fullscreenButton: false, // 是否显示全屏按钮

                baseLayerPicker: true, // 是否显示图层选择控件

                geocoder: false, // 是否显示地名查找控件

                timeline: false, // 是否显示时间线控件

                sceneModePicker: true, // 是否显示投影方式控件

                navigationHelpButton: false, // 是否显示帮助信息控件

                infoBox: false, // 是否显示点击要素之后显示的信息

                requestRenderMode: true, // 启用请求渲染模式

                scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存

                sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

                fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处

            })

            // 去除版权信息

            this.viewer._cesiumWidget._creditContainer.style.display = 'none'

            // 将经纬度转换为世界坐标

            var target = Cesium.Cartesian3.fromDegrees(initialLon, lat, height);

            var offset = new Cesium.Cartesian3(-70.06, -68.64, 6.0908)

            this.viewer .scene.camera.lookAt(target, offset);

        }

    }

</script>

<style>

.test-cesium{

  width: 100%;

  height: 100%;

}

</style>

5、修改 package.json

如果使用了eslint 会提示 Cesium 未定义，需要修改 package.json，设置no-undef

6、现在运行看看效果

三、使用webpack引入cesium

打开 vue.config.js

1、module路径声明

const cesiumSource = 'node_modules/cesium/Source';

const cesiumWorkers = '../Build/Cesium/Workers';

2、配置别名

    resolve: {

      alias: {

        // CesiumJS module name

        cesium: path.resolve(__dirname, cesiumSource)

      }

    },

3、资源拷贝

    plugins: [

      // Copy Cesium Assets, Widgets, and Workers to a static directory

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, cesiumWorkers),

        to: 'Workers'

      }]),

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, 'Assets'),

        to: 'Assets'

      }]),

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, 'Widgets'),

        to: 'Widgets'

      }]),

      new webpack.DefinePlugin({

        // Define relative base path in cesium for loading assets

        CESIUM_BASE_URL: JSON.stringify('./')

      })

    ],

当然这一步需要安装 CopywebpackPlugin

 npm i copy-webpack-plugin -D

然后在顶部引入const CopywebpackPlugin = require('copy-webpack-plugin');

4、处理异常警告

    module: {

      unknownContextCritical: /^.\/.*$/,

      unknownContextCritical: false

    }

最终完整内容

'use strict'

const path = require('path')

const webpack = require('webpack')

const cesiumSource = 'node_modules/cesium/Source';

const cesiumWorkers = '../Build/Cesium/Workers';

const CopywebpackPlugin = require('copy-webpack-plugin');

function resolve(dir) {

  return path.join(__dirname, dir)

}

module.exports = {

  configureWebpack: {

    resolve: {

      alias: {

        // CesiumJS module name

        cesium: path.resolve(__dirname, cesiumSource)

      }

    },

    plugins: [

      // Copy Cesium Assets, Widgets, and Workers to a static directory

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, cesiumWorkers),

        to: 'Workers'

      }]),

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, 'Assets'),

        to: 'Assets'

      }]),

      new CopywebpackPlugin([{

        from: path.join(cesiumSource, 'Widgets'),

        to: 'Widgets'

      }]),

      new webpack.DefinePlugin({

        // Define relative base path in cesium for loading assets

        CESIUM_BASE_URL: JSON.stringify('./')

      })

    ],

    module: {

      unknownContextCritical: /^.\/.*$/,

      unknownContextCritical: false

    }

  },

}

5、页面引用

最后页面使用如下

import * as Cesium from "cesium/Cesium";

import "cesium/Widgets/widgets.css";

export default{

	created(){

		var visual =  new Cesium.Viewer('cessiumContainerId')

	}

}

好了到这里使用webpack引入cesium完成，直接npm run dev 应该可以看见相同的一个地球界面了。

四、使用Geoserve 发布地图服务

1、安装geoserve

上面虽然加载cesium成功了，但是我们最终是为了加载一个本地的切片，所以还需要借助Geoserve

Geoserve官网下载 http://geoserver.org/download/

也可以到云盘下载 https://pan.baidu.com/s/1fe6ADFmML6sr3qrMztkVJQ 提取码 xl3h

然后点击 geoserver-2.3.2.exe 进行安装

安装成功后，在如下目录启动Geoserver

然后浏览器输入http://localhost:28080/geoserver/web ，输入安装时的用户名和密码登录

有关shpe 文件的发布请参考 https://blog.csdn.net/sharetm/article/details/54931096 ，这里主要讲一下发布 arcgis 切片

将上面云盘下载的 geowebcache.rar 解压到 webapps目录下

2、修改配置

然后在 geowebcache 目录下创建一个 arcgis 用来缓存 arcgis相关切片

同时找到 web.xml

打开 web.xml 在下增加如下代码



    <context-param>

        <param-name>GEOWEBCACHE_CACHE_DIR</param-name>

		<!-- 下面需 修改为自己上一步创建的真实目录 -->

        <param-value>D:\develop\GeoServer 2.3.2\webapps\geowebcache\arcgis</param-value>

    </context-param>

然后重启 geoserver 会发现刚才创建的 arcgis 下多了好几个文件

然后打开这 geowebcache.xml 文件在 <layers>...</layers> 之间新增 arcgis 切片的目录如下

  <layers>

  .... 省略其他的

	<arcgisLayer>

		<name>fsRoads</name>

		<tilingScheme>D:\YLKJPro\testSource\leshan_ArcGis\conf.xml</tilingScheme>

		<tileCachePath>D:\YLKJPro\testSource\leshan_ArcGis\_alllayers</tileCachePath>

		<hexZoom>false</hexZoom>

	</arcgisLayer>

  </layers>

fsRoads为服务名，GeoWebCache服务页面中可看到改名字，这里随便起的。conf.xml就是ArcGIS Server发布服务设置缓存后生成的配置文件，该目录就是瓦片所在目录，是不是很眼熟？

测试的瓦片云盘 https://pan.baidu.com/s/1GwNcCiclaUa3a7rWiu0VLQ 提取码 6nbc

然后录入 localhost:28080/geowebcache/home 会看将如下页面

再点击红箭头的地方，会进入第二个页面，看如下红箭头的地方就是<name>fsRoads</name> 这里配置的

然后我们点击红框的 [png] 会进入如下的页面，这个就是我们服务发布的地址了

3、项目中调用geoserver

切记不能直接拷贝这个网页上的url作为 cesium 调用服务的地址

如：



	var layers = this.viewer.scene.imageryLayers;

	let arcgis_layer = new Cesium.WebMapTileServiceImageryProvider({

	    url: 'http://localhost:28080/geowebcache/demo/fsRoads',

	    layer : 'EPSG:4326_fsRoads',

	    style : 'default',

	    tileMatrixSetID : 'fsRoads',

	    format : 'image/png'

	});

	layers.addImageryProvider(arcgis_layer);

这样不管怎么搞都访问不到滴，

其实真实的服务地址在 wmts-getcapabilities.xml 中，根据如下步骤下载该xml文件打开，在脚底就是所需服务地址（当初因为不明白这个，自己搞了好几个小时都没对，）

根据如上图我们获得了服务地址和参数，所以将调用方法修改如下



     var layers = this.viewer.scene.imageryLayers;

    let arcgis_layer = new Cesium.WebMapServiceImageryProvider({

         url: "http://localhost:28080/geowebcache/service/wms",

         layers: 'EPSG:4326_fsRoads',

         parameters: {

             'LAYERS': 'fsRoads',

             'FORMAT': 'image/png',

             'SRS': 'EPSG:4326',

             'VERSION': '1.1.1'

         }

     });

     layers.addImageryProvider(arcgis_layer);

4、实际运用

项目中实际运用出现的坑 这里结合我二次项目中使用时，在配置WebMapServiceImageryProvider参数时所遇到的问题，进行再次补充说明，当再次运用该方法加载图层是，由于对这种方式不是太理解，导致刚开始一直无法将图层成功加载，后来明白了要根据发布地址，请求的具体参数来配置

如：

根据请求headers配置参数，得到的方法大致如下

     var layersObj = this.viewer.scene.imageryLayers;

      let arcgis_layer = new Cesium.WebMapServiceImageryProvider({

        url: "http://192.168.1.253:8081/geoserver/jeethink-vue-process/wms",

        layers: 'jeethink-vue-process:louqiaoDom',

        parameters: {

          SERVICE: 'WMS',

          VERSION: '1.1.1',

          REQUEST: 'GetMap',

          FORMAT: 'image/jpeg',

          TRANSPARENT: true,

          SRS: 'EPSG:4549',

          WIDTH: 768,

          HEIGHT: 525,

           BBOX: '446465.16772591084,3710404.2266346747,461124.6482224265,3720425.3558803396'

        },

        tileWidth: 768,

        tileHeight: 525

      });

      layersObj.addImageryProvider(arcgis_layer);

尽管图层加载成功了，但是看如下界面，并不是最终想要的结果

在寻求解决之道是发现有个rectangle属性，于是在

        tileHeight: 525

下添加了一行

 rectangle: new Cesium.Rectangle.fromDegrees(119.46895155311788, 33.53363155152805, 119.54733748522395, 33.57874291923595)

然而最后结果为

出现了一个带背景的图层！

于是只有再次需求解决之法......

最后才发现是自己多加了BBOX rectangle,去掉这两个参数配置就了，最后正确方法如下

  var layersObj = this.viewer.scene.imageryLayers;

      let arcgis_layer = new Cesium.WebMapServiceImageryProvider({

        url: "http://192.168.1.253:8081/geoserver/jeethink-vue-process/wms",

        layers: 'jeethink-vue-process:louqiaoDom',

        parameters: {

          SERVICE: 'WMS',

          VERSION: '1.1.1',

          REQUEST: 'GetMap',

          FORMAT: 'image/jpeg',

          TRANSPARENT: true,

          SRS: 'EPSG:4326',

          WIDTH: 768,

          HEIGHT: 525,

          // BBOX: '446465.16772591084,3710404.2266346747,461124.6482224265,3720425.3558803396',

        },

        tileWidth: 768,

        tileHeight: 525,

        //rectangle: new Cesium.Rectangle.fromDegrees(119.46895155311788, 33.53363155152805, 119.54733748522395, 33.57874291923595)

      });

      layersObj.addImageryProvider(arcgis_layer);

【去掉背景】 这里还有一个容易疏忽的地方---就是加载的影像有一个白色背景，当时就纠结许久，多次查阅官方文档，最后发现竟是format 配置错了，设置image/jpeg会导致transparent：true无效，而出现一个白色背景：

看这个是不带背景色的：

其实就是修改 format 为image/png即可

FORMAT: 'image/png',

五、解决cesium加载资源不允许跨越问题

这里还需要注意跨域问题 ,可根据下面的操作解决跨域问题

1、将cors-filter-2.4.jar和java-property-utils-1.9.1.jar，两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中。

2、打开geoserver目录下webapps\geoserver\web-inf中的web.xml

3、添加过滤器代码：



	<filter>

		<filter-name>CORS</filter-name>

		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

	</filter>

4、添加过滤器路由代码：



	<filter-mapping>

	        <filter-name>CORS</filter-name>

	        <url-pattern>/*</url-pattern>

	</filter-mapping>

5、添加完毕后，重启geoserver

6、如果目录中存在maven，需要在pom.xml中，添加



	<dependency>

		<groupId>com.thetransactioncompany</groupId>

		<artifactId>cors-filter</artifactId>

		<version>[ version ]</version>

	</dependency>

cors-filter-2.4.jar和java-property-utils-1.9.1.jar下载地址 https://pan.baidu.com/s/1R-R0FuzoNd5S2m_fRi3n_g 提取码 rpoi

注意 geowebcache 也需要进行如上几步配置 如图

六、最终效果呈现

需要项目原码可以访问 https://github.com/dengxiaoning/vueCli3-join-cesium-arcgis-images

另外使用 tomcat + GeoServer War包和 GeoWebCache War包来发布服务其实步骤差不多，在官网下载war 放到webapps中重新运行tomcat，然后根据如上配置步骤配置即可；也可以参考https://blog.csdn.net/lynchee/article/details/87978099

官网地址

geoserver war http://geoserver.org/release/2.14.2/

geowebcache war https://sourceforge.net/projects/geowebcache/files/geowebcache/1.16.1/