From 09f448bc9dec772dafaeb04f0c60a0d722035226 Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期五, 26 四月 2024 13:53:25 +0800 Subject: [PATCH] 路由跳转三维 --- src/components/sideMenu/layerMenu/layerPanel2.vue | 413 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 249 insertions(+), 164 deletions(-) diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue index 0713fdd..274089c 100644 --- a/src/components/sideMenu/layerMenu/layerPanel2.vue +++ b/src/components/sideMenu/layerMenu/layerPanel2.vue @@ -1,7 +1,7 @@ <template> <div class="layerPanel"> <div class="mapMode"> - <div class="title" style="margin-top: 0px">鍦板浘妯″紡</div> + <div class="title">鍦板浘妯″紡</div> <div class="container"> <div class="layerItem" @@ -33,8 +33,8 @@ </div> </div> </div> - <div class="areaType" style="margin-top: 10px"> - <div class="title"> + <div class="areaType"> + <div class="title ZTtitle"> 涓撻搴旂敤 <!-- 涓嶆樉绀烘洿澶氬浘灞� --> <span class="more" v-show="false" @click.stop="showLayerTree" @@ -53,9 +53,6 @@ ZTValue.name }}</span> </div> - </div> - <div class="title2"></div> - <div class="container"> <div class="layerItem" v-for="(funcValue, funcIndex) in FuncList" @@ -70,7 +67,24 @@ funcValue.name }}</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"> @@ -109,12 +123,15 @@ import store from "@/utils/store2.js"; import ZTTitem from "@/utils/ztt2.js"; import { layers } from "../../../../static/json/layer.js"; - -// import Tile from "ol/layer/Tile"; -// import XYZ from "ol/source/XYZ"; -// import { get as getProjection, getTransform } from "ol/proj"; -// import { createXYZ } from "ol/tilegrid"; - +import { + addImageLayer, + addAnnotationLayer, + addHxLayer, + addYzLayer, + loadBaseMap, + loadGeoMap, + clearAll, +} from "@/utils/tool"; export default { name: "LayerPanel", data() { @@ -135,7 +152,15 @@ src: require("@/assets/img/layer/yxdt.png"), }, ], - sMapModelList: [], + sMapModelList: [ + { + id: "swmx", + name: "涓夌淮妯″瀷", + active: false, + type: "san", + src: require("@/assets/img/layer/swmx.png"), + }, + ], areaTypeList: [ { id: "瑙勫垝鑼冨洿", @@ -192,7 +217,7 @@ ], zhuantiList: ZTTitem, //curMapModelIndex: 1, - curEMapModelIndex: 1, + curEMapModelIndex: 0, curSMapModelIndex: -1, curAreaTypeIndex: -1, curYjIndex: -1, @@ -205,19 +230,19 @@ }, mounted() { this.$nextTick(() => { - setTimeout(() => { - this.handleEMapClick( - { - id: "yxdt", - name: "褰卞儚鍦板浘", - active: true, - type: "er", - src: "/static/img/yxdt.cf4698e.png", - }, - 1 - ); - loadEnterprise(); - }, 2000); + // setTimeout(() => { + // this.handleEMapClick( + // { + // id: "yxdt", + // name: "褰卞儚鍦板浘", + // active: true, + // type: "er", + // src: "/static/img/yxdt.cf4698e.png", + // }, + // 1 + // ); + // loadEnterprise(); + // }, 2000); }); }, methods: { @@ -225,77 +250,71 @@ 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]); - }); - } - }, + // 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 (result.name == "浜岀淮鍦板浘") { - window.map.getLayerByName("浜岀淮鍦板浘").setVisible(true); - window.map.getLayerByName("褰卞儚鍦板浘").setVisible(false); - } else if (result.name == "褰卞儚鍦板浘") { - window.map.getLayerByName("褰卞儚鍦板浘").setVisible(true); - window.map.getLayerByName("浜岀淮鍦板浘").setVisible(false); + if (this.curEMapModelIndex == index) return; + this.curEMapModelIndex = index; + clearAll(); + switch (result.name) { + case "浜岀淮鍦板浘": + loadGeoMap(); + // loadBaseMap(); + // addAnnotationLayer(); + addHxLayer(); + addYzLayer(); + // window.mapapi.getView().setZoom(14); + break; + case "褰卞儚鍦板浘": + addImageLayer(); + addAnnotationLayer(); + addHxLayer(); + addYzLayer(); + break; } - // 鍒囨崲鍥惧眰 - const val = layers.filter((res) => { - if (res.name == result.name) { - return res; - } - }); - const children = val[0].children; - if (this.curEMapModelIndex == index) { - // 鍐嶆鐐瑰嚮閫変腑鐨刬tem鏃跺彇娑堥�夋嫨 - // clearLayerByTypeId(result.id); - // this.curEMapModelIndex = -1; - } else { - this.curSMapModelIndex = -1; - this.curEMapModelIndex = 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]); - }); - } + }, + // 璺宠浆鍒颁笁缁� + show3d() { + 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); - } + // // 璁剧疆鐩告満 + // 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; @@ -306,16 +325,16 @@ // 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]); - }); + // 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]); + // }); } }, // 涓撻鍥鹃�夋嫨 @@ -384,7 +403,7 @@ }, // 绗簩琛� 涓撻鍥� 鐐瑰嚮 handleZTlick(result, index) { - console.log(result, index); + // console.log(result, index); const val = layers.filter((res) => { if (res.name == result.name) { return res; @@ -405,66 +424,82 @@ if (this.curFuncIndex == index) { store.setTdglFlag(false); store.setPoplayerListAction({}); - divPoint3 && divPoint3.deleteObject(); store.setPoplayerShowAction(false); + this.curFuncIndex = -1; + // window.clusterLayer && window.clusterLayer.clear(); if (window.tdglLine) { - sgworld.Creator.DeleteObject(window.tdglLine); + window.mapapi.removeLayer(window.tdglLine); window.tdglLine = null; } - this.curFuncIndex = -1; - window.clusterLayer && window.clusterLayer.clear(); - if (window.tdglLayer) { + + if (window.tdgllayer) { store.setSliderShow(false); - sgworld.Creator.DeleteObject(window.tdglLayer); + window.mapapi.removeLayer(window.tdgllayer); + window.tdgllayer = null; } } else { + this.curFuncIndex = index; // 闅愯棌搴曢儴鍥惧眰闈㈢増 store.setLayerPanelShow(false); // 闅愯棌鍙充笂瑙掕彍鍗曢潰鏉� store.setMenuListShow(false); // 闅愯棌搴曢儴婕父闈㈡澘 store.setRoamPanelShow(false); - this.curFuncIndex = index; switch (index) { case 0: + //鏄剧ず婊戝姩鏉� store.setSliderShow(true); - + store.setTdglFlag(true); var url = layers[8].children[0].urls; - //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; - - window.map.removeLayer(window.tdgllayer); + //鍔犺浇鍦板潡妯″瀷 window.tdgllayer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - projection: "EPSG:4326", - tileGrid: ol.tilegrid.createXYZ({ - extent: [50.582, -90, 180, 70.1558], - }), - tileUrlFunction: function (tileCoord, pixelRatio, proj) { - // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg'; - return ( - url + - "/" + - (tileCoord[0] - 1) + - "/" + - tileCoord[1] + - "/" + - (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + - ".jpeg" - ); + source: new ol.source.TileWMS({ + ratio: 3, + url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao", + params: { + VERSION: "1.1.1", + SRS: "EPSG:3857", + FORMAT: "image/png", + TILED: true, + LAYERS: "", }, }), }); - window.map.addLayer(window.tdgllayer); - //鏄剧ず婊戝姩鏉� - store.setTdglFlag(true); + + // window.tdgllayer = new ol.layer.Tile({ + // source: new ol.source.XYZ({ + // projection: "EPSG:4326", + // format: new ol.format.MVT(), + // tileGrid: ol.tilegrid.createXYZ({ + // // extent: [-50.582, -90, 180, 70.1558], + // extent: [-180, -90, 180, 90] + // }), + // tilePixelRatio: 3, + // tileUrlFunction: function (tileCoord, pixelRatio, proj) { + // console.log(tileCoord, '鍙傛暟') + // console.log(Math.pow(2, tileCoord[0]) + tileCoord[2] - 1) + // // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg'; + // return ( + // url + + // (tileCoord[0]) + + // "/" + + // tileCoord[1] + + // "/" + + // (Math.pow(2, tileCoord[0]) + tileCoord[2] - 1) + + // ".jpeg" + // ); + + // }, + // }), + // }); + + window.mapapi.addLayer(window.tdgllayer); break; case 1: this.curFuncIndex = -1; store.setTdglFlag(false); - if (window.tdglLayer) { - store.setSliderShow(false); - window.map.removeLayer(window.tdgllayer); - } + store.setSliderShow(false); + window.mapapi.removeLayer(window.tdgllayer); store.setHistoryShow(true); break; } @@ -527,63 +562,113 @@ <style scoped> .layerPanel { width: 100%; + /* height: 396px; */ position: absolute; bottom: 0px; align-items: center; - padding: 0.1rem; - background: white; - z-index: 1000; - padding-left: 0.25rem; + /* padding: 0.1rem; */ + background: #ffffff; + /* z-index: 1000; */ + /* padding-left: 0.25rem; */ + border-radius: 15px 15px 0px 0px; +} +.mapMode { + width: 100%; + margin-top: 24px; + padding-left: 28px; } +@font-face { + font-family: "YouSheBiaoTiHei"; + src: url("../../../../static/YouSheBiaoTiHei.ttf"); +} .title { - height: 25px; - font-size: 16px; - font-family: Source Han Sans SC; - font-weight: 700; - color: #181818; - line-height: 25px; - margin: 10px 0px 10px 0; + width: 72px; + height: 14px; + font-family: "YouSheBiaoTiHei"; + font-weight: 400; + font-size: 19px; + color: #2e2e2e; + line-height: 15px; + margin-bottom: 18px; } -.title2 { - height: 15px; -} -.container { +.mapMode .container { display: flex; align-items: center; text-align: center; + flex-wrap: wrap; } .layerItem { /* font-size: 14px; */ - font-family: Source Han Sans SC; + font-family: "寰蒋闆呴粦"; font-weight: 400; - margin-right: 30px; cursor: pointer; + text-align: center; } - -.active { - color: #4187ff; - border: 2px solid #4187ff; +.mapMode .layerItem { + width: 0.8rem; + margin-right: 24px; +} +.mapMode img { + display: block; + width: 100%; + border-radius: 11px; + border: 1px dashed #127dff; + margin-bottom: 11px; +} +span { + font-family: "寰蒋闆呴粦"; + font-size: 0.12rem; + color: #6e6969; + line-height: 12px; +} +.mapMode .active, +.areaType .active { + color: #127dff; + border: 2px solid #127dff; border-radius: 10px; } .spanActive { - color: #4187ff; + color: #127dff; +} +.areaType { + width: 100%; + margin-top: 30px; } -img { +.areaType .ZTtitle { + margin-left: 28px; + margin-bottom: 3px; +} +.areaType .container { + margin-top: 18px; + padding: 0 4%; + display: grid; + justify-items: center; + grid-template-columns: repeat(4, 1fr); + overflow: hidden; +} +.areaType .layerItem { + margin-bottom: 15px; +} + +.areaType img { + margin: 0 auto; + /* background-color: green; */ display: block; - width: 60px; - height: 40px; - margin-bottom: 5px; + width: 0.5rem; + border-radius: 11px; + box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%); + margin-bottom: 11px; } .more { float: right; margin-right: 20px; font-size: 0.12rem; - color: #4187ff; + color: #127dff; line-height: 25px; font-weight: 500; font-family: unset; -- Gitblit v1.9.3