Cesium结合Vue遇到的问题总集
Cesium结合Vue遇到的问题总集
问题一：
原因：
Ceisum球初始化之后将viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持。
数据劫持的情况表现在viewer 或者viewer.scene 为 observer对象
解决方案1：
1、将viewer放到全局对象当中；
let viewer = new Cesium.Viewer('cesiumContainer');
window.viewer = viewer;
构建一个中间层，通过中间层访问，阻断数据劫持到最底层；（简单说就是vue触发数据变更，然后通知中间件变更的属性，由中间件将变更的属性值通知cesium中相应的属性）；
解决方案2：
class test(){public static update(attribute, value){// 判断逻辑cesium.update()}
}
test.update(xx,xx)
文献链接
问题二：
原因
cesium+vue依赖包下载不了
解决方案：
网上一大批cesium+vue项目配置的文章，我就不多说了，这里推荐一篇文章：
https://blog.csdn.net/m0_37972557/article/details/79768408
但是！cesium在npm上的包下载不下来啊！坑啊，当然也可能是公司网坑。最后找到的方法，直接在官网下载未打包的程序包，扔到node_modules文件夹里就OK了。程序包地址：https://cesiumjs.org/downloads/
npm终于下载成功了，操作：更新npm到最新版本–修改npm源为淘宝镜像–npm install
可是同为淘宝镜像路径的cnpm下载是不成功的。
问题三：
原因
cesium查看模型时相机陷入地面卡死，这个问题是个大问题啊，按住鼠标中键拖动最后还是会陷入地面，不过不会卡死了
解决方案：
// $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'}))
文献链接
问题四、解决 cesium widgets.css is not exported from package
在版本1.9以上版本后，按照官方文档引入css 时
会报错： cesium widgets.css is not exported from package
解决方案：
1.node_modules里找到cesium的package.json文件，在exports里增加导出widgets.css
“./widgets.css”: “./Source/Widgets/widgets.css”,
2. 将 import “cesium/Build/Cesium/Widgets/widgets.css”; 改为 import “cesium/widgets.css”;
问题五、加载Geoserver 发布的 wmts 服务 4326/3857
Cesium加载WMTS地图切片服务，通常有两种坐标系 EPSG 4326 和 EPSG 900913 (标准名为3857)
通常我们加载的是3857 投影的切片 ：
new Cesium.WebMapTileServiceImageryProvider({url : 'http://localhost:7777/geoserver/gwc/service/wmts/rest/testkh:anhuis/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',layer:'testkh:anhuis',style: '',tileMatrixSetID : 'EPSG:900913',})
一旦我们切换到4326 坐标系下，就会报一个瓦片“列（或行）超出范围”的错误，不能正确加载显示瓦片图像。这是因为 WebMapTileServiceImageryProvider的切片方案tilingScheme默认使用EPSG:3875投影，即伪墨卡托网格访问切片，与EPSG:4326网格的切片方案存在较大差异
查阅资料可知：
TilingSchemee有两个子类，为WebMercatorTilingScheme和GeographicTilingScheme。其中WebMercatorTilingScheme对应于EPSG:3857切片方案，常见于谷歌地图、微软必应地图以及大多数的ArcGIS在线地图，也是Cesium中默认的切片方案。
GeographicTilingScheme对应于EPSG:4326切片方案，是一个简单的地理投影方案，可直接将经纬度映射为X和Y，这种投影通常被称为地理投影、等矩形投影、等距圆柱形投影等。
由于在X方向上，WebMercatorTilingScheme只有一个0级瓦片，而GeographicTilingScheme却有2个，这就导致了默认的EPSG:3857切片方案不能正确加载EPSG:4326切片方案的瓦片图像。
那怎么修改呢？
当想要加载EPSG:4326瓦片服务时，只需要创建一个GeographicTilingScheme对象
new Cesium.WebMapTileServiceImageryProvider({url : 'http://localhost:7777/geoserver/gwc/service/wmts/rest/testkh:anhuis/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',layer:'testkh:anhuis',style: '',tileMatrixSetID : 'EPSG:4326',tilingScheme: new Cesium.GeographicTilingScheme()})
问题六、加载 tileset 数据 ，提示 ‘http://localhost:8080/ThirdParty/draco_decoder.wasm 404 ’
首先找到node_modules/cesium/ThirdParty目录
找到draco_decoder.wasm文件。
在项目根目录下的public目录下新建ThirdParty，将draco_decoder.wasm复制进去
清楚缓存，加载即可。。。
问题七、使用 BillboardCollection 或 LabelCollection 时报错：添加不了 heightReference
“Height reference is not supported without a scene and globe.”
解决方法：
在实例化 BillboardCollection 的时候添加参数：
scene:viewer.scene
问题八、管理加载的Entity / Entities
管理单个的Entity，采用的方法是：
利用 entity collection 的getById ，创建的时候附上 id ，然后去找这个id ，没有就创建，有就先移除。进行管理
if (viewer.entities.getById('AAA')) {viewer.entities.remove(viewer.entities.getById('AAA'));}const e = viewer.entities.add({id: 'AAA',polyline: {positions :Cesium.Cartesian3.fromDegreesArray([extent[0],extent[1],extent[2],extent[1],extent[2],extent[3],extent[0],extent[3],extent[0],extent[1],]),width: 10,material:Cesium.Color.RED,clampToGround: true},});viewer.zoomTo(e);
管理 多个 entity ，例如从接口取到一些 geojson 数据，地图上实时渲染，隐藏查询删除等，需要对一批 entities 进行管理，这里举例为加载的 geojson 数据，采用的方法是：
将geojson 数据 加载到 viewer.dataSources 即 Cesium.GeoJsonDataSource，创建的时候附上name 的值，利用 dataSource 的getByName方法，获取到对于的 dataSource即可。
if (viewer.dataSources.getByName('BBB').length>0) {viewer.dataSources.remove(viewer.dataSources.getByName('BBB')[0]);}let d = Cesium.GeoJsonDataSource.load(data,{clampToGround:true,});d.then((dataSource) => {var entities = dataSource.entities.values;for (let i = 0; i < entities.length; i++) {let entity = entities[i];entity.polygon.fill = false;entity.polygon.outline = false;entity.polyline = {positions: entity.polygon.hierarchy._value.positions,width: 5,material: Cesium.Color.RED,clampToGround:true}}viewer.dataSources.add(dataSource);dataSource.name = 'BBB';g_config.globalviewer.flyTo(dataSource);})
文献链接
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！