[Bug Report] 和CesiumVectorTile 一起使用报错

DuShuYuan commented 2 years ago

VueCesium version

3.0.9

OS/Browsers version

windows

Vue version

3.2.31

Cesium version

1.90.0

Reproduction Link

https://codepen.io/zouyaoji/pen/sdsasasdasd

Steps to reproduce

在ready函数中加载本地shp文件

onViewerReady ({ Cesium, viewer }) {

            // eslint-disable-next-line no-unused-vars
            var worldLayer = null
            // eslint-disable-next-line no-unused-vars
            var worldProvider = new VectorTileImageryProvider({
                source: 'http://localhost:1379/map/shp/区域_全球国界.shp',
                defaultStyle: {
                    outlineColor: 'rgb(255,0,0)',
                    lineWidth: 1,
                    fill: false,
                    tileCacheSize: 200,
                    showMaker: false,
                    showCenterLabel: true,
                    fontColor: 'rgba(255,0,0,1)',
                    labelOffsetX: -10,
                    labelOffsetY: -5,
                    fontSize: 13,
                    fontFamily: '黑体',
                    centerLabelPropertyName: 'NAME'
                },
                maximumLevel: 20,
                minimumLevel: 1,
                simplify: false
            })
            worldProvider.readyPromise.then(function () {
                worldLayer = viewer.imageryLayers.addImageryProvider(worldProvider)
            })
        }

报错信息： Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'defaultAccessToken') at load (webpack-internal:///./node_modules/vue-cesium/es/components/viewer/src/useViewer.mjs:487:28)

What is Expected?

。。

What is actually happening?

。。。

zouyaoji commented 2 years ago

请提供一个重现的demo我晚上看看。

DuShuYuan commented 2 years ago

deom： testvue3.zip

地表高度量算功能咋使用的？还是说功能bug了

？

zouyaoji commented 2 years ago

嗯高度量算bug了。下个版本修复哈

DuShuYuan commented 2 years ago

还有个问题，开发过程中，时间稍微久一点，运行就特别卡，画个线、圈啥的跟幻灯片一样。。。关闭标签页重新打开也一样，除非关闭浏览器再打开就很流畅了

zouyaoji commented 2 years ago

如果你打开在线文档有没有你说的这个情况？

zouyaoji commented 2 years ago

@DuShuYuan 我刚看了一下，暂不明咋回事。导入了CesiumVectorTile，Cesium被修改了。

我大概看了一下CesiumVectorTile代码，那里面单独依赖require引入了Cesium的一个版本，估计是版本老一点，没有Cesium.Ion等资源，然后报错了哈。这个只有看原作者要不要解决了。

zouyaoji commented 2 years ago

@DuShuYuan 我又斟酌了一下，出现这个问题的原因是导入CesiumVectorTile时候，vue-cesium还没完成初始化，导入时CesiumVectorTile那边就没识别到Cesium对象，就引了它自带的一个Cesium，而这个Cesium版本比较老，和vue-cesium不兼容。

所以你这儿要保证导入CesiumVectorTile的时候Cesium已经被引入了，就能避免这个问题。提供一个解决办法，在index.html引入Cesium：

<!--
 * @Author: zouyaoji@https://github.com/zouyaoji
 * @Date: 2022-02-17 00:07:14
 * @LastEditTime: 2022-02-17 09:10:09
 * @LastEditors: zouyaoji
 * @Description:
 * @FilePath: \testvue3\public\index.html
-->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css"></link>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这样vue-cesium和CesiumVectorTile直接就能识别到index.html中引入的Cesium了，都不会再去引入Cesium了，从而避免这个问题。 https://github.com/zouyaoji/vue-cesium/blob/dev/packages/components/viewer/src/useViewer.ts#L946

https://github.com/MikesWei/CesiumVectorTile/blob/master/src/VectorTileImageryProvider-light.js#L17

DuShuYuan commented 2 years ago

多谢！这样可以了！ index中引入后就不用再等 vcready函数后才能使用cesium类了，这样感觉更好

zouyaoji commented 2 years ago

确实哈，不过我也很少这么引用，如果有问题你再另开issue了。

zouyaoji / vue-cesium