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.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'
    }))

文献链接

问题四、解决 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);
    })

文献链接

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值