Cesium在指定位置显示弹框，并跟随地图移动_cesium 添加js+html自定义弹窗

1. 创建popup.js

function poup() {
};
poup.prototype.viewer = null;
poup.prototype.tackedEntity = null;
poup.prototype.elementName = '';
poup.prototype.width = 0;
poup.prototype.height = 0;
poup.prototype.postRenderHander = null;
poup.prototype.p1 = 0;
poup.prototype.p2 = 0;
/*
@entity 弹出框绑定的entity对象
@viewer 场景中viewer对象
@elementName 弹出框的对象id
*/
poup.prototype.showTrackWithEntity = function (entity, viewer, elementName, p1, p2) {
    var popup = this;
    popup.rset();
    popup.elementName = elementName
    popup.p1 = p1;
    popup.p2 = p2;
    this.trackedEntity = entity;
    var scene = viewer.scene;
    this.viewer = viewer;
    var popupObj = this.getElement();
    if (popupObj)
        popupObj.style.display = 'block';
    scene.postRender.addEventListener(doprepost, this);
};

function doprepost(a, b, c) {
    var popup = this;
    var position;
    if (popup.trackedEntity instanceof Cesium.Entity) {
        var loc = popup.trackedEntity.position ? popup.trackedEntity.position.getValue(b) : '';
        if (!loc) return
        var wgs84 = popup.viewer.scene.globe.ellipsoid.cartesianToCartographic(loc);
        var lon = Cesium.Math.toDegrees(wgs84.longitude);
        var lat = Cesium.Math.toDegrees(wgs84.latitude);
        var height = wgs84.height;
        position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
    } else if (popup.trackedEntity instanceof Cesium.Cartesian3) {
        position = popup.trackedEntity;
    } else if (popup.trackedEntity instanceof Cesium.Cartographic) {
        var wgs84 = popup.trackedEntity;
        var lon = Cesium.Math.toDegrees(wgs84.longitude);
        var lat = Cesium.Math.toDegrees(wgs84.latitude);
        var height = wgs84.height;
        position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
    } else {
        if (popup.trackedEntity instanceof Array) {
            position = Cesium.Cartesian3.fromDegrees(popup.trackedEntity[0], popup.trackedEntity[1], popup.trackedEntity[2]);
        } else {
            position = Cesium.Cartesian3.fromDegrees(popup.trackedEntity["lon"], popup.trackedEntity["lat"], popup.trackedEntity["height"]);
        }
    }

    if (!position || !popup.getElement()) {

        popup.popupClose();
        popup.viewer.scene.postRender.removeEventListener(doprepost, this);
        return
    }
    var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(popup.viewer.scene, position);
    try {
        popup.setWindowsLoc(changedC.x, changedC.y);

    } catch (e) {

    }

    return false;
}

poup.prototype.rset = function () {
    this.popupClose();
    this.width = 0;
    this.height = 0;
    if (this.viewer)
        this.viewer.scene.postRender.removeEventListener(doprepost, this);
    if (this.postRenderHander) {
        this.postRenderHander = null;
    }
    this.viewer = null;
};
poup.prototype.popupClose = function () {
    var obj = this.getElement();
    if (obj) {
        obj.style.display = "none";
    }
};
poup.prototype.isShow = function (isHidden) {
    var obj = this.getElement();
    if (!isHidden) {
        return obj;
    } else {
        var isHidden = $(obj).is(":visible");
        return isHidden;
    }
}
poup.prototype.setWindowsLoc = function (left, top) {
    var popupObj = this.isShow();
    if (popupObj) {
        var wid = popupObj.clientWidth;
        var hei = popupObj.clientHeight;

        // 差距在1之上才修改，防止弹窗跳动的问题
        var diffW = wid - this.width;
        var diffH = hei - this.height;
        if (Math.abs(diffH) > 1 || Math.abs(diffW) > 1) {
            this.width = wid;
            this.height = hei;
        }
        popupObj.style.left = (left - this.width * 0.5 + this.p1) + "px";
        popupObj.style.top = (top - this.height - 120 + this.p2) + "px";
    }
};
poup.prototype.getElement = function () {
    var obj = this.elementName ? document.getElementById(this.elementName) : document.getElementById("popup");

    return obj;

}

export default poup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

2. 自定义弹框组件PopupDialog.vue

<template>
  <div
    class="dialog_container"
    v-show="dialogConfig.show"
    id="dialogIds"
  >
    <!-- 弹窗内容 -->
    <div class="dialog_box">
      <!-- 头部 -->
      <div class="dialog_header_box">
        <div class="dialog_header_title">
          <p :class="{ animate_title: dialogConfig.show }">{{ dialogConfig.dialogMsg.title }}</p>
        </div>
      </div>
      <!-- 内容 -->
      <div class="dialog_content_box">
      	暂无数据
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "WarnDialog",
  components: {},
  props: {
    dialogConfig: {
      default: function () {
        return {
          show: true,
          dialogMsg: {
            title: "标题",
          }
        }
      }
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.dialog_container {
  position: absolute;
  z-index: 1001;
  width: 400px;
  height: 200px;
  background: cadetblue;
  top: 300px;
  .dialog_box {
    width: 100%;
    height: 100%;
    color: #fff;
    .dialog_header_box {
      padding: 20px;
      box-sizing: border-box;
      .dialog_header_title {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #fff;
      }
    }
    .dialog_content_box {
      padding: 0 20px;
    }
  }
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

3. map组件中引入弹框组件

<popup-dialog
        id="popupDialog"
        :dialogConfig="dalogConfig">
</popup-dialog>
1
2
3
4

data() {
    return {
      dalogConfig: {show: false, dialogMsg: {}}
    };
  },
1
2
3
4
5

4. 在点击事件中获取数据并调用弹窗方法

mapClick(_this){
	let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK;
    viewer.screenSpaceEventHandler.removeInputAction(leftclick);
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    // 点击事件
    handler.setInputAction((e) => {
		let pickObj = viewer.scene.pick(e.position);
        if (pickObj) { //点击实体
	        if(pickObj.id){
	        	 if(pickObj.id.properties._type._value === 'point'){//当前实体的类型  
	            	//当前实体的属性信息
	                let trafficObj = pickObj.id.properties._details._value; 
	                this.dalogConfig= {
			          show: true,
			          dialogMsg: {
			          	title: trafficObj.name,
			          }
			        }
	                //打开弹窗
	                openPopup({
			          type: "point",
			          position: trafficObj.position,
			          dialogid: "popupDialog",
			          p1: 260, //左偏移
         			  p2: 220//上偏移
			        }); 
	            }
	        }
            if (e && e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true
            }
            return
        }  
    }, leftclick)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

5. 调用popup.js打开弹框

import popup from "./popupForP";
openPopup(handle) {
    if (handle && handle.type == '') return;
    let viewer = getViewer();
    let entityItem = new Cesium.Entity({
        position: Cesium.Cartesian3.fromDegrees(handle.position[0], handle.position[1], handle.position[2]),
        point: {},
    });
    let p = new popup();
    p.showTrackWithEntity(
        entityItem,
        viewer,
        handle.dialogid,
        handle.p1,
        handle.p2
    );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17