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

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

一、安装cesium

首选创建一个测试项目 vue create vue-join-cesium
然后直接cd 到项目目录，使用npm 直接拉取cesium

	$ npm install cesium --save

安装成功后会在 node_modules 下看见一个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、现在运行看看效果

在这里插入图片描述

三、使用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目录下
在这里插入图片描述

然后在 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/1qFDS60Xsfy_b7si9hGZ4vA 提取码 minb
在这里插入图片描述

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

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

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

切记不能直接拷贝这个网页上的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);

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

四、解决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/
在这里插入图片描述