最開始使用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

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);

}

}

.test-cesium{

width: 100%;

height: 100%;

}

5、修改 package.json

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

6、现在运行看看效果

三、使用Geoserve 发布地图服务

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

然后点击 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 在 下增加如下代码

GEOWEBCACHE_CACHE_DIR

D:\develop\GeoServer 2.3.2\webapps\geowebcache\arcgis

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

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

.... 省略其他的

fsRoads

D:\YLKJPro\testSource\leshan_ArcGis\conf.xml

D:\YLKJPro\testSource\leshan_ArcGis\_alllayers

false

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

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

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

然后我们点击红框的 [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、添加过滤器代码：

CORS

com.thetransactioncompany.cors.CORSFilter

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

CORS

/*

5、添加完毕后，重启geoserver

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

com.thetransactioncompany

cors-filter

[ version ]

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

五、最终效果呈现

另外使用 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/