Customizing the entity description

[boriskogan81]

[文档问题] Customizing the entity description

相关文档 URL

https://zouyaoji.top/vue-cesium/#/zh/entity/vc-entity

问题描述

I would like to either inject a Vue component into the entity description property, or at least some html with a link/onclick event. If the former is possible, how do I do this? If not, how do I do the latter? Right now, I get this error when trying to add a link to the description: '
test:1 Blocked script execution in 'https://localhost:8082/communities/community/test' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.' 

改进建议

Add appropriate documentation.

[boriskogan81]

I guess more generally the ability to inject Vue components or full on HTML with Javascript into the Info Box is what I'm asking about.

[zouyaoji]

Vue components are not supported, If you want to use vue components, it is recommended that you implement them instead of using infoBox. but HTML is supported, like this:

<template>
    <div class="viewer">
      <vc-viewer ref="viewer" @ready="ready" @LEFT_CLICK="LEFT_CLICK" @selectedEntityChanged="selectedEntityChanged">
        <vc-entity ref="entity" :position="position" :billboard="billboard" :description="description" :id="id"> </vc-entity>
      </vc-viewer>
      <div ref="bubbleContainer" id="bubbleContainer" hidden>
        <button id="test">Test</button>
      </div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          id: 'This is a billboard',
          description: 'Hello Vue Cesium',
          image: 'https://zouyaoji.top/vue-cesium/favicon.png',
          position: { lng: 108, lat: 35, height: 100 },
          billboard: {}
        }
      },
      mounted() {
        this.$refs.entity.createPromise.then(({ Cesium, viewer, cesiumObject }) => {
          viewer.zoomTo(cesiumObject)
        })
      },
      methods: {
        ready(cesiumInstance) {
          const { Cesium, viewer } = cesiumInstance
          this.viewer = viewer
          this.description = this.$refs.bubbleContainer.innerHTML
          console.log(this.$refs.bubbleContainer)
          this.billboard = new Cesium.BillboardGraphics({
            image: 'https://zouyaoji.top/vue-cesium/favicon.png', // default: undefined
            show: true, // default
            pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
            eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
            scale: 0.5, // default: 1.0
            color: Cesium.Color.LIME, // default: WHITE
            // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
            alignedAxis: Cesium.Cartesian3.ZERO // default
          })
        },
        selectedEntityChanged(entity) {
          console.log(entity)
          if (entity) {
            this.frame = this.viewer.infoBox.frame
            this.frame.contentWindow.addEventListener('click', this.frameClick)
          } else {
            this.frame && this.frame.contentWindow.removeEventListener('click', this.frameClick)
          }
        },
        frameClick(event) {
          console.log('frame clicked')
          if (event.target.id === 'test') {
            console.log('test clicked')
          }
        },
        LEFT_CLICK(movement) {
          const feature = this.viewer.scene.pick(movement.position)
          console.log(feature)
        }
      }
    }
  </script>

https://zouyaoji.top/vue-cesium/#/zh/entity/vc-entity

[boriskogan81]

This is great, thank you.

[zouyaoji]

If it helps you, welcome to star vue-cesium.