zouyaoji / vue-cesium

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

[Bug Report] Entity's Event always reporting errors (Entity事件函数总是报错) #194

Closed heibaige123 closed 2 years ago

heibaige123 commented 2 years ago

VueCesium version

3.0.12

OS/Browsers version

windows10 / latest version of chrome

Vue version

3.2.25

Cesium version

1.92.0

Reproduction Link

see description below(见下方描述)

Steps to reproduce

<!-- 
 The error can be reproduced locally, but it seems that the event function does not work in codepen or codesandbox. 
 The error cannot be reproduced
(本地可以复现错误,但是在 codepen 或者 codesandbox 貌似事件函数不起作用。导致错误无法复现)
 -->

<script setup lang="ts">
import { VcViewer, VcDatasourceCustom } from 'vue-cesium';
import type { VcEntityProps } from 'vue-cesium';

const entities = reactive([
  {
    onMouseover: (evt) => {
      console.log('evt: ', evt);
    },
    position: {
      lng: 103.3,
      lat: 33,
    },
    label: {
      text: 'Hello World',
      pixelOffset: [0, 80],
    },
    billboard: {
      image: 'https://zouyaoji.top/vue-cesium/favicon.png',
      scale: 0.5,
    },
  },
]);
</script>

What is Expected?

execute the event function normally(正常执行事件函数)

What is actually happening?

all event functions report the following error(所有事件函数全都报下面这个错误)

Uncaught TypeError: fn is not a function
    at index.ts:181:15
    at Array.forEach (<anonymous>)
    at Object.pickedAction (index.ts:178:21)
    at handleMouseMove (Cesium.js:48:185483)
    at handlePointerMove (Cesium.js:48:191389)
    at HTMLCanvasElement.r (Cesium.js:48:181877)
zouyaoji commented 2 years ago

I don't know how to write it in your template, please provide a reproduction use case. You should be able to reproduce it in codepen with dashes.

不知道你模板中怎么写的,请提供复现用例哈。在codepen中采用短横线写法应该就能重现的。

heibaige123 commented 2 years ago

codesandbox When running the project, a cross-origin error will be reported at first,Close the error popup box and slide the mouse over the entity image to reproduce the error(运行项目,起初会报 cross-origin 错误,关闭报错弹框,将鼠标滑动到entity图片上就会复现错误)

But I found other problems when running the project

  1. 'index.css', the location of this file has changed, but the template in codesandbox is still imported from the old version location.
  2. baseLayerPicker button 's icon is missing.
zouyaoji commented 2 years ago

@heibaige123

Well, I see, it may be a bug. You can currently avoid this problem by binding the onMouseover event to the vc-datasource-custom component tag. For example <vc-datasource-custom name="rail-weather-point" destroy :entities="entities" @mouseover="onMouseover" />

嗯,看见了,可能是bug。你目前可以将onMouseover事件绑定到vc-datasource-custom组件标签上来避免这个问题。例如<vc-datasource-custom name="rail-weather-point" destroy :entities="entities" @mouseover="onMouseover" />

zouyaoji commented 2 years ago

This will be fixed in the next version, thanks for the feedback.

将在下个版本修复此问题,感谢反馈。

heibaige123 commented 2 years ago

Thank you for your efforts to open source.