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等效的Cesium似乎是“ pick”事件，令人沮丧的是，VC API似乎没有暴露该事件。看起来您可能可以在查看器上使用LEFT_CLICK事件，并使用它来找到单击的实体。 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，答案出现在这里：https://github.com/zouyaoji/vue-cesium/issues/41#issuecomment-563029965。

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

如何通过引用将onclick事件添加到Vue元素？

2 个答案: