| | |
| | | <div id="sdkContainer"></div> |
| | | <layerTreeTwoScreen v-if="layerTreeTwoScreen" /> |
| | | <!-- <div id="bottomInfo" v-html="bottomInfo"></div> --> |
| | | |
| | | <div |
| | | id="switchImagerLayer" |
| | | :style="{ |
| | | transform: `scale(${scale}) translate(${offset},${offset})`, |
| | | '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-moz-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-o-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-ms-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | }" |
| | | > |
| | | <transition |
| | | name="animate__animated animate__bounce" |
| | | @click="switchImagerLayerShowOrHide" |
| | | enter-active-class="animate__backInRight" |
| | | leave-active-class="animate__backOutRight" |
| | | appear |
| | | > |
| | | <div id="switchImagerLayer" :style="{ |
| | | transform: `scale(${scale}) translate(${offset},${offset})`, |
| | | '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-moz-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-o-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | '-ms-transform': `scale(${scale}) translate(${offset},${offset})`, |
| | | }"> |
| | | <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide" |
| | | enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear> |
| | | <switchImagerLayer v-show="switchImagerLayer" /> |
| | | </transition> |
| | | |
| | | <img |
| | | class="swichImg" |
| | | @click="switchImagerLayerShowOrHide" |
| | | :src="switchImage" |
| | | /> |
| | | <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" /> |
| | | <div class="bgbox"> |
| | | <img |
| | | class="swichImg" |
| | | @click="switchImagerLayerShowOrHide" |
| | | src="@/assets/img/new/shiliang.png" |
| | | /> |
| | | <img |
| | | class="swichImg bgbox" |
| | | @click="switchImagerLayerShowOrHide" |
| | | src="@/assets/img/new/shiliang.png" |
| | | /> |
| | | <img class="swichImg" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" /> |
| | | <img class="swichImg bgbox" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import sanwei from "@/assets/img/new/sanwei.png"; |
| | | import jiejing from "@/assets/img/new/jiejing.png"; |
| | | import "animate.css"; |
| | | |
| | | import Bus from "@tools/Bus"; |
| | | export default { |
| | | name: "viewer", |
| | | components: { |
| | |
| | | window.sgworld = new SmartEarth.EarthCtrl( |
| | | "sdkContainer", |
| | | { |
| | | StaticFileBaseUrl: "../../../static/CimSDK/", |
| | | // StaticFileBaseUrl: "../../../static/CimSDK/", |
| | | StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/", |
| | | }, |
| | | {}, |
| | | {}, |
| | |
| | | // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; |
| | | Viewer.scene.globe.translucency.frontFaceAlpha = 0.5; |
| | | Viewer.scene.globe.undergroundColor = undefined; |
| | | //标会编辑 |
| | | //开启编辑并启用属性弹窗 |
| | | sgworld.Creator.SimpleGraphic.setEdit(true, { |
| | | editProp: true, |
| | | editPropData: { |
| | | offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"], |
| | | // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"], |
| | | height: 650, |
| | | success(layero, index) { |
| | | let contentWindow = layero.find("iframe")[0].contentWindow; |
| | | let layeroHeight = layero.height(); |
| | | let titleHeight = layero.find(".layui-layer-title").height(); |
| | | let htmlHeight = |
| | | contentWindow.document.firstElementChild.offsetHeight; |
| | | if (layeroHeight > titleHeight + htmlHeight) { |
| | | layero.height(titleHeight + htmlHeight); |
| | | layero.find("iframe").height(htmlHeight); |
| | | offset: "r", |
| | | height: "60%", |
| | | }, |
| | | callBack: { |
| | | delete: function (entity) { |
| | | Bus.$emit("removeTreeNode", entity); |
| | | }, |
| | | end: function (entity) { |
| | | if (entity) { |
| | | let style = sgworld.Creator.SimpleGraphic.getStyle(entity); |
| | | let data = { |
| | | name: entity.name, |
| | | style: style, |
| | | }; |
| | | Bus.$emit("updataTreeNode", entity.id, data); |
| | | } |
| | | }, |
| | | }, |
| | | }); |
| | | //标会编辑 |
| | | // sgworld.Creator.SimpleGraphic.setEdit(true, { |
| | | // editProp: true, |
| | | // editPropData: { |
| | | // offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"], |
| | | // // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"], |
| | | // height: 650, |
| | | // success(layero, index) { |
| | | // let contentWindow = layero.find("iframe")[0].contentWindow; |
| | | // let layeroHeight = layero.height(); |
| | | // let titleHeight = layero.find(".layui-layer-title").height(); |
| | | // let htmlHeight = |
| | | // contentWindow.document.firstElementChild.offsetHeight; |
| | | // if (layeroHeight > titleHeight + htmlHeight) { |
| | | // layero.height(titleHeight + htmlHeight); |
| | | // layero.find("iframe").height(htmlHeight); |
| | | // } |
| | | // }, |
| | | // }, |
| | | // }); |
| | | //军标编辑 |
| | | sgworld.Creator.MilitaryPlotting.setEdit(true, { |
| | | editProp: true, |
| | |
| | | }, |
| | | }, |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | //初始化弹窗事件 |
| | | // that.showBottom(); |
| | | that.initLayerOpen(); |
| | | that.showBottom(); |
| | | }); |
| | | let size = this.detectZoom(); |
| | | this.scale = (100 / size).toFixed(2); |
| | |
| | | this.size = size + "%"; |
| | | }, |
| | | methods: { |
| | | ...mapMutations(["setCesiumInit"]), |
| | | ...mapMutations(["setCesiumInit", "updataTreeNode"]), |
| | | detectZoom() { |
| | | var ratio = 0, |
| | | screen = window.screen, |
| | |
| | | }); |
| | | }, |
| | | //初始化弹窗事件 |
| | | |
| | | initLayerOpen() { |
| | | window.layerOpen = function (name, options) { |
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
| | |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | #bottomInfo { |
| | | position: absolute; |
| | |
| | | display: block; |
| | | position: absolute; |
| | | /*bottom: 120px;*/ |
| | | bottom: 13px; |
| | | right: 46px; |
| | | bottom: 30px; |
| | | right: 80px; |
| | | /* margin-right: -105px; */ |
| | | z-index: 9999; |
| | | border-radius: 10px; |
| | |
| | | border-radius: 10px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .bgbox { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 8px; |
| | | z-index: -1; |
| | | } |
| | | |
| | | .mid { |
| | | position: absolute; |
| | | top: 50%; |