Cesium+Vue过程中遇到的问题，以及汉化问题

最近一段时间公司要用到三维地图，又用不起完善的arcgis，只能拥抱开源Cesium。下面就说一说我在Cesium中遇到的那些坑。

cesium+vue依赖包下载不了

网上一大批cesium+vue项目配置的文章，我就不多说了，这里推荐一篇文章：
https://www.jianshu.com/p/248a904dbb34

但是！cesium在npm上的包下载不下来啊！坑啊，当然也可能是公司网坑。最后找到的方法，直接在官网下载未打包的程序包，扔到node_modules文件夹里就OK了。程序包地址：https://cesiumjs.org/downloads/

19-06-24更新：半天的测试过后，npm终于下载成功了，操作：更新npm到最新版本–修改npm源为淘宝镜像–npm install

可是同为淘宝镜像路径的cnpm下载是不成功的。

cesium 的 viewer 不能放在vue的data对象中

最开始的时候直接把viewer放在data中使用，发现建筑数据过万直接卡崩溃。

原因：viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持，劫持了太多数据。

解决：将viewer放到全局对象当中

也可以用构建一个中间层，通过中间层访问，阻断数据劫持到最底层（，嫌麻烦，）

cesium查看模型时相机陷入地面卡死

？？？这个问题是个大问题啊，好几个版本了也没正式解决。我也试了各种API没有一个好用的。最后求助google，不过各位大佬写的也是，按住鼠标中键拖动最后还是会陷入地面，不过不会卡死了，这里我试了各种方案，下面推荐一个我个人认为效果最好，最好用的。

// $cesiumViewer 是定义的viewer对象的全局变量
let canvas = $cesiumViewer.canvas
let camera = $cesiumViewer.camera
let scene = $cesiumViewer.scene
scene.screenSpaceCameraController.minimumZoomDistance = 50 // 距离地形的距离？这个值可以多测试几个值，，我这不太好描述

$cesiumViewer.clock.onTick.addEventListener(function () {
	setMinCamera()
})

var setMinCamera = function () {
	if (camera.pitch > 0) {
		scene.screenSpaceCameraController.enableTilt = false
	}
}

var startMousePosition
var mousePosition
var handler = new Cesium.ScreenSpaceEventHandler(canvas)

handler.setInputAction(function (movement) {
	mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position)
	handler.setInputAction(function (movement) {
		mousePosition = movement.endPosition
		var y = mousePosition.y - startMousePosition.y
		if (y > 0) {
			scene.screenSpaceCameraController.enableTilt = true
		}
	}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN)

这其实也是某个大佬写的，我借鉴改了一些，但是我找不到那篇文章了，等我找到再贴链接。。。

加载arcgisServer底图

由于开发的功能不能链接外网，所以各种天地图、arcgis在线底图之类的，全都不能用，只能加载本地arcgisServer发布的图层作为底图。而且cesium专门提供了ArcGisMapServerImageryProvider方法加载arcgis相关图层，我觉得没得问题了。但是！切片请求不到！找了半天发现，ArcGisMapServerImageryProvider这个方法加载的图层的空间参考必须是：102100 (3857) ，如果发布图层的时候自己选择的切片方案，空间参考为4326 (4326) 的图层，不好使。。

如果有人同样有ArcGisMapServerImageryProvider加载arcgisServer图层不成功的话，可以看看你发布的mapServer

这里对不对。如果不对的话，重新发布图层，切片方案直接选择google的默认切片方案就好了。底图添加代码贴一下：

var ArcGisMapServer = new Cesium.ArcGisMapServerImageryProvider({
	url: 'http://192.168.6.240:6080/arcgis/rest/services/XiAn3857/MapServer',
	enablePickFeatures: false
})
viewer.imageryLayers.addImageryProvider(ArcGisMapServer)

当然如果你用天地图的话，也可用，请求代码如下：

// 天地图矢量底图
viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({
	url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=4d133cc2c1d12cea409bb954d40f02c9',
	layer: 'tdtVecBasicLayer',
	style: 'default',
	format: 'image/jpeg',
	tileMatrixSetID: 'GoogleMaps'
}))
// 天地图矢量标注图层    
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
	url: 'http://t6.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=4d133cc2c1d12cea409bb954d40f02c9',
	layer: 'tdtImgAnnoLayer',
	style: 'default',
	format: 'image/jpeg',
	tileMatrixSetID: 'GoogleMapsCompatible'
}))

最后，我是小前端！不是webgis！各种发布图层很难受！
本文转载，原文来源于：https://blog.csdn.net/li11122212/article/details/93167685
然后这里下面是我自己加的：

汉化问题

https://blog.csdn.net/qq_42899245/article/details/114920944

离线地图

公司要求的，我们断网然后还能显示。所以网上百度了一堆
https://blog.csdn.net/qq_42899245/article/details/114685023
希望能帮到你，嘻嘻！！！有啥不懂的欢迎和我交流哦。