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

Cesium+Vue过程中遇到的问题,以及汉化问题_第1张图片
这里对不对。如果不对的话,重新发布图层,切片方案直接选择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
然后这里下面是我自己加的:

汉化问题

Cesium+Vue过程中遇到的问题,以及汉化问题_第2张图片
https://blog.csdn.net/qq_42899245/article/details/114920944

离线地图

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

你可能感兴趣的:(那些年我们踩过的坑,cesium,vue,javascript)