vue/cli3整合Cesium，加载离线arcgis 切片
最開始使用webpack進行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>
注意 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/
浙公网安备 33010602011771号