| | |
| | | <i class="popup-icon start-nav deblurring"></i> |
| | | 出发 |
| | | </li> |
| | | <li v-show="false" @click="qrCodeClick"> |
| | | <li v-show="pupupQRUrl != ''" @click="qrCodeClick"> |
| | | <i class="popup-icon qr-code-nav deblurring"></i> |
| | | 二维码 |
| | | </li> |
| | |
| | | id="FullScreenBox" |
| | | > |
| | | <div class="title"> |
| | | <img |
| | | @click="returnDetailsPopup" |
| | | class="return-btn" |
| | | src="/img/icon/return.png" |
| | | alt |
| | | /> |
| | | {{ stateName }} |
| | | <img |
| | | @click="screen" |
| | |
| | | <div class="monitor-wrap"> |
| | | <div class="content-wrap"> |
| | | <div class="title"> |
| | | <img |
| | | @click="returnDetailsPopup" |
| | | class="return-btn" |
| | | src="/img/icon/return.png" |
| | | alt |
| | | /> |
| | | {{ stateName }} |
| | | <img |
| | | @click="closeMonitorPopupBox" |
| | |
| | | <div class="arrow-rb"></div> |
| | | <div class="label-wrap"> |
| | | <div class="title"> |
| | | {{ nowlabelLayerData.name }} 二维码分享 |
| | | {{ nowlabelLayerData.name }} |
| | | <img |
| | | @click="closelabelLayerid" |
| | | class="close-box" |
| | |
| | | </div> |
| | | |
| | | <!-- 新增编辑标签 --> |
| | | <div v-if="addIconsLayerIconPopup" class="monitor-dom" id="leftNavsAdd"> |
| | | <div |
| | | v-if="addIconsLayerIconPopup" |
| | | class="monitor-dom add-sign-box-style" |
| | | id="leftNavsAdd" |
| | | > |
| | | <div style="width: 100%; height: 100%"> |
| | | <div class="divForms divForms-theme"> |
| | | <div class="divForms-wrap"> |
| | |
| | | placeholder="请输入标签名称" |
| | | class="addIconFromInput" |
| | | > |
| | | <template slot="prepend">标题:</template |
| | | ><i |
| | | slot="suffix" |
| | | class="el-icon-edit el-input__icon addIconFromInputicon" |
| | | ></i> |
| | | <template slot="prepend">标题:</template> |
| | | </el-input> |
| | | <img |
| | | @click="closeaddIconsLayerIconPopup" |
| | |
| | | :modal-append-to-body="false" |
| | | :append-to-body="true" |
| | | > |
| | | <img width="100%" :src="dialogImageUrl" alt="" /> |
| | | <img width="100%" :src="dialogImageUrl" alt /> |
| | | </el-dialog> |
| | | </div> |
| | | <div |
| | |
| | | name: "mapPopup", |
| | | |
| | | data() { |
| | | let apiUrls = window.$apiUrls; |
| | | return { |
| | | ourImages: [], |
| | | dialogImageUrl: "", |
| | | dialogVisible: false, |
| | | apiUrls: $apiUrls, |
| | | DC: null, |
| | | apiUrls: null, |
| | | tabBtnFlag: "教学科研行政", |
| | | QRCodeFlag: false, |
| | | audioSource: "", |
| | |
| | | fullscreen: false, |
| | | fullScreenUrl: "/img/icon/bigScreen.png", |
| | | addTagName: "", |
| | | addTagLayer: null, |
| | | addIconFromcolumn: [ |
| | | //顺序不要随便换 |
| | | // 顺序不要随便换 |
| | | { |
| | | label: "名称", |
| | | prop: "mechanismname", |
| | |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | "viewer", |
| | | "popupBgUrl", |
| | | "pupupQRUrl", |
| | | // 终点 |
| | |
| | | "campusNavFlag", |
| | | "addTagPopup", |
| | | "addTagPosition", |
| | | //自定义标签弹窗 |
| | | // 自定义标签弹窗 |
| | | "labelLayerDataShow", |
| | | "nowlabelLayerData", |
| | | "addIconsLayerIconPopup", //自定义标签编辑窗口 |
| | | "addIconsLayerIconPosition", //自定义标签坐标 |
| | | "addIconsLayerIconPopup", // 自定义标签编辑窗口 |
| | | "addIconsLayerIconPosition", // 自定义标签坐标 |
| | | ]), |
| | | }, |
| | | created() { |
| | | this.DC = global.DC; |
| | | this.apiUrls = window.$apiUrls; |
| | | |
| | | this.audioSynth = window.speechSynthesis; |
| | | this.audioMsg = new window.SpeechSynthesisUtterance(); |
| | |
| | | this.audioCourse = false; |
| | | }; |
| | | }, |
| | | mounted() {}, |
| | | mounted() { |
| | | global.viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | }, |
| | | watch: { |
| | | addIconsLayerIconPopup() { |
| | | if (this.addIconsLayerIconPopup) { |
| | | this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0]; |
| | | this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1]; |
| | | } else { |
| | | for (let k in this.addIconFromcolumn) { |
| | | for (const k in this.addIconFromcolumn) { |
| | | if (k == 2) { |
| | | this.addIconFromcolumn[k].value = "红旗校区"; |
| | | this.addIconFromcolumn[k].valueid = "1"; |
| | |
| | | this.addIconFromcolumn[k].value = ""; |
| | | } |
| | | this.ourImages = []; |
| | | this.$store.commit("set_closeMapClick", false); //开启其他操作 |
| | | this.$store.commit("set_closeMapClick", false); // 开启其他操作 |
| | | } |
| | | }, |
| | | addTagPopup() { |
| | |
| | | for (var k in this.ourImages) { |
| | | imgs.push(this.ourImages[k].response); |
| | | } |
| | | let d = { |
| | | const d = { |
| | | tpurl: imgs.join(","), |
| | | mechanismname: this.addIconFromcolumn[0].value, |
| | | telephone: this.addIconFromcolumn[1].value, |
| | |
| | | } |
| | | |
| | | // eslint-disable-next-line new-cap |
| | | var positions = this.DC.Transform.transformWGS84ToCartesian( |
| | | var positions = global.DC.Transform.transformWGS84ToCartesian( |
| | | // eslint-disable-next-line new-cap |
| | | new this.DC.Position.fromArray(this.pointPosition) |
| | | new global.DC.Position.fromArray(this.pointPosition) |
| | | ); |
| | | this.viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | |
| | | // eslint-disable-next-line no-unused-vars |
| | | var panorama = new this.DC.PanoramaBox(this.viewer, { |
| | | var panorama = new global.DC.PanoramaBox(global.viewer, { |
| | | domId: "PanoramaBox", |
| | | position: [positions], |
| | | }); |
| | |
| | | this.audioCourse = false; |
| | | } |
| | | // eslint-disable-next-line new-cap |
| | | var positions = this.DC.Transform.transformWGS84ToCartesian( |
| | | var positions = global.DC.Transform.transformWGS84ToCartesian( |
| | | // eslint-disable-next-line new-cap |
| | | new this.DC.Position.fromArray(this.pointPosition) |
| | | new global.DC.Position.fromArray(this.pointPosition) |
| | | ); |
| | | this.viewer.scene.globe.depthTestAgainstTerrain = false; |
| | | // eslint-disable-next-line no-unused-vars |
| | | var monitor = new this.DC.PanoramaBox(this.viewer, { |
| | | var monitor = new global.DC.PanoramaBox(global.viewer, { |
| | | domId: "MonitorBox", |
| | | position: [positions], |
| | | }); |
| | | this.$store.commit("SET_PANORAMAPOPUP", false); |
| | | this.$store.commit("SET_DETAILSPOPUP", false); |
| | | this.$store.commit("SET_MONITORPOPUP", true); |
| | | }, |
| | | |
| | | returnDetailsPopup() { |
| | | var positions = global.DC.Transform.transformWGS84ToCartesian( |
| | | // eslint-disable-next-line new-cap |
| | | new global.DC.Position.fromArray(this.pointPosition) |
| | | ); |
| | | |
| | | // eslint-disable-next-line no-unused-vars |
| | | var divBox = new global.DC.PanoramaBox(global.viewer, { |
| | | domId: "divFormsDomBox", |
| | | position: [positions], |
| | | }); |
| | | |
| | | global.viewer.zoomToPosition( |
| | | // eslint-disable-next-line new-cap |
| | | new global.DC.Position.fromArray(this.pointPosition) |
| | | ); |
| | | |
| | | this.$store.commit("SET_DETAILSPOPUP", true); |
| | | this.$store.commit("SET_MONITORPOPUP", false); |
| | | this.$store.commit("SET_PANORAMAPOPUP", false); |
| | | }, |
| | | |
| | | closeMapPopupBox() { |
| | |
| | | |
| | | this.$store.commit("SET_ADDTAGPOPUP", false); |
| | | |
| | | // if (this.addTagLayer == null) { |
| | | // this.addTagLayer = new this.DC.HtmlLayer("addTagLayer"); |
| | | // this.viewer.addLayer(this.addTagLayer); |
| | | // } |
| | | |
| | | // 2022.3.2对接接口 |
| | | // 新增标签 |
| | | const data = { |
| | |
| | | wd: this.addTagPosition.lat, |
| | | }; |
| | | // console.log(data); |
| | | let oks = setTimeout(() => { |
| | | that.$message({ |
| | | message: "新增标签失败", |
| | | type: "warning", |
| | | }); |
| | | }, 5000); |
| | | setlabel(data).then((res) => { |
| | | console.log(res); |
| | | clearTimeout(oks); |
| | | if (res.data.code == 200) { |
| | | doit(); |
| | | that.$message({ |
| | |
| | | // list: [data], |
| | | add: true, |
| | | }); |
| | | // const divIcon = new this.DC.DivIcon( |
| | | // new that.DC.Position( |
| | | // Number(that.addTagPosition.lng), |
| | | // Number(that.addTagPosition.lat), |
| | | // 0 |
| | | // ), |
| | | // ` |
| | | // <div class="tag-entitys-box"> |
| | | // <div class="tag-content"> |
| | | // ${that.addTagName} |
| | | // </div> |
| | | // <div class="tag-angle-content"> |
| | | // <img src="https://map.hit.edu.cn/images/tarrow_xq.png"> |
| | | // </div> |
| | | // </div> |
| | | // ` |
| | | // ); |
| | | // this.addTagLayer.addOverlay(divIcon); |
| | | }; |
| | | }, |
| | | |
| | |
| | | } |
| | | |
| | | this.newPopup(result); |
| | | this.viewer.flyToPosition( |
| | | new this.DC.Position( |
| | | global.viewer.flyToPosition( |
| | | new global.DC.Position( |
| | | Number(result.jd), |
| | | Number(result.wd), |
| | | 300, |
| | |
| | | }, |
| | | |
| | | newPopup(item) { |
| | | const position = this.DC.Transform.transformWGS84ToCartesian( |
| | | new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd)) |
| | | const position = global.DC.Transform.transformWGS84ToCartesian( |
| | | new global.DC.Position( |
| | | Number(item.jd), |
| | | Number(item.wd), |
| | | Number(item.gd) |
| | | ) |
| | | ); |
| | | // eslint-disable-next-line no-unused-vars |
| | | var popup = new this.DC.DivForms(this.viewer, { |
| | | var popup = new global.DC.DivForms(global.viewer, { |
| | | domId: "divFormsDomBox", |
| | | position: [position], |
| | | }); |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss"> |
| | | .labelLayeridewm { |
| | | width: 250px !important; |
| | | height: 250px !important; |
| | | } |
| | | |
| | | .add-sign-box-style { |
| | | input:-moz-placeholder, |
| | | textarea:-moz-placeholder { |
| | | color: #fff; |
| | | } |
| | | input:-ms-input-placeholder, |
| | | textarea:-ms-input-placeholder { |
| | | color: #fff; |
| | | } |
| | | input::-webkit-input-placeholder, |
| | | textarea::-webkit-input-placeholder { |
| | | color: #fff; |
| | | } |
| | | |
| | | .addIconsLayerinimgs { |
| | | margin-top: 4px; |
| | | } |
| | | |
| | | .addIconsLayerin { |
| | | padding: 0 10px; |
| | | } |
| | | } |
| | | </style> |