如何通过 ref 向 Vue 元素添加 onclick 事件？

Question

我正在使用 Vue Cesium，并且在从我添加到我的地图的各种 Vue 元素中获得所需的行为时遇到了一些麻烦。具体来说，我想获取元素的 ID（使用 v-for 以编程方式创建）并使用它分派一个动作。我可以向元素添加引用。有没有一种方法可以通过 ref 以编程方式向元素添加 onclick 操作？如果有一种更有机的方式我可以为此使用 Cesium 库，那就更好了。

这是相关元素：

div class="viewer">
            <vc-viewer :terrainExaggeration="100" @ready="ready" :camera="camera">
                <div v-if="billboards.length > 0" v-for="billboard in billboards">
                    <vc-entity :ref="billboard.id" @click="selectCommunity(billboard.id)" :position="billboard.position" :billboard="billboard" :description="billboard.description" :id="billboard.id.toString()"> </vc-entity>
                </div>
                <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast">
                    <vc-provider-imagery-bingmaps :url="url" :bmKey="bmKey" :mapStyle="mapStyle">
                    </vc-provider-imagery-bingmaps>
                </vc-layer-imagery>
            </vc-viewer>
        </div>

Answer 1

相当于 click 的铯似乎是 "pick" 事件，令人沮丧的是，VC API 似乎没有暴露该事件。您似乎可以使用 LEFT_CLICK event on the viewer and use it to find the clicked entity. This SO question 显示了从查看器上的事件定位实体的示例。

通过将上面的两个参考与您的示例结合起来尝试示例实现，这样的事情可能会起作用：

<template>
    <vc-viewer :terrainExaggeration="100"
               @ready="ready"
               :camera="camera"
               ref="viewer"
               @LEFT_CLICK="onClick"
    >
        <vc-entity v-for="billboard in billboards"
                   :ref="billboard.id"
                   :position="billboard.position"
                   :billboard="billboard"
                   :description="billboard.description"
                   :id="billboard.id.toString()"
        />
        <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast">
            <vc-provider-imagery-bingmaps :url="url" :bmKey="bmKey" :mapStyle="mapStyle">
            </vc-provider-imagery-bingmaps>
        </vc-layer-imagery>
    </vc-viewer>
</template>

<script>
export default {
  // ...ext'g
  methods: {
    // ...ext'g
    onClick (click) {
      const viewer = this.$refs.viewer;
      const pickedObject = viewer.scene.pick(click.position);
      if (Cesium.defined(pickedObject)) {
        const entityId = pickedObject.id._id;
        this.selectCommunity(entityId);
      }
    }
  }
}
</script>

（完全不相关的注意事项：没有必要将 vc-entity 包裹在 div 中，它可能会导致不必要的副作用。）

Answer 2

答案，感谢Zouyaoji, appears here: https://github.com/zouyaoji/vue-cesium/issues/41#issuecomment-563029965。

简而言之，vc-viewer 元素有两个事件可用于此：LEFT_CLICK 和 selectedEntityChanged。

如何通过 ref 向 Vue 元素添加 onclick 事件？

How do I add an onclick event to a Vue element by ref?

cesium

vue.js

vuejs2