search

zouyaoji / vue-cesium

🎉 Vue 3.x components for CesiumJS.
https://zouyaoji.top/vue-cesium
MIT License
1.42k stars 310 forks source link

[Bug Report] 使用天地图时设置minimumLevel属性导致页面黑屏卡死 #510

Closed li-zheng-hao closed 5 months ago

li-zheng-hao commented 5 months ago

VueCesium version

3.2.5

OS/Browsers version

windows 10/Google Chrome 121.0.6167.86

Vue version

3.3.11

Cesium version

1.113.0

Reproduction Link

https://github.com/li-zheng-hao/cesiumbugrepo_20240131

Steps to reproduce

  1. 下载重现链接仓库中的项目
  2. 运行npm install、npm run dev，打开浏览器

What is Expected?

由于设置了:minimumLevel="15" ，应该默认打开的层级是15

What is actually happening?

页面卡死，浏览器显示进程无法响应

li-zheng-hao commented 5 months ago

页面结果 ： image

image

li-zheng-hao commented 5 months ago

在codepen中测试下面的代码，页面没有卡住，但是也没有自动切换到15级别的地图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>VueCesium Demo</title>
  </head>
  <body>
    <div id="app">
      <vc-viewer>
    <!-- 注记层 -->
    <vc-layer-imagery  :sort-order="20">
      <vc-imagery-provider-tianditu map-style="cva_c"  :minimumLevel="15" token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
    <vc-layer-imagery  :sort-order="10">
      <vc-imagery-provider-tianditu  :minimumLevel="15"  token="436ce7e50d27eede2f2929307e6b33c0" ref="provider"></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
  </vc-viewer>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/vue-cesium/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/vue-cesium"></script>
    <script>
      var global = globalThis
    </script>
    <script>
      console.log(VueCesium)
      const App = {
        data() {
          return {
            point: {
              pixelSize: 28,
              color: 'red',
            },
            label: {
              text: 'Hello VueCesium',
              pixelOffset: [0, 80],
              fillColor: 'red',
            },
            billboard: {
              image: 'https://zouyaoji.top/vue-cesium/favicon.png',
              scale: 0.5,
            }
          };
        },
        methods: {
          onEntityEvt (e) {
            if (e.type === 'onmouseover') {
              this.billboard = {
                image: 'https://zouyaoji.top/vue-cesium/favicon.png',
                scale: 0.6
              }
            } else if (e.type === 'onmouseout') {
              this.billboard = {
                image: 'https://zouyaoji.top/vue-cesium/favicon.png',
                scale: 0.5
              }
            }
          }
        }
      };
      const app = Vue.createApp(App);
      app.use(VueCesium);
      app.mount("#app");
    </script>
  </body>
</html>
zouyaoji commented 5 months ago

这是cesium的bug，原生也这样。最小层级显隐来控制吧。

zouyaoji commented 5 months ago

这是cesium的bug，原生也这样。最小层级显隐来控制吧。

li-zheng-hao commented 5 months ago

好的