Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
DuShuYuan opened this issue Feb 16, 2022 · 9 comments
Closed

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

DuShuYuan opened this issue Feb 16, 2022 · 9 comments

Comments

@DuShuYuan
Copy link

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
Copy link
Owner

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

@DuShuYuan
Copy link
Author

DuShuYuan commented Feb 16, 2022 •
edited
Loading

deom：
testvue3.zip

地表高度量算功能咋使用的？还是说功能bug了
Snipaste_2022-02-16_16-05-29
？

@zouyaoji
Copy link
Owner

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

@DuShuYuan
Copy link
Author

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

@zouyaoji
Copy link
Owner

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

@zouyaoji
Copy link
Owner

zouyaoji commented Feb 16, 2022 •
edited
Loading

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

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

@DuShuYuan DuShuYuan mentioned this issue Feb 17, 2022
Closed
@zouyaoji
Copy link
Owner

zouyaoji commented Feb 17, 2022 •
edited
Loading

@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
Copy link
Author

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

@zouyaoji
Copy link
Owner

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

@zouyaoji zouyaoji mentioned this issue Apr 6, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@DuShuYuan @zouyaoji