zouyaoji / vue-cesium

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

vue的camera属性不会与Viewer的camera属性动态绑定 #16

Closed cehui0303 closed 4 years ago

cehui0303 commented 5 years ago

初始化的时候可以在viwer中设置camera属性,但是在viwer的视图变化时,发现camera的值一直为初始化后的值,不会随着viwer视图变化而改变

zouyaoji commented 5 years ago

嗯 这个目前没有做这个 可以考虑加进去我

zouyaoji commented 4 years ago

我加了这个需求,参考这个代码,为了统一,我把之前的 经度改为 lng 纬度改为 lat了,这个注意一下。

<template>
  <cesium-viewer class="viewer" :animation="animation" :timeline="timeline" :camera.sync="camera" @ready="ready">
    <imagery-layer>
      <openstreetmap-imagery-provider></openstreetmap-imagery-provider>
    </imagery-layer>
  </cesium-viewer>
</template>
<script>
  export default {
    data() {
      return {
        animation: true,
        timeline: true,
        camera: {
          position: {
            lng: 104.06,
            lat: 30.67,
            height: 100000
          },
          heading: 360,
          pitch: -90,
          roll: 0
        }
      }
    },
    methods: {
      ready(cesiumInstance) {
        const { Cesium, viewer } = cesiumInstance
        viewer.entities.add({
          id: '成都欢迎你',
          position: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 100),
          billboard: new Cesium.BillboardGraphics({
            image: 'https://zouyaoji.top/vue-cesium/favicon.png',
            scale: 0.1
          }),
          label: new Cesium.LabelGraphics({
            text: 'Hello Word',
            fillColor: Cesium.Color.GOLD,
            font: '24px sans-serif',
            horizontalOrigin: 1,
            outlineColor: new Cesium.Color(0, 0, 0, 1),
            outlineWidth: 2,
            pixelOffset: new Cesium.Cartesian2(17, -5),
            style: Cesium.LabelStyle.FILL
          })
        })
      }
    }
  }
</script>
<style>
  .viewer {
    width: 100%;
    height: 400px;
  }
</style>