From a916fc2df00bac9f8210b09fd7ee79f8b291e345 Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 07 八月 2024 13:35:08 +0800 Subject: [PATCH] 最新 --- src/components/sideMenu/layerMenu/layerPanel2.vue | 404 +++++++++++++------------------------------------------- 1 files changed, 97 insertions(+), 307 deletions(-) diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue index 76a7c60..bb7cdcf 100644 --- a/src/components/sideMenu/layerMenu/layerPanel2.vue +++ b/src/components/sideMenu/layerMenu/layerPanel2.vue @@ -9,38 +9,37 @@ v-for="(value, index) in eMapModeList" @click.stop="handleEMapClick(value, index)" > - <img - :src="value.src" - :class="{ active: curEMapModelIndex == index }" - /> - <span :class="{ spanActive: curEMapModelIndex == index }">{{ + <img :src="value.src" :class="{ active: curEMapModelIndex == index }" /> + <span :class="{ spanActive: curEMapModelIndex == index }"> + {{ value.name - }}</span> + }} + </span> </div> - <div + <!-- <div class="layerItem" :key="value0.id" v-for="(value0, index0) in sMapModelList" @click.stop="handleSMapClick(value0, index0)" > - <img - :src="value0.src" - :class="{ active: curSMapModelIndex == index0 }" - /> - <span :class="{ spanActive: curSMapModelIndex == index0 }">{{ + <img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" /> + <span :class="{ spanActive: curSMapModelIndex == index0 }"> + {{ value0.name - }}</span> - </div> + }} + </span> + </div>--> </div> </div> - + <div class="areaType"> <div class="title ZTtitle"> 涓撻搴旂敤 <!-- 涓嶆樉绀烘洿澶氬浘灞� --> - <span class="more" v-show="false" @click.stop="showLayerTree" - >鏇村鍥惧眰<i class="el-icon-arrow-right"></i - ></span> + <span class="more" v-show="false" @click.stop="showLayerTree"> + 鏇村鍥惧眰 + <i class="el-icon-arrow-right"></i> + </span> </div> <div class="container"> <div @@ -50,9 +49,11 @@ @click.stop="handleZTlick(ZTValue, ZTIndex)" > <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" /> - <span :class="{ spanActive: curZTIndex == ZTIndex }">{{ + <span :class="{ spanActive: curZTIndex == ZTIndex }"> + {{ ZTValue.name - }}</span> + }} + </span> </div> <div class="layerItem" @@ -60,50 +61,15 @@ :key="funcValue.id" @click.stop="handleFuncClick(funcIndex)" > - <img - :src="funcValue.src" - :class="{ active: curFuncIndex == funcIndex }" - /> - <span :class="{ spanActive: curFuncIndex == funcIndex }">{{ + <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" /> + <span :class="{ spanActive: curFuncIndex == funcIndex }"> + {{ funcValue.name - }}</span> + }} + </span> </div> - <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> --> </div> - <!-- <div class="container"> - <div - class="layerItem" - v-for="(funcValue, funcIndex) in FuncList" - :key="funcValue.id" - @click.stop="handleFuncClick(funcIndex)" - > - <img - :src="funcValue.src" - :class="{ active: curFuncIndex == funcIndex }" - /> - <span :class="{ spanActive: curFuncIndex == funcIndex }">{{ - funcValue.name - }}</span> - </div> - </div> --> </div> - - <!-- <div class="yjsxt"> - <div class="title">鍩庡競閮ㄤ欢</div> - <div class="container"> - <div - class="layerItem" - :key="value2.id" - v-for="(value2, index2) in yjList" - @click.stop="handleYJClick(index2)" - > - <img :src="value2.src" :class="{ active: curYjIndex == index2 }" /> - <span :class="{ spanActive: curYjIndex == index2 }">{{ - value2.name - }}</span> - </div> - </div> - </div> --> </div> </template> @@ -118,7 +84,7 @@ loadEnterprise, loadLayer, clearLayerByTypeId, - clearLayerByTypeIdArr, + clearLayerByTypeIdArr } from "@/utils/map.js"; import _GLOBAL from "@/assets/GLOBAL2"; import store from "@/utils/store2.js"; @@ -131,7 +97,7 @@ addYzLayer, loadBaseMap, loadGeoMap, - clearAll, + clearAll } from "@/utils/tool"; export default { name: "LayerPanel", @@ -143,15 +109,15 @@ name: "浜岀淮鍦板浘", active: false, type: "er", - src: require("@/assets/img/layer/ewdt.png"), + src: require("@/assets/img/layer/ewdt.png") }, { id: "yxdt", name: "褰卞儚鍦板浘", active: true, type: "er", - src: require("@/assets/img/layer/yxdt.png"), - }, + src: require("@/assets/img/layer/yxdt.png") + } ], sMapModelList: [ { @@ -159,124 +125,65 @@ name: "涓夌淮妯″瀷", active: false, type: "san", - src: require("@/assets/img/layer/swmx.png"), - }, - ], - areaTypeList: [ - { - id: "瑙勫垝鑼冨洿", - name: "瑙勫垝鑼冨洿", - active: false, - src: require("@/assets/img/layer/ghfw.png"), - }, - { - id: "XingZhengQuHuaTu", - name: "琛屾斂鍖哄垝", - active: false, - src: require("@/assets/img/layer/xzqh.png"), - }, - { - id: "GuiHuaDanYuanHuaFenTu", - name: "瑙勫垝鍗曞厓", - active: false, - src: require("@/assets/img/layer/ghdy.png"), - }, - { - id: "ZhuYaoGongNengQuGuiHuaShiYiTu", - name: "鍔熻兘鍖哄煙", - active: false, - src: require("@/assets/img/layer/gnq.png"), - }, - ], - yjList: [ - { - id: "yinjing", - name: "绐ㄤ簳", - active: false, - src: require("@/assets/img/layer/yj.png"), - }, - { - id: "shext", - name: "鎽勫儚澶�", - active: false, - src: require("@/assets/img/layer/sxt.png"), - }, + src: require("@/assets/img/layer/swmx.png") + } ], FuncList: [ { id: "tdgl", name: "鍦熷湴绠$悊", active: false, - src: require("@/assets/img/layer/tudiguanli.png"), + src: require("@/assets/img/layer/tudiguanli.png") }, { id: "history", name: "鍘嗗彶褰卞儚", active: false, - src: require("@/assets/img/layer/lishiyingxiang.png"), - }, + src: require("@/assets/img/layer/lishiyingxiang.png") + } ], zhuantiList: ZTTitem, //curMapModelIndex: 1, curEMapModelIndex: 0, curSMapModelIndex: -1, curAreaTypeIndex: -1, - curYjIndex: -1, curFuncIndex: -1, curZTIndex: -1, state: store.thematicLayer, basicMapChecked: store.basicMapChecked, - state1: store.tdglInfo, + state1: store.tdglInfo }; }, mounted() { this.$nextTick(() => { - // setTimeout(() => { - // this.handleEMapClick( - // { - // id: "yxdt", - // name: "褰卞儚鍦板浘", - // active: true, - // type: "er", - // src: "/static/img/yxdt.cf4698e.png", - // }, - // 1 - // ); - // loadEnterprise(); - // }, 2000); + setTimeout(() => { + switch (this.$route.query.showlayer) { + case "SPJK": + debugger; + this.handleZTlick(ZTTitem[0], 0); + break; + case "QYXX": + this.handleZTlick(ZTTitem[1], 1); + break; + case "SZGT": + this.handleZTlick(ZTTitem[2], 2); + break; + case "TDGL": + this.handleFuncClick(0); + break; + case "LSYX": + this.handleFuncClick(1); + break; + default: + break; + } + // loadEnterprise(); + // 鍒濆鍔犺浇鍦板浘 + // this.handleEMapClick(this.eMapModeList[1], 1); + }, 1000); }); }, methods: { - changeLayerView(max, enableTilt) { - window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max; - window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt; - }, - // handleMapClick(result, index) { - // const val = layers.filter((res) => { - // if (res.name == result.name) { - // return res; - // } - // }); - // const children = val[0].children; - // if (this.curMapModelIndex == index) { - // clearLayerByTypeId(result.id); - // this.curMapModelIndex = -1; - // } else { - // this.curMapModelIndex = index; - // if (result.type == "er") { - // clearLayerByTypeIdArr(["ewdt", "yxdt"]); - // } else { - // clearLayerByTypeIdArr(["3Dcs", "swmx"]); - // } - // // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']); - // _GLOBAL.layers[result.id] = []; - // children.forEach((item) => { - // let itemLayer = loadLayer(item); - // _GLOBAL.layers[result.id].push(itemLayer); - // console.log(_GLOBAL.layers[result.id]); - // }); - // } - // }, // 浜岀淮搴曞浘閫夋嫨 handleEMapClick(result, index) { if (this.curEMapModelIndex == index) return; @@ -300,112 +207,14 @@ } }, // 璺宠浆鍒颁笁缁� - show3d() { + handleSMapClick(result, index) { store.setLayerPanelShow(false); this.$router.push("/viewer3D"); }, - // 涓夌淮妯″瀷閫夋嫨 - handleSMapClick(result, index) { - // // 璁剧疆鐩告満 - // if (result.name == "3D鍩庡競") { - // window.Viewer.scene.globe.maximumScreenSpaceError = 2; - // this.changeLayerView(45000, true); - // } else if (result.name == "涓夌淮妯″瀷") { - // window.Viewer.scene.globe.maximumScreenSpaceError = 2; - // this.changeLayerView(80000, true); - // } - // 鍒囨崲鍥惧眰 - this.show3d(); - const val = layers.filter((res) => { - if (res.name == result.name) { - return res; - } - }); - const children = val[0].children; - if (this.curSMapModelIndex == index) { - // clearLayerByTypeId(result.id); - // this.curSMapModelIndex = -1; - } else { - // this.curEMapModelIndex = -1; - // this.curSMapModelIndex = index; - // clearLayerByTypeIdArr(["ewdt", "yxdt"]); - // clearLayerByTypeIdArr(["3Dcs", "swmx"]); - // _GLOBAL.layers[result.id] = []; - // children.forEach((item) => { - // let itemLayer = loadLayer(item); - // _GLOBAL.layers[result.id].push(itemLayer); - // console.log(_GLOBAL.layers[result.id]); - // }); - } - }, - // 涓撻鍥鹃�夋嫨 - handleAreaClick(result, index) { - const val = layers.filter((res) => { - if (res.name == result.name) { - return res; - } - }); - const children = val[0].children; - if (this.curAreaTypeIndex == index) { - this.curAreaTypeIndex = -1; - let _data = sgworld.ProjectTree.getObject(children[0].id); - if (_data) { - sgworld.ProjectTree.setVisibility(children[0].id, false); - } - // clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']); - store.setThematicLayerItemId(""); - } else { - this.curAreaTypeIndex = index; - //娓呴櫎 - //clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']); - let arr = [ - "GuiHuaFanWeiShiYiTu", - "XingZhengQuHuaTu", - "GuiHuaDanYuanHuaFenTu", - "ZhuYaoGongNengQuGuiHuaShiYiTu", - ]; - arr.forEach((item) => { - sgworld.ProjectTree.getObject(item) && - sgworld.ProjectTree.setVisibility(item, false); - }); - let dataObj = sgworld.ProjectTree.getObject(result.id); - if (dataObj) { - sgworld.ProjectTree.setVisibility(result.id, true); - } else { - _GLOBAL.layers[result.id] = []; - children.forEach((item) => { - let itemLayer = loadLayer(item); - _GLOBAL.layers[result.id].push(itemLayer); - console.log(_GLOBAL.layers[result.id]); - }); - } - store.setThematicLayerItemId(result.id); - } - }, - // 绐ㄤ簳鍔犺浇 - handleYJClick(index) { - if (this.curYjIndex == index) { - this.curYjIndex = -1; - window.clusterLayer && window.clusterLayer.clear(); - } else { - this.curYjIndex = index; - switch (index) { - case 0: - loadManhole(); - break; - case 1: - loadCamera(); - break; - case 2: - loadEnterprise(); - break; - } - } - }, - // 绗簩琛� 涓撻鍥� 鐐瑰嚮 + // 鐐逛綅鍥� 鐐瑰嚮 handleZTlick(result, index) { - // console.log(result, index); - const val = layers.filter((res) => { + console.log(result, index); + const val = layers.filter(res => { if (res.name == result.name) { return res; } @@ -420,7 +229,7 @@ store.setThematicLayerItemId(children); } }, - // 绗笁琛� 涓撻鍔熻兘 鐐瑰嚮 + // 鍔熻兘椤� 鐐瑰嚮 handleFuncClick(index) { if (this.curFuncIndex == index) { store.setTdglFlag(false); @@ -456,15 +265,16 @@ window.tdgllayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ ratio: 3, - url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao", + url: + "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao", params: { VERSION: "1.1.1", SRS: "EPSG:3857", FORMAT: "image/png", TILED: true, - LAYERS: "", - }, - }), + LAYERS: "" + } + }) }); // window.tdgllayer = new ol.layer.Tile({ @@ -508,55 +318,35 @@ }, showLayerTree() { store.setLayerTreeShow(true); - }, + } }, - watch: { - "state.itemId": { - handler: function (newVal, oldVal) { - let that = this; - if (newVal == "") { - this.curAreaTypeIndex = -1; - } else { - let index = -1; - if (newVal == "GuiHuaFanWeiShiYiTu") { - index = 0; - } else if (newVal == "XingZhengQuHuaTu") { - index = 1; - } else if (newVal == "GuiHuaDanYuanHuaFenTu") { - index = 2; - } else if (newVal == "ZhuYaoGongNengQuGuiHuaShiYiTu") { - index = 3; - } - this.curAreaTypeIndex = index; - } - }, - }, - // 鍩虹鍥惧眰 - "basicMapChecked.val": { - handler: function (newVal, oldVal) { - if (newVal == "涓夌淮妯″瀷") { - debugger; - this.handleSMapClick( - { - id: "swmx", - name: "涓夌淮妯″瀷", - active: false, - type: "san", - src: require("@/assets/img/layer/swmx.png"), - }, - 1 - ); - } - }, - immediate: true, //鍒锋柊鍔犺浇 绔嬮┈瑙﹀彂涓�娆andler - deep: true, // 鍙互娣卞害妫�娴嬪埌 obj 瀵硅薄鐨勫睘鎬у�肩殑鍙樺寲 - }, - }, + // watch: { + // // 鍩虹鍥惧眰 + // "basicMapChecked.val": { + // handler: function(newVal, oldVal) { + // if (newVal == "涓夌淮妯″瀷") { + // debugger; + // this.handleSMapClick( + // { + // id: "swmx", + // name: "涓夌淮妯″瀷", + // active: false, + // type: "san", + // src: require("@/assets/img/layer/swmx.png") + // }, + // 1 + // ); + // } + // }, + // immediate: true, //鍒锋柊鍔犺浇 绔嬮┈瑙﹀彂涓�娆andler + // deep: true // 鍙互娣卞害妫�娴嬪埌 obj 瀵硅薄鐨勫睘鎬у�肩殑鍙樺寲 + // } + // }, computed: { alpha() { return store.tdglInfo.alpha; - }, - }, + } + } }; </script> -- Gitblit v1.9.3