| | |
|---|
| | | # swzjxt |
|---|
| | | |
|---|
| | | > 亦åºä¸å¼ å¾ç³»ç» |
|---|
| | | > æ±è交æ§æºæ
§é«éç³»ç» |
|---|
| | | |
|---|
| | | ## Build Setup |
|---|
| | | |
|---|
| | |
|---|
| | | cssSourceMap: true, |
|---|
| | | proxyTable: { |
|---|
| | | // è¿éé
ç½® '/api' å°±çä»·äº target , ä½ å¨é¾æ¥éè®¿é® /api === http://localhost:54321 |
|---|
| | | '/api': { |
|---|
| | | target: 'http://10.10.4.121:8070', |
|---|
| | | '/JiangSu': { |
|---|
| | | target: 'http://localhost/JiangSu', |
|---|
| | | // secure: true, // å¦ææ¯ https ,éè¦å¼å¯è¿ä¸ªé项 |
|---|
| | | changeOrigin: true, // æ¯å¦æ¯è·¨å请æ±?è¯å®æ¯å,ä¸è·¨å就没æå¿
è¦é
ç½®è¿ä¸ªproxyTableäº. |
|---|
| | | pathRewrite: { // éåè·¯å¾ ä¾å¦æµè§å¨è¯·æ±å°åhttp://localhost:12345/xxx,å®é
请æ±çæ¯ä½ 代ççå°åï¼http:xxx/11111 |
|---|
| | | // è¿éæ¯è¿½å é¾æ¥,æ¯å¦çæ¯æ¥å£éå
å«äº /api,å°±éè¦è¿æ ·é
ç½®. |
|---|
| | | '^/api': '', // åä¸è¾¹ä¸¤ç§åæ³ï¼å 人èå¼æ ¹æ®éæ±ã |
|---|
| | | '^/JiangSu': '', // åä¸è¾¹ä¸¤ç§åæ³ï¼å 人èå¼æ ¹æ®éæ±ã |
|---|
| | | // çä»·äº /api + /api == http://localhost:54321/api |
|---|
| | | // å¦æå为 '^/api' : '/' |
|---|
| | | // çä»·äº /api + / == http://localhost:54321/ |
|---|
| | |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|---|
| | | <title>æ¶ç©ºä¸å¼ å¾</title> |
|---|
| | | <title>æ±è交æ§æºæ
§é«é</title> |
|---|
| | | <!-- <link rel="icon" href="./static/img/favicon.ico" type="image/x-icon" /> --> |
|---|
| | | <link rel="stylesheet" href="./static/SmartEarthSDK/Cesium/Widgets/widgets.css"> |
|---|
| | | <link rel="stylesheet" href="./static/iconfont/iconfont.css"> |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | <script src="./static/othersMap/othersMap.js"></script> |
|---|
| | | <script src="./static/data/layerData.js"></script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | // å¯ä»¥è¿è¡ifå¤æåºåä¸ç¨åå |
|---|
| | | var BMAP_RESORCE_TILE = "10.10.4.116:8085/yzAdapter/SosoService"; |
|---|
| | | var BMAP_RESORCE_IP = "10.10.4.116:8085/yzAdapter/SosoService"; |
|---|
| | | // var BMAP_RESORCE_TILE = "10.10.4.116:8085/yzAdapter/SosoService"; |
|---|
| | | // var BMAP_RESORCE_IP = "10.10.4.116:8085/yzAdapter/SosoService"; |
|---|
| | | </script> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | |
|---|
| | | export function updateUserPwd(params) { |
|---|
| | | return service.put('system/user/profile/updatePwd', params); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function Op_SelectByPage(params){ |
|---|
| | | //请æ±å°å |
|---|
| | | return service.get("/Op/SelectByPage", { params: params }); |
|---|
| | | } |
|---|
| | | export function Op_Insert(params) { |
|---|
| | | //请æ±å°å |
|---|
| | | return service.post("/Op/Insert", params); |
|---|
| | | } |
|---|
| | | export function Op_UpdateById(params){ |
|---|
| | | //请æ±å°å |
|---|
| | | return service.post("/Op/UpdateById", params); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | //京åç»å½ |
|---|
| | | // export function loginById(params) { |
|---|
| | | // return request.post('/sign/loginById', params); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import store from "../../../store"; |
|---|
| | | import model from "./model"; |
|---|
| | | const mapViewer = { |
|---|
| | | leftClick: null, |
|---|
| | | rightClick: null, |
|---|
| | | addClick() { |
|---|
| | | this.addLeftClick(); |
|---|
| | | this.addRightClick(); |
|---|
| | | }, |
|---|
| | | addLeftClick() { |
|---|
| | | this.leftClick = new Cesium.ScreenSpaceEventHandler(window.Viewer.canvas); |
|---|
| | | this.leftClick.setInputAction(function (event) { |
|---|
| | | let cartesian = window.Viewer.camera.pickEllipsoid(event.position); |
|---|
| | | let cartographic = Cesium.Cartographic.fromCartesian(cartesian); |
|---|
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); // ç»åº¦ |
|---|
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度 |
|---|
| | | let alt = cartographic.height; // é«åº¦ï¼æ¤çé¢heightæ°¸è¿çäº |
|---|
| | | let coordinate = { |
|---|
| | | longitude: Number(lng.toFixed(6)), |
|---|
| | | latitude: Number(lat.toFixed(6)), |
|---|
| | | altitude: Number(alt.toFixed(2)), |
|---|
| | | heading: 0, |
|---|
| | | pitch: 0, |
|---|
| | | roll: 0, |
|---|
| | | scale: 1, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | if(store.state.addModelFlag){ |
|---|
| | | model.setModelCoord(coordinate); |
|---|
| | | } |
|---|
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK) |
|---|
| | | }, |
|---|
| | | addRightClick() { |
|---|
| | | this.rightClick = new Cesium.ScreenSpaceEventHandler(window.Viewer.canvas); |
|---|
| | | this.rightClick.setInputAction(function (event) { |
|---|
| | | let pickedObject = window.Viewer.scene.pick(event.position); |
|---|
| | | |
|---|
| | | console.log(pickedObject) |
|---|
| | | }, Cesium.ScreenSpaceEventType.RIGHT_CLICK) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export default mapViewer; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import store from "../../../store"; |
|---|
| | | import Bus from "@tools/Bus"; |
|---|
| | | const model = { |
|---|
| | | title: null, |
|---|
| | | modelLayer: null, |
|---|
| | | titleSet: null, |
|---|
| | | from: null, |
|---|
| | | changeLayer(item, res) { |
|---|
| | | store.state.addModelFlag = res; |
|---|
| | | this.title = item; |
|---|
| | | this.setModelMouseMove(); |
|---|
| | | }, |
|---|
| | | setModelCoord(res) { |
|---|
| | | store.state.addModelFlag = false; |
|---|
| | | this.setModelMouseMove(); |
|---|
| | | if (res) { |
|---|
| | | var id = new Date().getTime(); |
|---|
| | | var obj = { |
|---|
| | | id: id, |
|---|
| | | sourceType: 'GLB', |
|---|
| | | name: this.title.name, |
|---|
| | | style: { |
|---|
| | | url: this.title.url, |
|---|
| | | name: this.title.name, |
|---|
| | | longitude: res.longitude, |
|---|
| | | latitude: res.latitude, |
|---|
| | | altitude: res.altitude, |
|---|
| | | heading: res.heading, |
|---|
| | | pitch: res.pitch, |
|---|
| | | roll: res.roll, |
|---|
| | | scale: res.scale, |
|---|
| | | url: this.title.url, |
|---|
| | | id: id, |
|---|
| | | sourceType: 'GLB', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | Bus.$emit("addOtherData", "对象", obj); |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setModelMouseMove() { |
|---|
| | | if (store.state.addModelFlag) { |
|---|
| | | document.getElementById("myImage").src = layerData.config.img_url + this.title.imgUrl; |
|---|
| | | document.onmousemove = (event) => { |
|---|
| | | this.setMouseMove(event) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | document.getElementById("myImage").src = ""; |
|---|
| | | $("#imageModel").hide(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setMouseMove(res) { |
|---|
| | | if (!store.state.addModelFlag) return; |
|---|
| | | var odiv = document.getElementById("imageModel"); |
|---|
| | | odiv.style.top = (res.clientY - 15) + "px"; |
|---|
| | | odiv.style.left = (res.clientX + 15) + "px"; |
|---|
| | | $("#imageModel").show(); |
|---|
| | | }, |
|---|
| | | addModelLayer(res) { |
|---|
| | | if (!res) return; |
|---|
| | | this.getModelLayer(); |
|---|
| | | var modelMatrix = this.getModelMatrix(res.style); |
|---|
| | | var url = layerData.config.Model_URL + res.style.url; |
|---|
| | | var model = this.modelLayer.add(Cesium.Model.fromGltf({ |
|---|
| | | id: res.id, |
|---|
| | | url: url, |
|---|
| | | scale: res.scale, |
|---|
| | | minimumPixelSize: 64, |
|---|
| | | modelMatrix: modelMatrix |
|---|
| | | |
|---|
| | | })); |
|---|
| | | model.name = res.name; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.updateGlbModel(model, res.style) |
|---|
| | | }, 200); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setDelGLBModel(res) { |
|---|
| | | |
|---|
| | | for (var i = 0; i < this.modelLayer._primitives.length; i++) { |
|---|
| | | var model = this.modelLayer._primitives[i] |
|---|
| | | if (model.id == res.id) { |
|---|
| | | this.modelLayer.remove(this.modelLayer._primitives[i]); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | flyTo(res) { |
|---|
| | | for (var i = 0; i < this.modelLayer._primitives.length; i++) { |
|---|
| | | var model = this.modelLayer._primitives[i] |
|---|
| | | if (model.id == res.id) { |
|---|
| | | // Viewer.trackedEntity = this.modelLayer._primitives[i] |
|---|
| | | Viewer.scene.camera.flyTo(this.modelLayer._primitives[i]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getEditModelLayer(res) { |
|---|
| | | for (var i = 0; i < this.modelLayer._primitives.length; i++) { |
|---|
| | | var model = this.modelLayer._primitives[i] |
|---|
| | | if (model.id == res.id) { |
|---|
| | | this.titleSet = this.modelLayer._primitives[i]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (!this.titleSet) return; |
|---|
| | | var cm = this.titleSet.modelMatrix; // è·åå½å模åmodelMatrix |
|---|
| | | var cartesian = new Cesium.Cartesian3(cm[12], cm[13], cm[14]); |
|---|
| | | var carto = Cesium.Cartographic.fromCartesian(cartesian); |
|---|
| | | |
|---|
| | | var m1 = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Matrix4.getTranslation(cm, new Cesium.Cartesian3()), Cesium.Ellipsoid.WGS84, new Cesium.Matrix4()); |
|---|
| | | var m3 = Cesium.Matrix4.multiply(Cesium.Matrix4.inverse(m1, new Cesium.Matrix4()), cm, new Cesium.Matrix4()); |
|---|
| | | var mat3 = Cesium.Matrix4.getRotation(m3, new Cesium.Matrix3()); |
|---|
| | | var q = Cesium.Quaternion.fromRotationMatrix(mat3); |
|---|
| | | var hpr = Cesium.HeadingPitchRoll.fromQuaternion(q); |
|---|
| | | |
|---|
| | | this.form = { |
|---|
| | | id: this.titleSet.id, |
|---|
| | | sourceType: 'GLB', |
|---|
| | | name: this.titleSet.name, |
|---|
| | | style: { |
|---|
| | | url: res.style.url, |
|---|
| | | name: this.titleSet.name, |
|---|
| | | altitude: Math.round(carto.height * 10) / 10, |
|---|
| | | longitude: res.style.longitude, |
|---|
| | | latitude: res.style.latitude, |
|---|
| | | heading: Math.round(Cesium.Math.toDegrees(hpr.heading)), |
|---|
| | | pitch: Math.round(Cesium.Math.toDegrees(hpr.pitch)), |
|---|
| | | roll: Math.round(Cesium.Math.toDegrees(hpr.roll)), |
|---|
| | | scale: this.titleSet.scale, |
|---|
| | | url: res.style.url, |
|---|
| | | id: this.titleSet.id, |
|---|
| | | sourceType: 'GLB', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | store.state.showModelFlag = false; |
|---|
| | | store.state.isShowEditLayer = true; |
|---|
| | | }, |
|---|
| | | setEditChanege(res, flag) { |
|---|
| | | this.form = res; |
|---|
| | | Bus.$emit("updataTreeNode", this.form.id, this.form); |
|---|
| | | if (flag == 2) { |
|---|
| | | this.updateGlbModel(this.titleSet, this.form.style) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updateGlbModel(model, res) { |
|---|
| | | if (!res.longitude) return |
|---|
| | | var cm = model.modelMatrix; // è·åå½å模åmodelMatrix |
|---|
| | | var nc = Cesium.Cartesian3.fromDegrees(res.longitude, res.latitude, res.altitude); |
|---|
| | | var newHeading = Cesium.Math.toRadians(res.heading); //æ¹åHeadingå¼ |
|---|
| | | var newPitch = Cesium.Math.toRadians(res.pitch); // pitchå¼å¡«å½å模åpitchï¼ä¸æä»ç»è¿å¦ä½è·å |
|---|
| | | var newRoll = Cesium.Math.toRadians(res.roll); // åä¸ |
|---|
| | | var headingPitchRoll = new Cesium.HeadingPitchRoll(newHeading, newPitch, newRoll); |
|---|
| | | var m = Cesium.Transforms.headingPitchRollToFixedFrame(nc, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4()); |
|---|
| | | model.modelMatrix = m; |
|---|
| | | model.scale = res.scale; |
|---|
| | | var sm = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(res.scale, res.scale, res.scale), new Cesium.Matrix4()); |
|---|
| | | model.modelMatrix = Cesium.Matrix4.multiply(model.modelMatrix, sm, model.modelMatrix); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getModelMatrix(res) { |
|---|
| | | var headingPitchRoll = new Cesium.HeadingPitchRoll(res.heading, res.pitch, res.roll); |
|---|
| | | var position = Cesium.Cartesian3.fromDegrees(res.longitude, res.latitude, res.altitude); |
|---|
| | | var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame( |
|---|
| | | position, headingPitchRoll, Cesium.Ellipsoid.WGS84, |
|---|
| | | Cesium.Transforms.eastNorthUpToFixedFrame, |
|---|
| | | new Cesium.Matrix4()); |
|---|
| | | return modelMatrix; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getModelLayer() { |
|---|
| | | if (this.modelLayer == null) { |
|---|
| | | this.modelLayer = new Cesium.PrimitiveCollection(); |
|---|
| | | this.modelLayer.id = "model_layer"; |
|---|
| | | Viewer.scene.primitives.add(this.modelLayer); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export default model; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Vue from 'vue'; |
|---|
| | | //使ç¨Vue.directive()å®ä¹ä¸ä¸ªå
¨å±æ令 |
|---|
| | | //1.åæ°ä¸ï¼æ令çå称ï¼å®ä¹æ¶æ令åé¢ä¸éè¦åv- |
|---|
| | | //2.åæ°äºï¼æ¯ä¸ä¸ªå¯¹è±¡ï¼è¯¥å¯¹è±¡ä¸æç¸å
³çæä½å½æ° |
|---|
| | | //3.å¨è°ç¨çæ¶åå¿
é¡»åv- |
|---|
| | | const drag = Vue.directive('drag', { |
|---|
| | | //1.æ令ç»å®å°å
ç´ ä¸åç«å»æ§è¡bindå½æ°ï¼åªæ§è¡ä¸æ¬¡ |
|---|
| | | //2.æ¯ä¸ªå½æ°ä¸ç¬¬ä¸ä¸ªåæ°æ°¸è¿æ¯elï¼è¡¨ç¤ºç»å®æ令çå
ç´ ï¼elåæ°æ¯åçjs对象 |
|---|
| | | //3.éè¿el.focus()æ¯æ æ³è·åç¦ç¹çï¼å 为åªææå
¥DOMåæçæ |
|---|
| | | bind: function (el) { }, |
|---|
| | | //inserted表示ä¸ä¸ªå
ç´ ï¼æå
¥å°DOMä¸ä¼æ§è¡insertedå½æ°ï¼åªè§¦åä¸æ¬¡ |
|---|
| | | inserted: function (el) { |
|---|
| | | el.onmousedown = function (e) { |
|---|
| | | var disx = e.pageX - el.offsetLeft; |
|---|
| | | var disy = e.pageY - el.offsetTop; |
|---|
| | | document.onmousemove = function (e) { |
|---|
| | | el.style.left = e.pageX - disx + 'px'; |
|---|
| | | el.style.top = e.pageY - disy + 'px'; |
|---|
| | | } |
|---|
| | | document.onmouseup = function () { |
|---|
| | | document.onmousemove = document.onmouseup = null; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //å½VNodeæ´æ°çæ¶åä¼æ§è¡updatedï¼å¯ä»¥è§¦åå¤æ¬¡ |
|---|
| | | updated: function (el) { } |
|---|
| | | }) |
|---|
| | | export default drag; |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="mapViewer"> |
|---|
| | | <div class="cacheImage"> |
|---|
| | | <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/h1.png" alt="" /> |
|---|
| | | </div> |
|---|
| | | <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" /> |
|---|
| | | <img style="display: none;" src="@assets/img/new/h1.png" alt="" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <div class="tooltip" :class="{ tooltiphide: !tooltipShow }"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <viewer1 class="mapViewer" :key="switchKey" v-show="viewer1Show" :style="viewer1Style" |
|---|
| | | @mousemove.native="viewer1MouseMove" /> |
|---|
| | | <viewer class="mapViewer" ref="mapViewer" :style="viewerStyle" @mousemove.native="viewerMouseMove" /> |
|---|
| | | <viewer1 class="mapViewer" id="mapOl" :key="switchKey" v-show="viewer1Show" :style="viewer1Style" /> |
|---|
| | | <viewer class="mapViewer" id="mapView" ref="mapViewer" :style="viewerStyle" /> |
|---|
| | | <div class="controlPanel" :style="{ |
|---|
| | | width: `${size}`, |
|---|
| | | height: `${size}`, |
|---|
| | |
|---|
| | | <right ref="Right" /> |
|---|
| | | <leftpanel ref="Left" /> |
|---|
| | | <menupanel /> |
|---|
| | | <bottommenu ref="bottommenu" /> |
|---|
| | | <!-- <bottommenu ref="bottommenu" /> --> |
|---|
| | | <signalling v-if="signallingShow"></signalling> |
|---|
| | | <setting v-if="showSetting" /> |
|---|
| | | <qycharts v-if="$store.state.qyEchartsShow" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="imageModel" class="imageModel"> |
|---|
| | | <img id="myImage" class="image" src=""> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | offset: "0%", |
|---|
| | | tooltipInfo: "请ç¨åããã", |
|---|
| | | tooltipShow: false, |
|---|
| | | signallingShow:false, |
|---|
| | | signallingShow: false, |
|---|
| | | switchKey: 0, |
|---|
| | | // viewer1Show: false, |
|---|
| | | }; |
|---|
| | |
|---|
| | | changePwd() { |
|---|
| | | console.log(111); |
|---|
| | | }, |
|---|
| | | changeMode(mode){ |
|---|
| | | changeMode(mode) { |
|---|
| | | this.$refs.mapViewer.changeMode(mode); |
|---|
| | | }, |
|---|
| | | detectZoom() { |
|---|
| | |
|---|
| | | cameraMoveEnd() { |
|---|
| | | // var p = { |
|---|
| | | // destination: sgworld.Navigate.getPosition(), |
|---|
| | | |
|---|
| | | |
|---|
| | | // }; |
|---|
| | | // sgworld1.Viewer.camera.setView(p); |
|---|
| | | }, |
|---|
| | |
|---|
| | | sgworldEvenListener() { |
|---|
| | | // sgworld1.Viewer.camera.setView({ |
|---|
| | | // destination: sgworld.Viewer.camera.position.clone(), |
|---|
| | | |
|---|
| | | |
|---|
| | | // }); |
|---|
| | | }, |
|---|
| | | sgworld1EvenListener() { |
|---|
| | | // sgworld.Viewer.camera.setView({ |
|---|
| | | // destination: sgworld1.Viewer.camera.position.clone(), |
|---|
| | | |
|---|
| | | |
|---|
| | | // }); |
|---|
| | | }, |
|---|
| | | closeHighLight() { |
|---|
| | |
|---|
| | | this.$store.commit("showHistory", false); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | beforeDestroy(){ |
|---|
| | | beforeDestroy() { |
|---|
| | | this.$refs.bottommenu.switchMenu(0); |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .cacheImage{ |
|---|
| | | .cacheImage { |
|---|
| | | display: none !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mapViewer { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | #headlog { |
|---|
| | | width: 965px; |
|---|
| | | height: 70px; |
|---|
| | | width: 1920px; |
|---|
| | | height: 100px; |
|---|
| | | position: absolute; |
|---|
| | | left: 50%; |
|---|
| | | top: 0; |
|---|
| | |
|---|
| | | .searchBtn { |
|---|
| | | width: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .imageModel { |
|---|
| | | z-index: 40; |
|---|
| | | position: absolute; |
|---|
| | | display: none; |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .imageModel .image { |
|---|
| | | width: 30px; |
|---|
| | | height: 30px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <div class="treeContainer"> |
|---|
| | | <div class="treeTitle"> |
|---|
| | | <span class="closePanel" @click="closeLayer">Ã</span> |
|---|
| | | <el-upload |
|---|
| | | class="button-group" |
|---|
| | | action="" |
|---|
| | | :auto-upload="false" |
|---|
| | | :show-file-list="false" |
|---|
| | | :on-change="loadJsonFromFile" |
|---|
| | | accept=".json" |
|---|
| | | > |
|---|
| | | <el-button |
|---|
| | | class="button-user" |
|---|
| | | type="primary" |
|---|
| | | slot="trigger" |
|---|
| | | icon="el-icon-folder-opened" |
|---|
| | | title="æå¼æ¬å°é
ç½®æ件" |
|---|
| | | ></el-button> |
|---|
| | | <el-button |
|---|
| | | class="button-user" |
|---|
| | | type="primary" |
|---|
| | | icon="el-icon-download" |
|---|
| | | title="ä¿å为æ¬å°é
ç½®æ件" |
|---|
| | | @click.stop="save" |
|---|
| | | ></el-button> |
|---|
| | | <el-button |
|---|
| | | class="button-user" |
|---|
| | | type="primary" |
|---|
| | | icon="el-icon-delete" |
|---|
| | | title="æ¸
é¤æææ ç»" |
|---|
| | | @click.stop="deleteAllPlot" |
|---|
| | | ></el-button> |
|---|
| | | <el-button |
|---|
| | | class="button-user" |
|---|
| | | type="primary" |
|---|
| | | icon="el-icon-upload" |
|---|
| | | title="ä¸ä¼ è³æå¡å¨" |
|---|
| | | @click.stop="saveHistoryPlot" |
|---|
| | | ></el-button> |
|---|
| | | <el-upload class="button-group" action="" :auto-upload="false" :show-file-list="false" |
|---|
| | | :on-change="loadJsonFromFile" accept=".json"> |
|---|
| | | <el-button class="button-user" type="primary" slot="trigger" icon="el-icon-folder-opened" |
|---|
| | | title="æå¼æ¬å°é
ç½®æ件"></el-button> |
|---|
| | | <el-button class="button-user" type="primary" icon="el-icon-download" title="ä¿å为æ¬å°é
ç½®æ件" |
|---|
| | | @click.stop="save"></el-button> |
|---|
| | | <!-- <el-button class="button-user" type="primary" icon="el-icon-delete" title="æ¸
é¤æææ ç»" |
|---|
| | | @click.stop="deleteAllPlot"></el-button> --> |
|---|
| | | <el-button class="button-user" type="primary" icon="el-icon-upload" title="ä¸ä¼ è³æå¡å¨" |
|---|
| | | @click.stop="saveHistoryPlot"></el-button> |
|---|
| | | |
|---|
| | | <el-button |
|---|
| | | class="button-user historyBtn" |
|---|
| | | type="primary" |
|---|
| | | icon="el-icon-s-order" |
|---|
| | | title="åå²è®°å½" |
|---|
| | | @click.stop="histotyPlotting" |
|---|
| | | ></el-button> |
|---|
| | | <!-- <el-button class="button-user historyBtn" type="primary" icon="el-icon-s-order" title="åå²è®°å½" |
|---|
| | | @click.stop="histotyPlotting"></el-button> --> |
|---|
| | | </el-upload> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-tree |
|---|
| | | ref="tree" |
|---|
| | | :data="treeData" |
|---|
| | | show-checkbox |
|---|
| | | node-key="id" |
|---|
| | | draggable |
|---|
| | | :allow-drop="allowDrop" |
|---|
| | | :expand-on-click-node="false" |
|---|
| | | :auto-expand-parent="false" |
|---|
| | | :default-expanded-keys="defaultExpanded" |
|---|
| | | :default-checked-keys="defaultCheck" |
|---|
| | | @node-expand="changeNodeExpand($event, true)" |
|---|
| | | @node-collapse="changeNodeExpand($event, false)" |
|---|
| | | @check="check" |
|---|
| | | @node-contextmenu="rightClick" |
|---|
| | | > |
|---|
| | | <span |
|---|
| | | class="custom-tree-node" |
|---|
| | | slot-scope="{ data }" |
|---|
| | | @dblclick="flyTo(data)" |
|---|
| | | @click="select(data)" |
|---|
| | | > |
|---|
| | | <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" draggable :allow-drop="allowDrop" |
|---|
| | | :expand-on-click-node="false" :auto-expand-parent="false" :default-expanded-keys="defaultExpanded" |
|---|
| | | :default-checked-keys="defaultCheck" @node-expand="changeNodeExpand($event, true)" |
|---|
| | | @node-collapse="changeNodeExpand($event, false)" @check="check" @node-contextmenu="rightClick"> |
|---|
| | | <span class="custom-tree-node" slot-scope="{ data }" @dblclick="flyTo(data)" @click="select(data)"> |
|---|
| | | <span> |
|---|
| | | <i v-if="data.children" class="el-icon-folder"></i> |
|---|
| | | <i |
|---|
| | | v-else |
|---|
| | | :class=" |
|---|
| | | data.sourceType === 'location' |
|---|
| | | ? 'el-icon-location-outline' |
|---|
| | | : '' |
|---|
| | | " |
|---|
| | | ></i> |
|---|
| | | <el-input |
|---|
| | | v-if="data.rename" |
|---|
| | | v-model="data.name" |
|---|
| | | size="mini" |
|---|
| | | placeholder="请è¾å
¥å称" |
|---|
| | | @change="rename(data)" |
|---|
| | | @blur="rename(data)" |
|---|
| | | ></el-input> |
|---|
| | | <i v-else :class="data.sourceType === 'location' |
|---|
| | | ? 'el-icon-location-outline' |
|---|
| | | : '' |
|---|
| | | "></i> |
|---|
| | | <el-input v-if="data.rename" v-model="data.name" size="mini" placeholder="请è¾å
¥å称" @change="rename(data)" |
|---|
| | | @blur="rename(data)"></el-input> |
|---|
| | | <span v-else>{{ data.name }}</span> |
|---|
| | | </span> |
|---|
| | | </span> |
|---|
| | | </el-tree> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div |
|---|
| | | class="rightClickMenu" |
|---|
| | | v-if="rightClickMenuDisplay" |
|---|
| | | @click.stop="closeRightClick" |
|---|
| | | :style="{ ...rightClickMenuStyle }" |
|---|
| | | > |
|---|
| | | <div class="rightClickMenu" v-if="rightClickMenuDisplay" @click.stop="closeRightClick" |
|---|
| | | :style="{ ...rightClickMenuStyle }"> |
|---|
| | | <ul> |
|---|
| | | <li @click="addFold"><i class="el-icon-plus"></i>æ·»å ç®å½</li> |
|---|
| | | <li @click="addLayer"><i class="el-icon-plus"></i>æ·»å å¾å±</li> |
|---|
| | | <li @click="editDemoAnimation"> |
|---|
| | | <!-- <li @click="addFold"><i class="el-icon-plus"></i>æ·»å ç®å½</li> |
|---|
| | | <li @click="addLayer"><i class="el-icon-plus"></i>æ·»å å¾å±</li> --> |
|---|
| | | <!-- <li @click="editDemoAnimation"> |
|---|
| | | <i class="el-icon-plus"></i>æ·»å å¨ç» |
|---|
| | | </li> |
|---|
| | | <li @click="addPosition"> |
|---|
| | | </li> --> |
|---|
| | | <!-- <li @click="addPosition"> |
|---|
| | | <i class="el-icon-location-outline"></i>æ·»å å®ä½ |
|---|
| | | </li> |
|---|
| | | </li> --> |
|---|
| | | <li v-if="!isClickParent" @click="editTreeNode"> |
|---|
| | | <i class="el-icon-edit"></i>ç¼è¾ |
|---|
| | | </li> |
|---|
| | | <li @click="openRename"><i class="el-icon-edit"></i>éå½å</li> |
|---|
| | | <!-- <li @click="openRename"><i class="el-icon-edit"></i>éå½å</li> --> |
|---|
| | | <li @click="deleteTreeNode"><i class="el-icon-delete"></i>å é¤</li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <add-terrain ref="addTerrain" @success="addSceneData" /> |
|---|
| | | <add-online-map |
|---|
| | | ref="addOnlineMap" |
|---|
| | | @success="addOtherData('å½±å', $event)" |
|---|
| | | /> |
|---|
| | | <add-online-map ref="addOnlineMap" @success="addOtherData('å½±å', $event)" /> |
|---|
| | | <add-image ref="addImage" @success="addSceneData" /> |
|---|
| | | <add-model ref="addModel" @success="addSceneData" /> |
|---|
| | | <add-pathLayer ref="addPathLayer" @success="addSceneData" /> |
|---|
| | |
|---|
| | | <get-scene ref="getScene" @success="openScene" /> |
|---|
| | | <save-scene ref="saveScene" @success="saveScene" /> |
|---|
| | | <select-data ref="select" @success="openThisTypePop" /> |
|---|
| | | <animationEdit |
|---|
| | | ref="animationEdit" |
|---|
| | | @success="updateAnimation" |
|---|
| | | @setAnimation="setAnimation" |
|---|
| | | /> |
|---|
| | | <animationEdit ref="animationEdit" @success="updateAnimation" @setAnimation="setAnimation" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | import AddOnlineMap from "./AddOnlineMap.vue"; |
|---|
| | | import GetScene from "./GetScene.vue"; |
|---|
| | | import SaveScene from "./SaveScene.vue"; |
|---|
| | | import { Op_SelectByPage, Op_Insert, Op_UpdateById } from '../../../api/api.js' |
|---|
| | | import model from "../../../assets/js/Layer/model"; |
|---|
| | | // å·¥ç¨æ å·¥å
· |
|---|
| | | let _treeTool; |
|---|
| | | function arrGroup(arr, fn) { |
|---|
| | |
|---|
| | | isNewFold: false, |
|---|
| | | newFoldName: undefined, |
|---|
| | | serverURL: "http://192.168.109.128:8080", |
|---|
| | | uploading: false, |
|---|
| | | layersId: null |
|---|
| | | |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | |
|---|
| | | } else if (this.treeData.length) { |
|---|
| | | // åå¨ç¼åæ°æ® |
|---|
| | | // å è½½åºæ¯æ°æ® |
|---|
| | | this.loadDataToScene(); |
|---|
| | | // this.loadDataToScene(); |
|---|
| | | this.setTreeData([]); |
|---|
| | | this.initData({}); |
|---|
| | | } else { |
|---|
| | | // é»è®¤æ ç»æ |
|---|
| | | // this.setTreeData([{ id: "82A0C3DE", name: "æçèµæº", children: [] }]); |
|---|
| | | this.setTreeData([]); |
|---|
| | | this.initData({}); |
|---|
| | | // å è½½åºæ¯æ°æ® |
|---|
| | | this.loadDataToScene(); |
|---|
| | | // this.loadDataToScene(); |
|---|
| | | } |
|---|
| | | // æå¼å¼¹çª |
|---|
| | | //this.$refs.layer.open(); |
|---|
| | | |
|---|
| | | // å®ä¹ä¸è½¬ç«äºä»¶ |
|---|
| | | this.initBusEvent(); |
|---|
| | | this.initData({}); |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.histotyPlotting(); |
|---|
| | | // å®ä¹ä¸è½¬ç«äºä»¶ |
|---|
| | | this.initBusEvent(); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | _treeTool = undefined; |
|---|
| | |
|---|
| | | // æ ç»ä¸ä¼ è³æå¡å¨ |
|---|
| | | saveHistoryPlot() { |
|---|
| | | if (this.treeData.length == 0) { |
|---|
| | | this.$message.error("请å
è¿è¡æ ç»"); |
|---|
| | | this.$message.error("请å
è¿è¡æ°æ®å è½½"); |
|---|
| | | return; |
|---|
| | | } else if (this.treeData.length > 1) { |
|---|
| | | this.$message.error("æ ¼å¼ä¸æ£ç¡®ï¼è¯·ä¿®æ¹åéæ°ä¿å"); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.$confirm("æ¯å¦å°å½åä¼è®®ä¿éæ ç»æ°æ®ä¸ä¼ è³æå¡å¨?", "ä¸ä¼ ", { |
|---|
| | | confirmButtonText: "ç¡®å®", |
|---|
| | | cancelButtonText: "åæ¶", |
|---|
| | | type: "warning", |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | let oricontent = JSON.stringify(this.treeData); |
|---|
| | | let content = oricontent.replace( |
|---|
| | | /"checked":true/g, |
|---|
| | | '"checked":false' |
|---|
| | | ); |
|---|
| | | const uploading = this.$loading({ |
|---|
| | | lock: true, |
|---|
| | | text: "ä¼è®®ä¿éæ ç»æ°æ®ä¸ä¼ ä¸ï¼è¯·ç¨å", |
|---|
| | | spinner: "el-icon-loading", |
|---|
| | | background: "rgba(0, 0, 0, 0.7)", |
|---|
| | | }); |
|---|
| | | axios({ |
|---|
| | | method: "POST", |
|---|
| | | url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/add", |
|---|
| | | data: { |
|---|
| | | userId: this.$store.state.userId, |
|---|
| | | userName: this.$store.state.userName, |
|---|
| | | geojsonName: this.treeData[0].name, |
|---|
| | | geojsonString: content, |
|---|
| | | }, |
|---|
| | | }).then( |
|---|
| | | (response) => { |
|---|
| | | uploading.close(); |
|---|
| | | if (response.data.code == 200) { |
|---|
| | | this.$message({ |
|---|
| | | message: "ä¿åæå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$message.error("ä¿å失败ï¼"); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | (error) => { |
|---|
| | | uploading.close(); |
|---|
| | | this.$message.error("æ°æ®ä¸ä¼ 失败"); |
|---|
| | | // console.log("é误", error.message); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | }) |
|---|
| | | .catch(() => { |
|---|
| | | this.$message({ |
|---|
| | | type: "info", |
|---|
| | | message: "å·²åæ¶ä¸ä¼ ", |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | var that = this; |
|---|
| | | // this.$confirm("æ¯å¦å°å½ååºæ¯æ°æ®ä¸ä¼ è³æå¡å¨?", "ä¸ä¼ ", { |
|---|
| | | // confirmButtonText: "ç¡®å®", |
|---|
| | | // cancelButtonText: "åæ¶", |
|---|
| | | // type: "warning", |
|---|
| | | // }) |
|---|
| | | // .then(() => { |
|---|
| | | let oricontent = JSON.stringify(this.treeData); |
|---|
| | | let content = oricontent.replace( |
|---|
| | | /"checked":true/g, |
|---|
| | | '"checked":false' |
|---|
| | | ); |
|---|
| | | this.uploading = this.$loading({ |
|---|
| | | lock: true, |
|---|
| | | text: "åºæ¯æ°æ®ä¸ä¼ ä¸ï¼è¯·ç¨å", |
|---|
| | | spinner: "el-icon-loading", |
|---|
| | | background: "rgba(0, 0, 0, 0.7)", |
|---|
| | | }); |
|---|
| | | if (this.layersId) { |
|---|
| | | var obj = { |
|---|
| | | name: "æ±è交æ§æºæ
§é«é", |
|---|
| | | json: oricontent, |
|---|
| | | id: this.layersId, |
|---|
| | | } |
|---|
| | | this.editLayerData(obj); |
|---|
| | | } else { |
|---|
| | | var obj = { |
|---|
| | | name: "æ±è交æ§æºæ
§é«é", |
|---|
| | | json: oricontent |
|---|
| | | } |
|---|
| | | this.addLayerData(obj); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | // axios({ |
|---|
| | | // method: "POST", |
|---|
| | | // url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/add", |
|---|
| | | // data: { |
|---|
| | | // userId: this.$store.state.userId, |
|---|
| | | // userName: this.$store.state.userName, |
|---|
| | | // geojsonName: this.treeData[0].name, |
|---|
| | | // geojsonString: content, |
|---|
| | | // }, |
|---|
| | | // }).then( |
|---|
| | | // (response) => { |
|---|
| | | // uploading.close(); |
|---|
| | | // if (response.data.code == 200) { |
|---|
| | | // this.$message({ |
|---|
| | | // message: "ä¿åæå", |
|---|
| | | // type: "success", |
|---|
| | | // }); |
|---|
| | | // } else { |
|---|
| | | // this.$message.error("ä¿å失败ï¼"); |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // (error) => { |
|---|
| | | // uploading.close(); |
|---|
| | | // this.$message.error("æ°æ®ä¸ä¼ 失败"); |
|---|
| | | // // console.log("é误", error.message); |
|---|
| | | // } |
|---|
| | | // ); |
|---|
| | | // }) |
|---|
| | | // .catch(() => { |
|---|
| | | // this.$message({ |
|---|
| | | // type: "info", |
|---|
| | | // message: "å·²åæ¶ä¸ä¼ ", |
|---|
| | | // }); |
|---|
| | | // }); |
|---|
| | | }, |
|---|
| | | async addLayerData(res) { |
|---|
| | | const data = await Op_Insert(res); |
|---|
| | | if (data.status == 200) { |
|---|
| | | this.uploading.close(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async editLayerData(res) { |
|---|
| | | const data = await Op_UpdateById(res); |
|---|
| | | if (data.status == 200) { |
|---|
| | | this.uploading.close(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å è½½åå²æ ç»æ°æ® |
|---|
| | | histotyPlotting() { |
|---|
| | | this.$confirm( |
|---|
| | | "该æä½å°ä¼å¯¼è´å½åæ ç»æ°æ®è¢«è¦çï¼æ¯å¦ç»§ç»?", |
|---|
| | | "ä¼è®®ä¿éåå²æ°æ®", |
|---|
| | | { |
|---|
| | | confirmButtonText: "ç¡®å®", |
|---|
| | | cancelButtonText: "åæ¶", |
|---|
| | | type: "warning", |
|---|
| | | // customClass: "msgbox", |
|---|
| | | async histotyPlotting() { |
|---|
| | | const data = await Op_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' }); |
|---|
| | | if (data.status == 200 && data.data.length > 0) { |
|---|
| | | var val_data = data.data; |
|---|
| | | for (var i in val_data) { |
|---|
| | | var json = val_data[i].json; |
|---|
| | | var val = JSON.parse(json) |
|---|
| | | if (val.length > 0) { |
|---|
| | | this.layersId = val_data[i].id; |
|---|
| | | let plottingArr = []; |
|---|
| | | plottingArr.push(val[0]); |
|---|
| | | const newArr = arrGroup(plottingArr, (item) => item.name); |
|---|
| | | let finalPlotting = []; |
|---|
| | | newArr.map((a) => { |
|---|
| | | let newObj = {}; |
|---|
| | | a.map((b) => { |
|---|
| | | if (newObj.children) { |
|---|
| | | newObj.children = newObj.children.concat(b.children); |
|---|
| | | } else { |
|---|
| | | newObj = b; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | finalPlotting.push(newObj); |
|---|
| | | }); |
|---|
| | | let json = { |
|---|
| | | name: "æ±è交æ§æºæ
§é«é", |
|---|
| | | id: 1, |
|---|
| | | open: true, |
|---|
| | | children: finalPlotting, |
|---|
| | | }; |
|---|
| | | this.initData(json); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | .then(() => { |
|---|
| | | const downloading = this.$loading({ |
|---|
| | | lock: true, |
|---|
| | | text: "ä¼è®®ä¿éåå²æ°æ®å è½½ä¸ï¼è¯·ç¨å", |
|---|
| | | spinner: "el-icon-loading", |
|---|
| | | background: "rgba(0, 0, 0, 0.7)", |
|---|
| | | }); |
|---|
| | | let that = this; |
|---|
| | | axios({ |
|---|
| | | method: "GET", |
|---|
| | | // method: "POST", |
|---|
| | | // url: "/api/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", |
|---|
| | | url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", |
|---|
| | | // data: { |
|---|
| | | // userId: this.$store.state.userId, |
|---|
| | | // }, |
|---|
| | | }).then( |
|---|
| | | (response) => { |
|---|
| | | setTimeout(() => { |
|---|
| | | downloading.close(); |
|---|
| | | let plottingArr = []; |
|---|
| | | response.data.result.forEach((item) => { |
|---|
| | | let geoJsonObj = JSON.parse(item.geojsonString); |
|---|
| | | plottingArr.push(geoJsonObj[0]); |
|---|
| | | }); |
|---|
| | | const newArr = arrGroup(plottingArr, (item) => item.name); |
|---|
| | | let finalPlotting = []; |
|---|
| | | newArr.map((a) => { |
|---|
| | | let newObj = {}; |
|---|
| | | a.map((b) => { |
|---|
| | | if (newObj.children) { |
|---|
| | | newObj.children = newObj.children.concat(b.children); |
|---|
| | | } else { |
|---|
| | | newObj = b; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | finalPlotting.push(newObj); |
|---|
| | | }); |
|---|
| | | let json = { |
|---|
| | | name: "ä¸å¼ å¾", |
|---|
| | | id: 1, |
|---|
| | | open: true, |
|---|
| | | children: finalPlotting, |
|---|
| | | }; |
|---|
| | | that.initData(json); |
|---|
| | | }, 2000); |
|---|
| | | }, |
|---|
| | | (error) => { |
|---|
| | | setTimeout(() => { |
|---|
| | | downloading.close(); |
|---|
| | | // console.log("é误", error.message); |
|---|
| | | this.$message.error("æ°æ®è¯·æ±å¤±è´¥"); |
|---|
| | | }, 2000); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | }) |
|---|
| | | .catch(() => { |
|---|
| | | this.$message({ |
|---|
| | | type: "info", |
|---|
| | | message: "å·²åæ¶å è½½", |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // const downloading = this.$loading({ |
|---|
| | | // lock: true, |
|---|
| | | // text: "ä¼è®®ä¿éåå²æ°æ®å è½½ä¸ï¼è¯·ç¨å", |
|---|
| | | // spinner: "el-icon-loading", |
|---|
| | | // background: "rgba(0, 0, 0, 0.7)", |
|---|
| | | // }); |
|---|
| | | // let that = this; |
|---|
| | | // axios({ |
|---|
| | | // method: "GET", |
|---|
| | | // // method: "POST", |
|---|
| | | // // url: "/api/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", |
|---|
| | | // url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", |
|---|
| | | // // data: { |
|---|
| | | // // userId: this.$store.state.userId, |
|---|
| | | // // }, |
|---|
| | | // }).then( |
|---|
| | | // (response) => { |
|---|
| | | // setTimeout(() => { |
|---|
| | | // downloading.close(); |
|---|
| | | // |
|---|
| | | // response.data.result.forEach((item) => { |
|---|
| | | // let geoJsonObj = JSON.parse(item.geojsonString); |
|---|
| | | // plottingArr.push(geoJsonObj[0]); |
|---|
| | | // }); |
|---|
| | | // const newArr = arrGroup(plottingArr, (item) => item.name); |
|---|
| | | // let finalPlotting = []; |
|---|
| | | // newArr.map((a) => { |
|---|
| | | // let newObj = {}; |
|---|
| | | // a.map((b) => { |
|---|
| | | // if (newObj.children) { |
|---|
| | | // newObj.children = newObj.children.concat(b.children); |
|---|
| | | // } else { |
|---|
| | | // newObj = b; |
|---|
| | | // } |
|---|
| | | // }); |
|---|
| | | // finalPlotting.push(newObj); |
|---|
| | | // }); |
|---|
| | | // let json = { |
|---|
| | | // name: "æ±è交æ§æºæ
§é«é", |
|---|
| | | // id: 1, |
|---|
| | | // open: true, |
|---|
| | | // children: finalPlotting, |
|---|
| | | // }; |
|---|
| | | // that.initData(json); |
|---|
| | | // }, 2000); |
|---|
| | | // }, |
|---|
| | | // (error) => { |
|---|
| | | // setTimeout(() => { |
|---|
| | | // downloading.close(); |
|---|
| | | // // console.log("é误", error.message); |
|---|
| | | // this.$message.error("æ°æ®è¯·æ±å¤±è´¥"); |
|---|
| | | // }, 2000); |
|---|
| | | // } |
|---|
| | | // ); |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // æ¸
é¤æ¬å°æææ ç»ä¿¡æ¯ |
|---|
| | | deleteAllPlot() { |
|---|
| | |
|---|
| | | } |
|---|
| | | // åå§å®ä½ |
|---|
| | | |
|---|
| | | document.title = sessionStorage.getItem("SmartEarthTitle") || "ä¸å¼ å¾"; |
|---|
| | | document.title = sessionStorage.getItem("SmartEarthTitle") || "æ±è交æ§æºæ
§é«é"; |
|---|
| | | } else { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.loadDataToScene(); |
|---|
| | |
|---|
| | | if (addData && node._children) { |
|---|
| | | node._children.forEach((item) => { |
|---|
| | | _treeTool.addData(item); |
|---|
| | | this.setAddGLBLayer(item); |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | |
|---|
| | | addData && _treeTool.addData(node); |
|---|
| | | this.setAddGLBLayer(node); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (node.children && node.children.length) { |
|---|
| | |
|---|
| | | // å¾é |
|---|
| | | check(treeNode, data) { |
|---|
| | | let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1; |
|---|
| | | |
|---|
| | | // å¾éèç¹ |
|---|
| | | this.checkTreeNode({ id: treeNode.id, checked: isCheck }); |
|---|
| | | // æ´æ°åºæ¯æ°æ® |
|---|
| | | _treeTool.checkNode(treeNode, isCheck); |
|---|
| | | |
|---|
| | | if (treeNode.sourceType === 'GLB') { |
|---|
| | | if (isCheck) { |
|---|
| | | model.addModelLayer(treeNode); |
|---|
| | | } else { |
|---|
| | | model.setDelGLBModel(treeNode); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // åªè½åæ¶å è½½ä¸ä¸ªå°å½¢ |
|---|
| | | if ( |
|---|
| | | isCheck && |
|---|
| | |
|---|
| | | }; |
|---|
| | | this.addData(data, newChild); |
|---|
| | | }) |
|---|
| | | .catch(() => {}); |
|---|
| | | .catch(() => { }); |
|---|
| | | }, |
|---|
| | | // éæ©æ°æ® |
|---|
| | | selectData(data) { |
|---|
| | |
|---|
| | | case "pathLayer": |
|---|
| | | this.$refs.addPathLayer.open(type, editData, defaultData); |
|---|
| | | break; |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | openScene(filedata) { |
|---|
| | |
|---|
| | | let json = data.data; |
|---|
| | | this.initData(json); |
|---|
| | | }) |
|---|
| | | .catch(() => {}); |
|---|
| | | .catch(() => { }); |
|---|
| | | }, |
|---|
| | | saveScene(data) { |
|---|
| | | let fileName = data.name; |
|---|
| | |
|---|
| | | alert("ä¿åæåï¼"); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(() => {}); |
|---|
| | | .catch(() => { }); |
|---|
| | | }, |
|---|
| | | // æ·»å æ°æ®å°åºæ¯ |
|---|
| | | addSceneData(data, isEdit) { |
|---|
| | |
|---|
| | | // æ·»å æ èç¹ |
|---|
| | | addData(data, value) { |
|---|
| | | !value.rename && (value.rename = false); |
|---|
| | | |
|---|
| | | this.addTreeChildren({ pid: data && data.id, item: value }); |
|---|
| | | this.expandedNode(data); |
|---|
| | | |
|---|
| | |
|---|
| | | addOtherData(parentName, data) { |
|---|
| | | let parentNode = this.getParentNodeByName(parentName); |
|---|
| | | data.checked = true; |
|---|
| | | |
|---|
| | | this.setAddGLBLayer(data); |
|---|
| | | if (!parentNode) { |
|---|
| | | parentNode = { |
|---|
| | | id: window.sgworld.Core.getuid(), |
|---|
| | |
|---|
| | | } else { |
|---|
| | | this.addData(parentNode, { ...data, item: undefined }); |
|---|
| | | _treeTool.treeData && _treeTool.treeData.set(data.id, data.item); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setAddGLBLayer(res) { |
|---|
| | | |
|---|
| | | if (res.sourceType == "GLB" && res.checked) { |
|---|
| | | |
|---|
| | | model.addModelLayer(res); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ·»å æ¼ç¤ºå¨ç» |
|---|
| | |
|---|
| | | this.addOtherData("æ¼ç¤ºå¨ç»", data); |
|---|
| | | this.$refs.animationEdit.open(id); |
|---|
| | | }) |
|---|
| | | .catch(() => {}); |
|---|
| | | .catch(() => { }); |
|---|
| | | }, |
|---|
| | | //æ´æ°å¨ç» |
|---|
| | | updateAnimation(id, data) { |
|---|
| | |
|---|
| | | if (treeNode.animationDatas) { |
|---|
| | | this.$refs.animationEdit.start(treeNode.animationDatas); |
|---|
| | | } else { |
|---|
| | | _treeTool.flyTo(treeNode); |
|---|
| | | if (treeNode.sourceType === 'GLB') { |
|---|
| | | model.flyTo(treeNode); |
|---|
| | | } else { |
|---|
| | | |
|---|
| | | _treeTool.flyTo(treeNode); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | select() { |
|---|
| | |
|---|
| | | rightClick(e, data, node, comp) { |
|---|
| | | this.isClickParent = !!data.children; |
|---|
| | | this.selectNode = data; |
|---|
| | | console.log(this.selectNode); |
|---|
| | | this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" }; |
|---|
| | | this.rightClickMenuDisplay = true; |
|---|
| | | document.onclick = (e) => { |
|---|
| | |
|---|
| | | }, |
|---|
| | | // å³é®å é¤æé®ç¹å»äºä»¶ |
|---|
| | | deleteTreeNode() { |
|---|
| | | if (this.selectNode.sourceType === "GLB") { |
|---|
| | | model.setDelGLBModel(this.selectNode) |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.remove(this.selectNode); |
|---|
| | | this.$refs.tree && this.$refs.tree.setCurrentKey(null); |
|---|
| | | this.selectNode = undefined; |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // å³é®ç¼è¾æé®ç¼è¾æ èç¹ |
|---|
| | | editTreeNode() { |
|---|
| | |
|---|
| | | this.selectNode.id, |
|---|
| | | this.selectNode.animationDatas |
|---|
| | | ); |
|---|
| | | } else if (this.selectNode.sourceType === "GLB") { |
|---|
| | | model.getEditModelLayer(this.selectNode); |
|---|
| | | } else { |
|---|
| | | this.openThisTypePop(this.selectNode.sourceType, this.selectNode); |
|---|
| | | } |
|---|
| | |
|---|
| | | /deep/.button-user i { |
|---|
| | | color: #ffffff !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .historyBtn { |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .closeBtn { |
|---|
| | | color: white; |
|---|
| | | position: relative; |
|---|
| | |
|---|
| | | padding: 10px 0px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .closePanel { |
|---|
| | | position: absolute; |
|---|
| | | right: 12px; |
|---|
| | |
|---|
| | | z-index: 999; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .treeContainer { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | .treeTitle { |
|---|
| | | margin: 0px 0px 10px 10px; |
|---|
| | | |
|---|
| | | button { |
|---|
| | | background-color: rgba(155, 155, 155, 0.7) !important; |
|---|
| | | width: 30px; |
|---|
| | |
|---|
| | | padding: 5px 3px !important; |
|---|
| | | border: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .el-upload { |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | |
|---|
| | | background-color: rgba(245, 247, 250, 0.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .el-tree-node:focus > .el-tree-node__content { |
|---|
| | | /deep/ .el-tree-node:focus>.el-tree-node__content { |
|---|
| | | background-color: rgba(245, 247, 250, 0.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .el-checkbox > .is-disabled { |
|---|
| | | /deep/ .el-checkbox>.is-disabled { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | .rightClickMenu ul li:hover { |
|---|
| | | background-color: #ebeef5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .wdzy::-webkit-scrollbar { |
|---|
| | | /*æ»å¨æ¡æ´ä½æ ·å¼*/ |
|---|
| | | width: 5px; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="modelBox" v-drag> |
|---|
| | | <div> |
|---|
| | | <div class="modleTitle "> |
|---|
| | | <div>模åç¼è¾</div> |
|---|
| | | <div class="modelClose" @click="$store.state.isShowEditLayer = false"> X</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="modelContent"> |
|---|
| | | <el-form :model="modelOption" label-width="80px"> |
|---|
| | | <el-form-item label="å称"> |
|---|
| | | <el-input v-model="modelOption.name" @change="setModelFormChange(1)" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="ç»åº¦"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" v-model="modelOption.style.longitude" |
|---|
| | | :step="0.001" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="维度"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" v-model="modelOption.style.latitude" |
|---|
| | | :step="0.001" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="é«åº¦"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" :min="-100" :max="1000" |
|---|
| | | v-model="modelOption.style.altitude" :step="1" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="å移è§åº¦"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" :min="-180" :max="180" |
|---|
| | | v-model="modelOption.style.heading" :step="1" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="俯仰è§åº¦"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" :min="-90" :max="90" |
|---|
| | | v-model="modelOption.style.pitch" :step="1" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ转è§åº¦"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" :min="-90" :max="90" |
|---|
| | | v-model="modelOption.style.roll" :step="1" /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ¯ä¾"> |
|---|
| | | <el-input-number style="width: 100%;" @change="setModelFormChange(2)" :min="0.1" :step="0.1" :max="10" |
|---|
| | | v-model="modelOption.style.scale" /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import model from '../../../assets/js/Layer/model'; |
|---|
| | | |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "modelEdit", |
|---|
| | | components: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | modelOption: { |
|---|
| | | id: null, |
|---|
| | | sourceType: null, |
|---|
| | | name: "", |
|---|
| | | style: { |
|---|
| | | url: null, |
|---|
| | | name: null, |
|---|
| | | altitude: null, |
|---|
| | | longitude: null, |
|---|
| | | latitude: null, |
|---|
| | | heading: null, |
|---|
| | | pitch: null, |
|---|
| | | roll: null, |
|---|
| | | scale: null, |
|---|
| | | url: null, |
|---|
| | | id: null, |
|---|
| | | sourceType: null, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.setLayerStart(); |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | setModelFormChange(res) { |
|---|
| | | if (res == 1) { |
|---|
| | | this.modelOption.style.name = this.modelOption.name; |
|---|
| | | } |
|---|
| | | model.setEditChanege(this.modelOption, res); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setLayerStart() { |
|---|
| | | this.modelOption = model.form; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | .modelBox { |
|---|
| | | width: 360px; |
|---|
| | | height: 60%; |
|---|
| | | border: 1px solid white; |
|---|
| | | top: 70px; |
|---|
| | | right: 20px; |
|---|
| | | background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important |
|---|
| | | z-index: 9999; |
|---|
| | | position: absolute; |
|---|
| | | |
|---|
| | | .modleTitle { |
|---|
| | | height: 42px; |
|---|
| | | width: 90%; |
|---|
| | | background: #0048fd69 !important; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | color: white; |
|---|
| | | font-weight: 700px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | padding: 0% 5%; |
|---|
| | | |
|---|
| | | .modelClose { |
|---|
| | | height: 16px; |
|---|
| | | width: 16px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | background: rgba(128, 128, 128, 0.6); |
|---|
| | | font-size: 14x; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .modelContent { |
|---|
| | | width: 90%; |
|---|
| | | height: calc(95% - 42px); |
|---|
| | | margin: 5%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | flex-flow: row wrap; |
|---|
| | | |
|---|
| | | .modelType { |
|---|
| | | width: 47.5%; |
|---|
| | | height: 20%; |
|---|
| | | border: 1px solid #909399; |
|---|
| | | |
|---|
| | | .imgIcon { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .modelType :hover { |
|---|
| | | border: 1px solid #409EFF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/.el-form-item__label { |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="modelBox" v-drag > |
|---|
| | | <div> |
|---|
| | | <div class="modleTitle " > |
|---|
| | | <div>模åæ·»å </div> |
|---|
| | | <div class="modelClose" @click="$store.state.showModelFlag = false"> X</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="modelContent"> |
|---|
| | | <div class="modelType" v-for="(item, index) in modelOption" :key="index" @click="setModelAddLayer(item)"> |
|---|
| | | <img class="imgIcon" :src="require('../../../assets/img/model/' + item.imgUrl)" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import model from '../../../assets/js/Layer/model'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "modelLayer", |
|---|
| | | components: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | modelOption: [ |
|---|
| | | |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.setLayerStart(); |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | setLayerStart() { |
|---|
| | | this.modelOption = layerData.modelData; |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setModelAddLayer(item) { |
|---|
| | | // model |
|---|
| | | model.changeLayer(item,true); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped lang="less"> |
|---|
| | | .modelBox { |
|---|
| | | width: 360px; |
|---|
| | | height: 60%; |
|---|
| | | border: 1px solid white; |
|---|
| | | top: 70px; |
|---|
| | | right: 20px; |
|---|
| | | background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important |
|---|
| | | z-index: 9999; |
|---|
| | | position: absolute; |
|---|
| | | |
|---|
| | | .modleTitle { |
|---|
| | | height: 42px; |
|---|
| | | width: 90%; |
|---|
| | | background: #0048fd69 !important; |
|---|
| | | border-bottom: 1px solid white; |
|---|
| | | color: white; |
|---|
| | | font-weight: 700px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | padding: 0% 5%; |
|---|
| | | |
|---|
| | | .modelClose { |
|---|
| | | height: 16px; |
|---|
| | | width: 16px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | background: rgba(128, 128, 128, 0.6); |
|---|
| | | font-size: 14x; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .modelContent { |
|---|
| | | width: 90%; |
|---|
| | | height: calc(95% - 42px); |
|---|
| | | margin: 5%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | flex-flow: row wrap; |
|---|
| | | |
|---|
| | | .modelType { |
|---|
| | | width: 47.5%; |
|---|
| | | height: 20%; |
|---|
| | | border: 1px solid #909399; |
|---|
| | | |
|---|
| | | .imgIcon { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .modelType :hover { |
|---|
| | | border: 1px solid #409EFF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | target: "mapContainer", |
|---|
| | | layers: [], |
|---|
| | | view: new View({ |
|---|
| | | center: olProj.fromLonLat([108.945951, 34.465262]), |
|---|
| | | center: [105.02, 34.9], |
|---|
| | | zoom: 5, |
|---|
| | | projection: "EPSG:4326", |
|---|
| | | }), |
|---|
| | | controls: [], |
|---|
| | | }); |
|---|
| | |
|---|
| | | import jiejing from "@/assets/img/new/jiejing.png"; |
|---|
| | | import "animate.css"; |
|---|
| | | import Bus from "@tools/Bus"; |
|---|
| | | import mapViewer from "../../assets/js/Layer/mapViewer"; |
|---|
| | | |
|---|
| | | let activeLi, nLayer, LWLayer; |
|---|
| | | export default { |
|---|
| | |
|---|
| | | Viewer.scene.globe.translucency.frontFaceAlpha = 0.5; |
|---|
| | | Viewer.scene.globe.undergroundColor = undefined; |
|---|
| | | //å¼å¯ç¼è¾å¹¶å¯ç¨å±æ§å¼¹çª |
|---|
| | | sgworld.Creator.SimpleGraphic.setEdit(true, { |
|---|
| | | editProp: true, |
|---|
| | | sgworld.Creator.SimpleGraphic.setEdit(false, { |
|---|
| | | editProp: false, |
|---|
| | | editPropData: { |
|---|
| | | offset: "r", |
|---|
| | | height: "60%", |
|---|
| | |
|---|
| | | //åå§åå¼¹çªäºä»¶ |
|---|
| | | // that.showBottom(); |
|---|
| | | that.initLayerOpen(); |
|---|
| | | //æ·»å é¼ æ ç¹å»äºä»¶ |
|---|
| | | mapViewer.addClick(); |
|---|
| | | }); |
|---|
| | | let size = this.detectZoom(); |
|---|
| | | this.scale = (100 / size).toFixed(2); |
|---|
| | |
|---|
| | | let video4; |
|---|
| | | let heatMapItem; |
|---|
| | | import { mapState, mapMutations } from "vuex"; |
|---|
| | | import { queryBySquare } from "@/utils/request"; |
|---|
| | | // import { queryBySquare } from "@/utils/request"; |
|---|
| | | import Bus from "../tools/Bus"; |
|---|
| | | import { roman } from "../../assets/json/index.js"; |
|---|
| | | import URLInCode from "@/assets/js/urlInCode"; |
|---|
| | |
|---|
| | | :src="switchMenuImage" |
|---|
| | | /> |
|---|
| | | <div class="menubtnlist" v-show="panelActive"> |
|---|
| | | <div class="menubtn" @click="showSceneCard()"> |
|---|
| | | <img |
|---|
| | | class="bhImg" |
|---|
| | | title="åºæ¯æ°æ®" |
|---|
| | | src="@/assets/img/left/specialeffect4.png" |
|---|
| | | /> |
|---|
| | | <span>åºæ¯</span> |
|---|
| | | </div> |
|---|
| | | <div class="menubtn" @click="setMenuTool(1)"> |
|---|
| | | <img class="bhImg" title="æ ç»" src="@/assets/img/right/bh1.png" /> |
|---|
| | | <span>æ ç»</span> |
|---|
| | |
|---|
| | | <img class="bhImg" title="漫游" src="@/assets/img/right/my11.png" /> |
|---|
| | | <span>漫游</span> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="menubtn" @click="setMenuTool(4)"> |
|---|
| | | <div class="menubtn" @click="showModelCard()"> |
|---|
| | | <img |
|---|
| | | class="bhImg" |
|---|
| | | title="ä¸é¢" |
|---|
| | | src="@/assets/img/left/specialanalyse4.png" |
|---|
| | | /> |
|---|
| | | <span>ä¸é¢</span> |
|---|
| | | </div> --> |
|---|
| | | <span>模å</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="menubtn" @click="setMenuTool(5)"> |
|---|
| | | <img class="bhImg" title="åæ" src="@/assets/img/right/cx-s.png" /> |
|---|
| | | <span>åæ</span> |
|---|
| | |
|---|
| | | /> |
|---|
| | | <span>设置</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="menutools"> |
|---|
| | |
|---|
| | | showSettingCard() { |
|---|
| | | this.$store.commit("showSetBox", true); |
|---|
| | | }, |
|---|
| | | showModelCard(){ |
|---|
| | | this.$store.commit("showModelBox", true); |
|---|
| | | }, |
|---|
| | | showSceneCard(){ |
|---|
| | | this.$store.commit("showSceneBox", ""); |
|---|
| | | }, |
|---|
| | | closeAllHighLight(type) { |
|---|
| | | // !(type == "plotting") && this.$refs.plotting.clearHighLight(); |
|---|
| | | // !(type == "roam") && this.$refs.roam.clearActive(); |
|---|
| | |
|---|
| | | popper-class="item_tooltip" |
|---|
| | | > |
|---|
| | | <div class="legend-bg" @click="fovViewer"> |
|---|
| | | <img class="dwImg" src="@/assets/img/new/location.png" /> |
|---|
| | | <img class="dwImg" src="@/assets/img/new/mapSplit.png" /> |
|---|
| | | </div> |
|---|
| | | </el-tooltip> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | let _index = 0; |
|---|
| | | import rightLegend from "./right-legend"; |
|---|
| | | import Bus from "../tools/Bus"; |
|---|
| | | import { mapState, mapMutations } from "vuex"; |
|---|
| | | export default { |
|---|
| | | name: "right-bottom", |
|---|
| | | components: { |
|---|
| | |
|---|
| | | isActive: true, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapState(["viewer1Show", "isLand", "yqfk", "qyEchartsShow"]), |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | //å
³éæçèµæºå¼¹çª |
|---|
| | | Bus.$on("closeLegendPop", (data) => { |
|---|
| | | if (data) { |
|---|
| | |
|---|
| | | Bus.$off("closeLegendPop"); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ...mapMutations(["setViewer1Show", "setqyEchartsShow"]), |
|---|
| | | // ç¸æºåæ° |
|---|
| | | getcamera() { |
|---|
| | | let p = sgworld.Navigate.getCameraInfo(); |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | fovViewer() { |
|---|
| | | this.isWideAngle = !this.isWideAngle; |
|---|
| | | if (this.isWideAngle) { |
|---|
| | | this.wideAngle = window.Viewer.camera.frustum.fov; |
|---|
| | | window.Viewer.camera.frustum.fov = 2; |
|---|
| | | } else { |
|---|
| | | window.Viewer.camera.frustum.fov = this.wideAngle; |
|---|
| | | } |
|---|
| | | this.setViewer1Show(!this.viewer1Show); |
|---|
| | | // this.isWideAngle = !this.isWideAngle; |
|---|
| | | // if (this.isWideAngle) { |
|---|
| | | // this.wideAngle = window.Viewer.camera.frustum.fov; |
|---|
| | | // window.Viewer.camera.frustum.fov = 2; |
|---|
| | | // } else { |
|---|
| | | // window.Viewer.camera.frustum.fov = this.wideAngle; |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | flyBack() { |
|---|
| | | sgworld.Navigate.flyToPointsInterest({ |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="trigger" style="margin-top: 140px; margin-right: 10px"> |
|---|
| | | <div class="user"> |
|---|
| | | <el-avatar |
|---|
| | | class="user_btn" |
|---|
| | | :size="70.6" |
|---|
| | | icon="el-icon-user-solid" |
|---|
| | | alt="个人ä¸å¿" |
|---|
| | | ></el-avatar> |
|---|
| | | <!-- <div class="user"> |
|---|
| | | <el-avatar class="user_btn" :size="70.6" icon="el-icon-user-solid" alt="个人ä¸å¿"></el-avatar> |
|---|
| | | <div class="transition-box"> |
|---|
| | | <ul> |
|---|
| | | <li @click="showLayer()">æ ç»æ°æ®</li> |
|---|
| | | <!-- <li @click="dialogFormVisible = true">ä¿®æ¹å¯ç </li> --> |
|---|
| | | <li @click="dialogFormVisible = true">ä¿®æ¹å¯ç </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-dialog |
|---|
| | | append-to-body |
|---|
| | | title="ä¿®æ¹å¯ç " |
|---|
| | | :visible.sync="dialogFormVisible" |
|---|
| | | width="30%" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | custom-class="psdDialog" |
|---|
| | | > |
|---|
| | | </div> --> |
|---|
| | | <el-dialog append-to-body title="ä¿®æ¹å¯ç " :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false" |
|---|
| | | custom-class="psdDialog"> |
|---|
| | | <el-form :model="form" ref="pwdForm" :rules="rules"> |
|---|
| | | <el-form-item label="åå¯ç "> |
|---|
| | | <el-input |
|---|
| | | show-password |
|---|
| | | v-model="form.oldPassword" |
|---|
| | | autocomplete="off" |
|---|
| | | ></el-input> |
|---|
| | | <el-input show-password v-model="form.oldPassword" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item label="æ°å¯ç " prop="newPassword"> |
|---|
| | | <el-input |
|---|
| | | show-password |
|---|
| | | v-model="form.newPassword" |
|---|
| | | autocomplete="off" |
|---|
| | | ></el-input> |
|---|
| | | <el-input show-password v-model="form.newPassword" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item label="确认å¯ç " prop="checkPassword"> |
|---|
| | | <el-input |
|---|
| | | show-password |
|---|
| | | v-model="form.checkPassword" |
|---|
| | | autocomplete="off" |
|---|
| | | ></el-input> |
|---|
| | | <el-input show-password v-model="form.checkPassword" autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> --> |
|---|
| | | <div class="user_menu" v-show="isShowLayer"><Layer ref="Layer" /></div> |
|---|
| | | <div class="user_menu" v-show="$store.state.isShowLayer"> |
|---|
| | | <Layer ref="Layer" /> |
|---|
| | | </div> |
|---|
| | | <model-layer v-show="$store.state.showModelFlag"></model-layer> |
|---|
| | | <model-edit v-if="$store.state.isShowEditLayer"></model-edit> |
|---|
| | | <querydata ref="drawer" /> |
|---|
| | | |
|---|
| | | <div class="resByMouseBox" v-if="showRangeBox"> |
|---|
| | |
|---|
| | | <div class="listBox" v-for="(son, index) in fa" :key="index"> |
|---|
| | | {{ |
|---|
| | | son.properties["é¨ä»¶ç¼ç "] |
|---|
| | | ? son.properties["é¨ä»¶ç¼ç "] |
|---|
| | | : son.properties["äºç¼å·"] |
|---|
| | | ? son.properties["é¨ä»¶ç¼ç "] |
|---|
| | | : son.properties["äºç¼å·"] |
|---|
| | | }} |
|---|
| | | {{ |
|---|
| | | son.properties["é¨ä»¶å称"] |
|---|
| | | ? son.properties["é¨ä»¶å称"] |
|---|
| | | : son.properties["äºå称"] |
|---|
| | | ? son.properties["é¨ä»¶å称"] |
|---|
| | | : son.properties["äºå称"] |
|---|
| | | }} |
|---|
| | | |
|---|
| | | <el-link @click.stop="showDetail(son)">详æ
</el-link> |
|---|
| | |
|---|
| | | <div class="right-close" v-show="isShow" @click="simulationHoverOff"> |
|---|
| | | Ã |
|---|
| | | </div> |
|---|
| | | <el-tabs |
|---|
| | | type="border-card" |
|---|
| | | :tab-position="tabPosition" |
|---|
| | | v-model="activeName" |
|---|
| | | @tab-click="tabclick" |
|---|
| | | > |
|---|
| | | <el-tabs type="border-card" :tab-position="tabPosition" v-model="activeName" @tab-click="tabclick"> |
|---|
| | | <div v-show="isShowLocation" class="rightcontent"> |
|---|
| | | <transition name="el-fade-in-linear"> |
|---|
| | | <location v-show="isShowLocation" ref="location" /> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | <el-tab-pane label="æ ç»" name="æ ç»"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('æ ç»')"> |
|---|
| | | <img |
|---|
| | | class="bhImg" |
|---|
| | | title="æ ç»" |
|---|
| | | v-if="!isShowPlotting" |
|---|
| | | src="@/assets/img/right/bh1.png" |
|---|
| | | /> |
|---|
| | | <img class="bhImg" title="æ ç»" v-if="!isShowPlotting" src="@/assets/img/right/bh1.png" /> |
|---|
| | | <img v-else title="æ ç»" src="@/assets/img/right/bh-l.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowPlotting" class="rightcontent"> |
|---|
| | |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="éç®" name="éç®"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('éç®')"> |
|---|
| | | <img |
|---|
| | | class="lsImg" |
|---|
| | | title="éç®" |
|---|
| | | v-if="!isShowMeasure" |
|---|
| | | src="@/assets/img/right/ls-s.png" |
|---|
| | | /> |
|---|
| | | <img class="lsImg" title="éç®" v-if="!isShowMeasure" src="@/assets/img/right/ls-s.png" /> |
|---|
| | | <img v-else title="éç®" src="@/assets/img/right/ls-l.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowMeasure" class="rightcontent"> |
|---|
| | |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="空é´æ¥è¯¢" name="空é´æ¥è¯¢"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('空é´æ¥è¯¢')"> |
|---|
| | | <img |
|---|
| | | class="cxImg" |
|---|
| | | title="空é´æ¥è¯¢" |
|---|
| | | v-if="!isShowQuery" |
|---|
| | | src="@/assets/img/right/cx-s.png" |
|---|
| | | /> |
|---|
| | | <img class="cxImg" title="空é´æ¥è¯¢" v-if="!isShowQuery" src="@/assets/img/right/cx-s.png" /> |
|---|
| | | <img v-else title="空é´æ¥è¯¢" src="@/assets/img/right/cx-ll.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowQuery" class="rightcontent"> |
|---|
| | |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="漫游" name="漫游"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('漫游')"> |
|---|
| | | <img |
|---|
| | | class="myImg" |
|---|
| | | title="漫游" |
|---|
| | | v-if="!isShowRoam" |
|---|
| | | src="@/assets/img/right/my11.png" |
|---|
| | | /> |
|---|
| | | <img class="myImg" title="漫游" v-if="!isShowRoam" src="@/assets/img/right/my11.png" /> |
|---|
| | | <img v-else title="漫游" src="@/assets/img/right/my-l.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowRoam" class="rightcontent"> |
|---|
| | |
|---|
| | | </el-tab-pane> --> |
|---|
| | | <el-tab-pane label="ä¸é¢åæ" name="ä¸é¢åæ"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('ä¸é¢åæ')"> |
|---|
| | | <img |
|---|
| | | class="specialImg" |
|---|
| | | v-if="!isShowSpeAnalyseImg" |
|---|
| | | src="@/assets/img/left/specialanalyse4.png" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | class="specialImg" |
|---|
| | | v-else |
|---|
| | | src="@/assets/img/left/specialanalyse4-s.png" |
|---|
| | | /> |
|---|
| | | <img class="specialImg" v-if="!isShowSpeAnalyseImg" src="@/assets/img/left/specialanalyse4.png" /> |
|---|
| | | <img class="specialImg" v-else src="@/assets/img/left/specialanalyse4-s.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowSpeAnalyse" class="leftContent"> |
|---|
| | | <leftztfx ref="ZTFX" /> |
|---|
| | |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="ç¹æ" name="ç¹æ"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('ç¹æ')"> |
|---|
| | | <img |
|---|
| | | class="speEffectImg" |
|---|
| | | v-if="!isShowSpeEffectImg" |
|---|
| | | src="@/assets/img/left/specialeffect4.png" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | class="speEffectImg" |
|---|
| | | v-else |
|---|
| | | src="@/assets/img/left/specialeffect4-s.png" |
|---|
| | | /> |
|---|
| | | <img class="speEffectImg" v-if="!isShowSpeEffectImg" src="@/assets/img/left/specialeffect4.png" /> |
|---|
| | | <img class="speEffectImg" v-else src="@/assets/img/left/specialeffect4-s.png" /> |
|---|
| | | </span> |
|---|
| | | <div v-show="isShowSpeEffect" class="leftContent"> |
|---|
| | | <lefttx ref="TX" /> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="æ¸
é¤" name="æ¸
é¤"> |
|---|
| | | <span slot="label" @click="simulationHoverOn('æ¸
é¤')" |
|---|
| | | ><img title="æ¸
é¤" class="qcImg" src="@/assets/img/right/qc-s.png" |
|---|
| | | /></span> |
|---|
| | | <span slot="label" @click="simulationHoverOn('æ¸
é¤')"><img title="æ¸
é¤" class="qcImg" |
|---|
| | | src="@/assets/img/right/qc-s.png" /></span> |
|---|
| | | </el-tab-pane> |
|---|
| | | </el-tabs> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | z-index: 1000; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .resByMouseBox .closeBtn { |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | |
|---|
| | | top: 3px; |
|---|
| | | font-size: 24px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-link.el-link--default { |
|---|
| | | color: #409eff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detailBox { |
|---|
| | | width: 200px; |
|---|
| | | /* height: 300px; */ |
|---|
| | |
|---|
| | | padding: 20px 10px 10px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detailcCloseBtn { |
|---|
| | | font-size: 24px; |
|---|
| | | position: absolute; |
|---|
| | |
|---|
| | | top: 5px; |
|---|
| | | /* float: right; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detailBox :not(:first-child) { |
|---|
| | | margin-top: 5px; |
|---|
| | | } |
|---|
| | |
|---|
| | | margin-top: 0px !important; |
|---|
| | | /* border-radius: 3px !important; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user:hover .transition-box { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .transition-box { |
|---|
| | | display: none; |
|---|
| | | width: 130px; |
|---|
| | |
|---|
| | | box-sizing: border-box; |
|---|
| | | z-index: 9999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .transition-box ul li { |
|---|
| | | /* min-width: 154px; */ |
|---|
| | | height: 35px; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 35px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .transition-box ul li:hover { |
|---|
| | | background: rgba(18, 80, 172, 0.6); |
|---|
| | | box-shadow: 0px 0px 10px 5px rgba(0, 132, 255, 0.7) inset; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .psdDialog .el-form-item { |
|---|
| | | margin-bottom: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* .psdDialog, |
|---|
| | | .psdDialog /deep/ .el-pager li { |
|---|
| | | background-color: rgba(255, 0, 0, 0.0); |
|---|
| | |
|---|
| | | .trigger { |
|---|
| | | pointer-events: all; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .specialTool { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 60px; |
|---|
| | |
|---|
| | | cursor: pointer; |
|---|
| | | /* box-shadow: 0px 0px 5px 5px #fff; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .top-btn-active { |
|---|
| | | background: #0987ff !important; |
|---|
| | | } |
|---|
| | |
|---|
| | | margin: 1px; |
|---|
| | | margin: 20px 0; |
|---|
| | | } |
|---|
| | | .searchElBg{ |
|---|
| | | |
|---|
| | | .searchElBg { |
|---|
| | | background-image: url("~@/assets/img/new/leftCircle.png") !important; |
|---|
| | | background-size: 48px 48px !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .searchBtn { |
|---|
| | | margin-top: 3px; |
|---|
| | | width: 40px; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | .searchElBg:hover{ |
|---|
| | | |
|---|
| | | .searchElBg:hover { |
|---|
| | | background-image: url("~@/assets/img/new/leftCircle-y.png") !important; |
|---|
| | | background-size: 48px 48px !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .searchBg { |
|---|
| | | position: absolute; |
|---|
| | | left: -4px; |
|---|
| | |
|---|
| | | height: 56px; |
|---|
| | | z-index: -10; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .active { |
|---|
| | | background: #0987ff !important; |
|---|
| | | } |
|---|
| | |
|---|
| | | height: 71px; |
|---|
| | | background-image: url("~@/assets/img/new/rightCircle.png"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user:hover { |
|---|
| | | background-image: url("~@/assets/img/new/rightCircle-y.png"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user .el-avatar { |
|---|
| | | background-color: transparent; |
|---|
| | | margin: 3px auto 0; |
|---|
| | |
|---|
| | | margin-right: 0px !important; |
|---|
| | | font-size: 28.9px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fcfhBox { |
|---|
| | | position: relative; |
|---|
| | | top: -50px; |
|---|
| | |
|---|
| | | background-color: rgba(24, 87, 175, 0.7); |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fcfhactive { |
|---|
| | | background-color: #17a8fc !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .fcfhBox button { |
|---|
| | | background-color: rgba(24, 64, 118, 1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .closeBtn { |
|---|
| | | font-size: 24px; |
|---|
| | | color: #fff; |
|---|
| | | vertical-align: top; |
|---|
| | | margin-left: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .resByMouseBox /deep/ .el-collapse-item__header { |
|---|
| | | background-color: transparent; |
|---|
| | | color: #fff; |
|---|
| | | height: 37px; |
|---|
| | | padding-left: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .resByMouseBox /deep/ .el-collapse-item__wrap { |
|---|
| | | background-color: transparent; |
|---|
| | | /* color: #fff; */ |
|---|
| | | /* height: 37px; */ |
|---|
| | | /* padding-left: 15px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottomWrap { |
|---|
| | | margin-top: 28px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottomWrap /deep/ .el-collapse-item__content { |
|---|
| | | /* max-height: 308px; */ |
|---|
| | | /* overflow: auto; */ |
|---|
| | |
|---|
| | | padding-left: 15px; |
|---|
| | | padding-bottom: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .listBox { |
|---|
| | | width: 90%; |
|---|
| | | margin: 3px 0; |
|---|
| | |
|---|
| | | import common from "@/components/common"; |
|---|
| | | import { mapState, mapMutations } from "vuex"; |
|---|
| | | import Bus from "../tools/Bus"; |
|---|
| | | import { queryBySquare } from "@/utils/request"; |
|---|
| | | // import { queryBySquare } from "@/utils/request"; |
|---|
| | | import FCFH from "@/components/right/FCFH"; |
|---|
| | | |
|---|
| | | import modelLayer from "@/components/left/layerTree/modelLayer.vue"; |
|---|
| | | import modelEdit from '@/components/left/layerTree/modelEdit.vue'; |
|---|
| | | //交éå¾å± |
|---|
| | | let trafficLayer, panoramaLayer; |
|---|
| | | let flyPoint; |
|---|
| | |
|---|
| | | lefttx, |
|---|
| | | Layer, |
|---|
| | | FCFH, |
|---|
| | | modelLayer, |
|---|
| | | modelEdit |
|---|
| | | }, |
|---|
| | | name: "right-top", |
|---|
| | | data() { |
|---|
| | |
|---|
| | | closeall() { |
|---|
| | | try { |
|---|
| | | this.$refs.measure.clearMeasure(); |
|---|
| | | } catch (e) {} |
|---|
| | | } catch (e) { } |
|---|
| | | this.isShow = false; |
|---|
| | | this.isShowLocation = false; |
|---|
| | | this.isShowPlotting = false; |
|---|
| | |
|---|
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
|---|
| | | sgworld.drawObj && |
|---|
| | | (sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(), |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | |
|---|
| | | this.isShowInput = !this.isShowInput; |
|---|
| | | !this.isShowInput && this.$refs.search.clear(); |
|---|
| | |
|---|
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
|---|
| | | sgworld.drawObj && |
|---|
| | | (sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(), |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | |
|---|
| | | this.isShowLocation = !this.isShowLocation; |
|---|
| | | if (!this.isShowLocation) { |
|---|
| | |
|---|
| | | layuiLayer.close(SmartEarthPopupData.layerProp); |
|---|
| | | sgworld.drawObj && |
|---|
| | | (sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(), |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | sgworld.drawObj.end && sgworld.drawObj.end()); |
|---|
| | | |
|---|
| | | this.isShowTraffic = !this.isShowTraffic; |
|---|
| | | |
|---|
| | |
|---|
| | | // å¼å
¥echarts |
|---|
| | | import * as echarts from 'echarts'; |
|---|
| | | Vue.prototype.$echarts = echarts |
|---|
| | | |
|---|
| | | import drag from './assets/js/drag'; |
|---|
| | | Vue.directive("drag",drag); |
|---|
| | | |
|---|
| | | Vue.use(contentmenu) |
|---|
| | | Vue.config.productionTip = false |
|---|
| | |
|---|
| | | import Vue from "vue"; |
|---|
| | | import Vuex from "vuex"; |
|---|
| | | import createPersistedState from "vuex-persistedstate"; //æä¹
åææstate |
|---|
| | | import mapSplit from "./mapSplit"; |
|---|
| | | // import { login } from '@/api/api'; |
|---|
| | | // var encrypt = new JSEncrypt(); |
|---|
| | | |
|---|
| | |
|---|
| | | selectedLayers: [], |
|---|
| | | userId: "", |
|---|
| | | userName: "", |
|---|
| | | // layerData: {} |
|---|
| | | showModelFlag:false,//模åæ·»å ç¼è¾ |
|---|
| | | isShowLayer:false, |
|---|
| | | addModelFlag:false, |
|---|
| | | addModelLayer:null, |
|---|
| | | isShowEditLayer:false, |
|---|
| | | }, |
|---|
| | | mutations: { |
|---|
| | | selectedLayer(state, b) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | setViewer1Show(state, b) { |
|---|
| | | state.viewer1Show = b; |
|---|
| | | if (b) { |
|---|
| | | mapSplit.init(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setqyEchartsShow(state, b) { |
|---|
| | | state.qyEchartsShow = b; |
|---|
| | | console.log(b); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | setLayerTreeTwoScreen(state, b) { |
|---|
| | | state.layerTreeTwoScreen = b; |
|---|
| | |
|---|
| | | }, |
|---|
| | | showSetBox(state, b) { |
|---|
| | | state.showSetting = b; |
|---|
| | | console.log(b) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showModelBox(state,b){ |
|---|
| | | state.showModelFlag = b; |
|---|
| | | }, |
|---|
| | | showSceneBox(state,b){ |
|---|
| | | state.isShowLayer = !state.isShowLayer; |
|---|
| | | }, |
|---|
| | | // å®ä¹å·¥ç¨æ æ°æ® |
|---|
| | | setTreeData(state, data = []) { |
|---|
| | | ergodicNode(data); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const mapSplit = { |
|---|
| | | levelArray: [ |
|---|
| | | 0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, |
|---|
| | | 250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, |
|---|
| | | 100, 50, 25, 10, 0, |
|---|
| | | ], |
|---|
| | | isSplitFlag: 0, |
|---|
| | | init() { |
|---|
| | | setTimeout(() => { |
|---|
| | | window.map.updateSize(); |
|---|
| | | this.showSplitMap(); |
|---|
| | | this.isSplitFlag = 1; |
|---|
| | | this.skdToOl(); |
|---|
| | | }, 500) |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | skdToOl() { |
|---|
| | | var position = window.Viewer.camera.position |
|---|
| | | |
|---|
| | | var ellipsoid = window.Viewer.scene.globe.ellipsoid; |
|---|
| | | var cartographic = ellipsoid.cartesianToCartographic(position) |
|---|
| | | var lat = Cesium.Math.toDegrees(cartographic.latitude) |
|---|
| | | var lng = Cesium.Math.toDegrees(cartographic.longitude) |
|---|
| | | var level = this.getLevel(cartographic.height) |
|---|
| | | console.log(lng, lat, level) |
|---|
| | | window.map.getView().setCenter([parseFloat(lng), parseFloat(lat)]) |
|---|
| | | window.map.getView().setZoom(level) |
|---|
| | | }, |
|---|
| | | getLevel(height) { |
|---|
| | | var levelArray = this.levelArray; |
|---|
| | | for (var i = 1, len = levelArray.length; i < len - 1; i++) { |
|---|
| | | if (height >= (levelArray[i] + levelArray[i + 1]) / 2) { |
|---|
| | | return i |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return levelArray.length - 1 |
|---|
| | | }, |
|---|
| | | getHeight(level) { |
|---|
| | | var levelArray = this.levelArray; |
|---|
| | | if (level > 0 && level < 23) { |
|---|
| | | return levelArray[level] |
|---|
| | | } |
|---|
| | | return levelArray[levelArray.length - 1] |
|---|
| | | }, |
|---|
| | | showSplitMap() { |
|---|
| | | var that = this; |
|---|
| | | $("#mapView") |
|---|
| | | .off() |
|---|
| | | .on("mousemove", function () { |
|---|
| | | if (that.isSplitFlag == 1) { |
|---|
| | | window.Viewer.camera.changed.addEventListener(that.skdToOl()) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .on("mouseout", function () { |
|---|
| | | if (that.isSplitFlag == 1) { |
|---|
| | | window.Viewer.camera.changed.removeEventListener(that.skdToOl()) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | let mapZoomAndMove = function (event) { |
|---|
| | | var position = window.map.getView().getCenter() |
|---|
| | | |
|---|
| | | |
|---|
| | | var pos = position |
|---|
| | | var level = that.getHeight(parseInt(window.map.getView().getZoom())) |
|---|
| | | |
|---|
| | | window.Viewer.camera.setView({ |
|---|
| | | destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level), |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | $("#mapOl") |
|---|
| | | .off() |
|---|
| | | .on("mousemove", function () { |
|---|
| | | if (that.isSplitFlag == 1) { |
|---|
| | | that.olzoomAndMove(mapZoomAndMove) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .on("mouseout", function () { |
|---|
| | | if (that.isSplitFlag == 1) { |
|---|
| | | that.clearolzoomAndMove() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, clearolzoomAndMove() { |
|---|
| | | let registerOnZoomArr = window.map.get("registerOnZoom") |
|---|
| | | if (registerOnZoomArr && registerOnZoomArr.length > 0) { |
|---|
| | | for (let i = 0; i < registerOnZoomArr.length; i++) { |
|---|
| | | window.map.un("moveend", registerOnZoomArr[i]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, olzoomAndMove(eventListen, notListenMove) { |
|---|
| | | // è®°å½å°å¾ç¼©æ¾ï¼ç¨äºå¤ææå¨ |
|---|
| | | window.map.lastZoom = |
|---|
| | | window.map.lastZoom || window.map.getView().getZoom() |
|---|
| | | // å°å¾ç¼©æ¾äºä»¶ |
|---|
| | | let registerOnZoom = function (e) { |
|---|
| | | // ä¸çå¬å°å¾æå¨äºä»¶ |
|---|
| | | if (notListenMove) { |
|---|
| | | if (window.map.lastZoom != window.map.getView().getZoom()) { |
|---|
| | | eventListen && eventListen(e) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | eventListen && eventListen(e) |
|---|
| | | } |
|---|
| | | window.map.lastZoom = window.map.getView().getZoom() |
|---|
| | | } |
|---|
| | | // ä¿å缩æ¾åæå¨äºä»¶å¯¹è±¡ï¼ç¨äºåæç§»é¤ |
|---|
| | | let registerOnZoomArr = map.get("registerOnZoom") || [] |
|---|
| | | |
|---|
| | | registerOnZoomArr.push(registerOnZoom) |
|---|
| | | |
|---|
| | | // 使ç¨å°å¾ set æ¹æ³ä¿åäºä»¶å¯¹è±¡ |
|---|
| | | window.map.set("registerOnZoom", registerOnZoomArr) |
|---|
| | | |
|---|
| | | // çå¬å°å¾ç§»å¨ç»æäºä»¶ |
|---|
| | | window.map.on("moveend", registerOnZoom) |
|---|
| | | |
|---|
| | | return eventListen |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export default mapSplit; |
|---|
| | |
|---|
| | | import axios from "axios"; |
|---|
| | | // import { Message } from "element-ui"; |
|---|
| | | // import router from "../router" |
|---|
| | | |
|---|
| | | // create an axios instance |
|---|
| | | import axios from "axios"; |
|---|
| | | |
|---|
| | | const service = axios.create({ |
|---|
| | | baseURL: 'http://10.10.4.116:8089/', // apiçbase_url |
|---|
| | | timeout: 35000, // 请æ±è¶
æ¶æ¶é´ |
|---|
| | | headers: { |
|---|
| | | "content-type": "application/json;charset=UTF-8", |
|---|
| | | }, |
|---|
| | | withCredentials: true, |
|---|
| | | baseURL: layerData.config.BASE_URL, // apiçbase_url |
|---|
| | | timeout: -1, // 请æ±è¶
æ¶æ¶é´ |
|---|
| | | |
|---|
| | | }); |
|---|
| | | const GISSERVER = axios.create({ |
|---|
| | | baseURL: 'http://10.10.4.116:8070/gisserver/', // apiçbase_url |
|---|
| | | timeout: 35000, // 请æ±è¶
æ¶æ¶é´ |
|---|
| | | }); |
|---|
| | | // gisserver ååæ¥è¯¢ |
|---|
| | | // export function queryPOI(servername, layer, name) { |
|---|
| | | // return GISSERVER.get("wfsserver/" + servername + "?version=1.3.0&request=GetFeature&format=json&typename=" + layer + "&propertyname=*&filter=%3CFilter%3E%3CPropertyIsLike+wildCard%3D%22*%22%3E%3CPropertyName%3E%E4%BA%95%E7%BC%96%E5%8F%B7%3C%2FPropertyName%3E%3CLiteral%3E" + name + "%3C%2FLiteral%3E%3C%2FPropertyIsLike%3E%3C%2FFilter%3E"); |
|---|
| | | // } |
|---|
| | | // // gisserver èå´æ¥è¯¢ |
|---|
| | | export function queryBySquare(url, layer, area) { |
|---|
| | | return GISSERVER.get(url, { |
|---|
| | | params: { |
|---|
| | | version: '1.3.0', |
|---|
| | | request: 'GetFeature', |
|---|
| | | typename: layer, |
|---|
| | | propertyname: '*', |
|---|
| | | format: "json", |
|---|
| | | filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing><gml:posList>${area}</gml:posList></gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`, |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // request interceptor |
|---|
| | | service.interceptors.request.use( |
|---|
| | | (config) => { |
|---|
| | | // 请æ±æºå¸¦token |
|---|
| | | const token = window.localStorage.getItem('TokenKey'); |
|---|
| | | if (token) { |
|---|
| | | config.headers["Authorization"] = token; |
|---|
| | | } |
|---|
| | | return config; |
|---|
| | | }, |
|---|
| | | (error) => { |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | service.interceptors.response.use( |
|---|
| | | (response) => { |
|---|
| | | //ç»å½ä¹åætoken |
|---|
| | | if (window.localStorage.getItem('TokenKey') != null) { |
|---|
| | | // console.log(response); |
|---|
| | | // if (response.data.code !== 200) { |
|---|
| | | // router.push('/login'); |
|---|
| | | // localStorage.removeItem("TokenKey"); |
|---|
| | | // localStorage.removeItem("TokenTime"); |
|---|
| | | // } |
|---|
| | | // //tokenè¿æè¿åç»å½é¡µ |
|---|
| | | // if (response.data.code == 500104) { |
|---|
| | | // router.push('/login') |
|---|
| | | // localStorage.removeItem("TokenKey"); |
|---|
| | | // localStorage.removeItem("TokenTime"); |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | return response.data; |
|---|
| | | }, |
|---|
| | | (error) => { |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | export default service; |
|---|
| | | |
|---|
| | | export default service; |
|---|
| | |
|---|
| | | this.sgworld = sgworld |
|---|
| | | this.treeData = new Map() |
|---|
| | | this.colorTool = sgworld.Core.gradientColor(); |
|---|
| | | this.sgwfs = new window.SmartEarth.WFSTool(sgworld._Viewer,Cesium) |
|---|
| | | this.sgwfs = new window.SmartEarth.WFSTool(sgworld._Viewer, Cesium) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | } else { |
|---|
| | | layer = this.getData(id); |
|---|
| | | } |
|---|
| | | if (!layer) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (layer && layer.sourceType === "DynamicSatellite") { |
|---|
| | | let obj = (layer.item || layer) |
|---|
| | | obj.dtwxzsData.setVisibility(isShow); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | var webhost = location.hostname; |
|---|
| | | var host = location.host; |
|---|
| | | var web_URL = "http://" + webhost; |
|---|
| | | |
|---|
| | | const layerData = { |
|---|
| | | config: { |
|---|
| | | |
|---|
| | | BASE_URL: "http://" + host + "/JiangSu", |
|---|
| | | img_url: "http://" + host + "/static/image/", |
|---|
| | | Model_URL: web_URL + "/JiangSu", |
|---|
| | | }, |
|---|
| | | modelData: [ |
|---|
| | | { |
|---|
| | | id: 'md1', |
|---|
| | | name: 'é离带', |
|---|
| | | url: '/Data/glb/é离带.glb', |
|---|
| | | imgUrl: 'é离带.png' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'md2', |
|---|
| | | name: 'æµè¯æ¨¡å2', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md3', |
|---|
| | | name: 'æµè¯æ¨¡å3', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md4', |
|---|
| | | name: 'æµè¯æ¨¡å4', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md5', |
|---|
| | | name: 'æµè¯æ¨¡å5', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md6', |
|---|
| | | name: 'æµè¯æ¨¡å6', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md7', |
|---|
| | | name: 'æµè¯æ¨¡å7', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, { |
|---|
| | | id: 'md8', |
|---|
| | | name: 'æµè¯æ¨¡å8', |
|---|
| | | url: '/Data/glb/Cesium_Air.glb', |
|---|
| | | imgUrl: 'é£æº.png' |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* |
|---|
| | | * @Author: çæ 1377869194@qq.com |
|---|
| | | * @Date: 2023-05-08 13:52:20 |
|---|
| | | * @LastEditors: çæ 1377869194@qq.com |
|---|
| | | * @LastEditTime: 2023-05-08 14:17:30 |
|---|
| | | * @FilePath: \LFWEB_NEW\vue.config.js |
|---|
| | | * @Description: è¿æ¯é»è®¤è®¾ç½®,请设置`customMade`, æå¼koroFileHeaderæ¥çé
ç½® è¿è¡è®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
|---|
| | | */ |
|---|
| | | const path = require("path") |
|---|
| | | const resolve = dir => path.join(__dirname, dir) |
|---|
| | | module.exports = { |
|---|
| | | lintOnSave: false, |
|---|
| | | publicPath: "./", |
|---|
| | | devServer: { |
|---|
| | | host: 'localhost',//æ¬å°å°å |
|---|
| | | port: '8080',//端å£å· |
|---|
| | | hot: true,//çæ´æ°èªå¨å·æ° |
|---|
| | | open: true,//èªå¨æå¼ |
|---|
| | | overlay: { //å½åºç°ç¼è¯é误æè¦åæ¶ï¼å¨æµè§å¨ä¸æ¾ç¤ºå
¨å±è¦çãåªæ¾ç¤ºé误信æ¯ä¸æ示è¦åæ
åµéå¶æ¯ |
|---|
| | | warning: false, |
|---|
| | | error: true |
|---|
| | | }, |
|---|
| | | proxy: { |
|---|
| | | "/JiangSu": { |
|---|
| | | target: 'http:localhost/JiangSu',//代çå°å å¡æ¯ä½¿ç¨/api |
|---|
| | | changeOrigin: true,//å
许跨åè¯·æ± |
|---|
| | | secure: false, |
|---|
| | | pathRewrite: { //éåè·¯å¾ æ¿æ¢è¯·æ±å°åä¸çæå®è·¯å¾ |
|---|
| | | ['^/JiangSu']: '' //å°è¯·æ±å°åä¸çapiæ¿æ¢ä¸ºç©º |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | configureWebpack: { |
|---|
| | | resolve: { |
|---|
| | | alias: { |
|---|
| | | "@": resolve("src"), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
