vue/cli3整合Cesium，加載離線arcgis 切片

最開始使用webpack進行cesium 集成, 出現了問題一大堆，最后只好選擇傳統的方法直接引入了，具體操作如下

目錄

• 一、安裝cesium
• 二、使用script引用cesium
  • 1、切換到 node_modules/cesium/Build/ 目錄
  • 2、將Cesium拷貝到項目中的 public 目錄下
  • 3、在index.html引入 js 與css
  • 4、修改HelloWorld.vue
  • 5、修改 package.json
  • 6、現在運行看看效果
• 三、使用webpack引入cesium
  • 1、module路徑聲明
  • 2、配置別名
  • 3、資源拷貝
  • 4、處理異常警告
  • 5、頁面引用
• 四、使用Geoserve 發布地圖服務
  • 1、安裝geoserve
  • 2、修改配置
  • 3、項目中調用geoserver
  • 4、實際運用
• 五、 解決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/