- <template>
- <div class="cesiumPopup" id="cesiumPopupID" v-show="AllData.popupShow">
- <div class="title">
- <div class="titleNameIcon"></div>
- <div class="titleNamePP">
- {{ AllData.dataList.roadName }}
- </div>
- <!-- <div class="PopupClosed">
- <el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
- </div> -->
- </div>
- <div
- class="basicInfo"
- style="margin-top: 10px"
- v-if="AllData.dataList.code == 200"
- @click="showStreetLayer()"
- >
- <img :src="AllData.dataList.data.base64" />
- </div>
- </div>
- </template>
-
- <script setup name="popup">
- import { ref, reactive, toRefs, onMounted } from "vue";
- import bus from "@/bus";
-
- const AllData = reactive({
- dataList: {},
- popupShow: false,
- streetPosition: null,
- });
- //街景弹框点击事件
- const showStreetLayer = () => {
- AllData.dataList.RefName = "zhoubianjiejing";
- AllData.dataList.NoPromise = true;
- AllData.dataList.Getmenuarr = [
- {
- menuName: "周边全景",
- moduleName: "zhoubianjiejing",
- pointName: "",
- pointType: "",
- show: true,
- },
- ];
- AllData.dataList.comIDs = ["zhoubianjiejing"];
- bus.emit("DynamicBus", AllData.dataList);
- };
- onMounted(() => {
- bus.on("popupcontent", (params) => {
- console.log("popup接收地图标注点值---111", params);
-
- // 排水弹窗
- if (params.popupInfo.type == "paishuiSupervise") {
- AllData.popupShow = false;
- let data = {
- title: "水位计:" + params.popupInfo.name,
- comIDs: ["JC_dialog", "JC_oldList"],
- SiteNo: params.popupInfo.siteNo,
- };
- bus.emit("publicDialog", data);
- return;
- }
- AllData.streetPosition = params.point;
- AllData.dataList = params.popupInfo;
- let pipePopupDiv = document.getElementById("cesiumPopupID");
-
- let popupCenter,
- center,
- offsets = null;
- if (AllData.dataList.geometry) {
- if (AllData.dataList.geometry.includes("LINESTRING")) {
- popupCenter = turf.center(
- turf.feature(Terraformer.WKT.parse(AllData.dataList.geometry))
- ).geometry.coordinates;
- } else {
- popupCenter = Terraformer.WKT.parse(AllData.dataList.geometry).coordinates;
- }
- center = [popupCenter[0], popupCenter[1]];
- offsets = [-130, 200];
- } else {
- center = [params.point[0], params.point[1] + 0.0005];
- offsets = [-150, 200];
- }
- if (AllData.dataList.pumpCode) {
- AllData.dataList.rainpump = JSON.parse(AllData.dataList.rainpump);
- AllData.dataList.sweagepump = JSON.parse(AllData.dataList.sweagepump);
- }
- AllData.dataList.geometry = `POINT(${params.point.join(" ")})`;
- window.pipePopup = new mapboxL7.Popup({
- html: pipePopupDiv,
- lngLat: {
- lng: popupCenter ? popupCenter[0] : params.point[0],
- lat: popupCenter ? popupCenter[1] : params.point[1],
- },
- anchor: "center",
- offsets: offsets ? offsets : [-90, 130],
- autoClose: false,
- });
- newfiberMap.addPopup(pipePopup);
- newfiberMap.map.easeTo({
- center: center,
- zoom: 18,
- });
- AllData.popupShow = true;
- // 建筑社区弹框
- if (params.popupInfo.type == "HMJZYSQ") {
- AllData.popupShow = false;
- let data = {
- title: params.popupInfo.name,
- comIDs: ["xxinformation"],
- };
- bus.emit("publicDialog", data);
- setTimeout(() => {
- bus.emit("xxinformationList", params);
- }, 100);
- }
- if (AllData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
- if (AllData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
- if (AllData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
- });
- });
- onBeforeUnmount(() => {
- bus.off("popupcontent");
- });
- </script>
-
- <style lang="scss">
- .l7-popup-close-button {
- right: 32px !important;
- top: 32px !important;
- }
- .cesiumPopup {
- width: 100%;
- height: 100%;
- padding: 10px;
- background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
- border-radius: 6px;
- border: 1px solid #6acefe;
- box-shadow: inset 0 0 5px 5px #47eef38a;
- .title {
- background: linear-gradient(
- 90deg,
- rgba(14, 210, 254, 0.5) 0%,
- rgba(31, 221, 255, 0.2) 100%
- );
- background-size: cover;
- display: flex;
- align-items: center;
-
- .titleNameIcon {
- height: 17px;
- width: 14px;
- background: url("@/assets/images/pictureOnMap/titleIcon.png") no-repeat;
- background-size: 100% 100%;
- margin-left: 10px;
- }
- .titleNamePP {
- width: 450px;
- height: 22px;
- font-size: 16px;
- font-family: PingFang SC;
- font-weight: 400;
- color: #b8ecff;
- line-height: 22px;
- margin: 5px;
- overflow: hidden;
- text-overflow: ellipsis; /* 超出宽度后显示省略号 */
- white-space: nowrap; /* 限制不允许换行 */
- &:before {
- // display: block;
- // content: '';
- // width: 3px;
- // height: 16px;
- // background: #00d1ff;
- // margin-right: 10px;
- }
- }
- .PopupClosed {
- position: absolute;
- top: 20px;
- right: 20px;
- z-index: 9999;
- cursor: pointer;
- color: #cee3ecff;
- }
- }
- }
- </style>