# AAA-vueCesiumCustomMessageBox

**Repository Path**: wwwKit/aaa-vue-cesium-custom-message-box

## Basic Information

- **Project Name**: AAA-vueCesiumCustomMessageBox
- **Description**: 在vue里使用cesium,并自定义弹框样式
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-25
- **Last Updated**: 2021-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AAA-vueCesiumCustomMessageBox

> ## 弹框组件

```html
<div
  class="window-container"
  :style="`left: ${left}px;bottom: ${bottom}px;`"
  v-if="show"
>
  <!--这里是你自定义样式内容-->
</div>
```

```JavaScript
props:{
    //你传入的要展示的东西
    info:Object,
    //双向绑定中间值,因为子组件不能直接修改props值
    middleShow:{
        type:Boolean,
        default:false
    }
}
setup(){
    const show = ref(false);
    //这里很奇怪,我用watcheEffect自己写的时候,没有问题.项目里用watchEffect就监听不到props的改变
    watch(
        () => props.middleShow,
        (newVal, oldVal) => {
        show.value = props.middleShow;
        //在监听到父组件要求显示,要去重新计算窗口值
        showBox();
        }
    );
    //卡片自己控制的关闭
     function closeClick() {
      show.value = false;
      //同时通知父组件更新
      emit("update:middleShow", false);
    }

    //css绑定绝对定位用
    let bottom = ref(0);
    let left = ref(0);


    let viewer = null
    let canvasHeight=0
    let windowPosition={}
    function showBox() {
        viewer = store.state.viewer;
        //这里的事件是实时更新的
        viewer.scene.postRender.addEventListener(() => {
            canvasHeight = viewer.scene.canvas.height;
            windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            props.position,
            windowPosition
            );
            bottom.value = canvasHeight - windowPosition.y + 250;
            left.value = windowPosition.x - 175;
        });
    }

    return { closeClick, bottom, left, show };

}

```

> ## 父组件

```html
<window
  v-for="(item, index) in monitors"
  :key="index"
  :position="item.position"
  v-model:middleShow="item.show"
></window>
```

```JavaScript
setup() {
    const monitors = ref([
      {
        id: "1111",
        show: false,
        name: "北京西路与北京路交叉口",
        ip: "42.23.33.23",
        type: "固定枪机",
        state: "在线",
        position: {
          x: -1573842.0351617213,
          y: 5327906.719968858,
          z: 3122733.541764769,
        },
      },
      {
        id: "2222",
        show: false,
        name: "阿化修理店门口",
        ip: "42.23.33.22",
        type: "固定枪机",
        state: "在线",
        position: {
          x: -1573743.4786981696,
          y: 5327995.971373521,
          z: 3122666.986937621,
        },
      },
    ]);
    //一般业务是,点击实体,弹出弹框的
    function initWindow() {
      //先根据数据生成cesium实体
      monitors.value.forEach((item) => {
        store.state.viewer.entities.add({
          position: item.position,
          info: item,//在cesium实体对象上绑定info信息
          billboard: {
            image: "static/img/icon_jiankong.png",
            scaleByDistance: new Cesium.NearFarScalar(500, 1, 1200, 0.8),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              10000
            ),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
      });
      //监听实体点击事件
      store.state.viewer.selectedEntityChanged.addEventListener((e) => {
          //获取实体绑定的id
        let id = e.info.id;
        //对应找到数组中的响应式对象,修改双向绑定的显示属性值
        monitors.value.forEach((element) => {
          if (element.id == id) {
            element.show = true;
          }
        });
      });
    }
    return { monitors, initWindow };
  },
```