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.canvaslet camera = $cesiumViewer.cameralet scene = $cesiumViewer.scenescene.screenSpaceCameraController.minimumZoomDistance = 50 // 距离地形的距离？这个值可以多测试几个值，，我这不太好描述$cesiumViewer.clock.onTick.addEventListener(function () {setMinCamera()})var setMinCamera = function () {if (camera.pitch > 0) {scene.screenSpaceCameraController.enableTilt = false}}var startMousePositionvar mousePositionvar handler = new Cesium.ScreenSpaceEventHandler(canvas)handler.setInputAction(function (movement) {mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position)handler.setInputAction(function (movement) {mousePosition = movement.endPositionvar y = mousePosition.y - startMousePosition.yif (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！各种发布图层很难受！

Cesium+Vue过程中遇到的问题相关推荐

[vue] 说说你使用vue过程中遇到的问题（坑）有哪些，你是怎么解决的？
[vue] 说说你使用vue过程中遇到的问题(坑)有哪些,你是怎么解决的? 从详情页返回列表页时, 要保存所有状态, 比如: 滚动条位置, 数据, 下拉数据等当时想用keep-alive, 后来没用 ...
安装VUE过程中出现的4048错误
闭坑指南:安装VUE过程中出现的4048错误我也是试过了好多提供的解决方案,但还是这个最有效第一步打开node.js文件中手动创建的两个文件(node_cache和node_global),右键 ...
记录使用 Vue 过程中遇到的一些技术点
vue 学习资料:https://blog.csdn.net/qq_31126175?type=blog 项目文件及文件夹命名规范:https://www.jianshu.com/p/7e397fc3 ...
记录使用Vue过程中的各种插件及教程（不定时更新）
本文为整理记录本人从18年初开始上手使用Vue以后,针对项目中业务需求所用到的各种插件及教程整理?. 目前市场上常用的三大Vue桌面端UI组件库:Element.iView.Ant Design Vu ...
Vue 实践过程中的几个问题
前言本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家. 本文首发于我的个人blog:obko ...
关于vue框架下载步骤以及过程中可能遇到的问题汇总
1.下载各个版本的vue框架链接介绍 | vue-element-admin 2.下载方法 1.去git网站下载git,如果git已经下载并安装好,该步可以省略 2.去nodejs网站下载node ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...
vue3.x +Cesium vue3.x中安装使用cesium
Vue3.x 项目中如何使用Cesium构建三维地图项目本文列举两种常用使用方法: 1.使用vue-cli-plugin-cesium 插件安装cesium(配置较为简单) 2.安装cesium 手 ...

Cesium+Vue过程中遇到的问题

cesium+vue依赖包下载不了

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

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

加载arcgisServer底图

Cesium+Vue过程中遇到的问题相关推荐

最新文章

热门文章