From f7ab8838f095134c65d2628fe54a6fb8c5df146e Mon Sep 17 00:00:00 2001 From: 少年 <1392120328@qq.com> Date: 星期三, 07 二月 2024 16:52:38 +0800 Subject: [PATCH] 111 --- src/components/sideMenu/layerMenu/layerPanel2.vue | 146 ++++++++++++------------------------------------ 1 files changed, 38 insertions(+), 108 deletions(-) diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue index 163e60f..6d35b94 100644 --- a/src/components/sideMenu/layerMenu/layerPanel2.vue +++ b/src/components/sideMenu/layerMenu/layerPanel2.vue @@ -3,30 +3,16 @@ <div class="mapMode"> <div class="title" style="margin-top: 0px">鍦板浘妯″紡</div> <div class="container"> - <div - class="layerItem" - :key="value.id" - v-for="(value, index) in eMapModeList" - @click.stop="handleEMapClick(value, index)" - > - <img - :src="value.src" - :class="{ active: curEMapModelIndex == index }" - /> + <div class="layerItem" :key="value.id" v-for="(value, index) in eMapModeList" + @click.stop="handleEMapClick(value, index)"> + <img :src="value.src" :class="{ active: curEMapModelIndex == index }" /> <span :class="{ spanActive: curEMapModelIndex == index }">{{ value.name }}</span> </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 }" - /> + <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 }">{{ value0.name }}</span> @@ -37,17 +23,11 @@ <div class="title"> 涓撻搴旂敤 <!-- 涓嶆樉绀烘洿澶氬浘灞� --> - <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 - class="layerItem" - v-for="(ZTValue, ZTIndex) in zhuantiList" - :key="ZTValue.id" - @click.stop="handleZTlick(ZTValue, ZTIndex)" - > + <div class="layerItem" v-for="(ZTValue, ZTIndex) in zhuantiList" :key="ZTValue.id" + @click.stop="handleZTlick(ZTValue, ZTIndex)"> <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" /> <span :class="{ spanActive: curZTIndex == ZTIndex }">{{ ZTValue.name @@ -56,16 +36,9 @@ </div> <div class="title2"></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 }" - /> + <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> @@ -255,11 +228,11 @@ handleEMapClick(result, index) { // 璁剧疆鐩告満 if (result.name == "浜岀淮鍦板浘") { - window.map.getLayerByName("浜岀淮鍦板浘").setVisible(true); - window.map.getLayerByName("褰卞儚鍦板浘").setVisible(false); + window.mapapi.getLayerByName("浜岀淮鍦板浘").setVisible(true); + window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(false); } else if (result.name == "褰卞儚鍦板浘") { - window.map.getLayerByName("褰卞儚鍦板浘").setVisible(true); - window.map.getLayerByName("浜岀淮鍦板浘").setVisible(false); + window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(true); + window.mapapi.getLayerByName("浜岀淮鍦板浘").setVisible(false); } // 鍒囨崲鍥惧眰 const val = layers.filter((res) => { @@ -408,14 +381,14 @@ divPoint3 && divPoint3.deleteObject(); store.setPoplayerShowAction(false); 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) { store.setSliderShow(false); - sgworld.Creator.DeleteObject(window.tdglLayer); + window.mapapi.removeLayer(window.tdglLayer); } } else { // 闅愯棌搴曢儴鍥惧眰闈㈢増 @@ -427,70 +400,30 @@ this.curFuncIndex = index; switch (index) { case 0: + if (window.tdgllayer) { + window.mapapi.removeLayer(window.tdgllayer); + store.setSliderShow(false); + window.tdgllayer = null; + window.mapapi.removeLayer(window.tdglLine); + return; + } store.setSliderShow(true); - // window.tdglLayer = sgworld.Creator.createImageryProvider( - // layers[8].name, - // "tms", - // { - // id: layers[8].children[0].id, - // url: layers[8].children[0].urls, - // fileExtension: layers[8].children[0].img || "png", - // enablePickFeatures: false, - // level: layers[8].children[0].Level, - // minimumLevel: layers[8].children[0].minimumLevel, - // maximumLevel: layers[8].children[0].maximumLevel, - // tilingScheme: - // layers[8].children[0].tileType === "Geo" - // ? new Cesium.GeographicTilingScheme() - // : new Cesium.WebMercatorTilingScheme(), - // // alpha: layers[8].children[0].alpha, - // alpha: this.alpha, - // }, - // "0", - // layers[8].children[0].zIndex, - // true, - // "" - // ); - // console.log("gisserver-tms"); - // var url = layers[8].children[0].urls; - // var projection = getProjection("EPSG:4326"); - // var tileGrid = createXYZ({ - // extent: projection.getExtent(), - // }); - // var source = new XYZ({ - // projection: projection, - // tileGrid: tileGrid, - // tileUrlFunction: function (tileCoord, pixelRatio, proj) { - // return ( - // url + - // (tileCoord[0] - 1) + - // "/" + - // tileCoord[1] + - // "/" + - // (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + - // ".jpeg" - // ); - // }, - // }); - // window.tdglLayer = new Tile({ - // source: source, - // }); - // window.map.addLayer(window.tdglLayer); + var url = layers[8].children[0].urls; + //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; - // var url = - // "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; - - var tmslayer = new ol.layer.Tile({ + window.mapapi.removeLayer(window.tdgllayer); + window.tdgllayer = new ol.layer.Tile({ source: new ol.source.XYZ({ - projection: projection, + projection: "EPSG:4326", tileGrid: ol.tilegrid.createXYZ({ - extent: [50.731, -90, 180, 70.0478], + 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] + @@ -501,18 +434,19 @@ }, }), }); - window.map.addLayer(tmslayer); + window.mapapi.addLayer(window.tdgllayer); //鏄剧ず婊戝姩鏉� store.setTdglFlag(true); break; case 1: this.curFuncIndex = -1; store.setTdglFlag(false); + store.setSliderShow(false); + store.setHistoryShow(true); if (window.tdglLayer) { store.setSliderShow(false); - sgworld.Creator.DeleteObject(window.tdglLayer); + window.mapapi.removeLayer(window.tdgllayer); } - store.setHistoryShow(true); break; } } @@ -562,12 +496,6 @@ immediate: true, //鍒锋柊鍔犺浇 绔嬮┈瑙﹀彂涓�娆andler deep: true, // 鍙互娣卞害妫�娴嬪埌 obj 瀵硅薄鐨勫睘鎬у�肩殑鍙樺寲 }, - // "state1.alpha": { - // handler: function (newVal) { - // this.handleFuncClick(0); - // }, - // deep: true, - // }, }, computed: { alpha() { @@ -598,9 +526,11 @@ line-height: 25px; margin: 10px 0px 10px 0; } + .title2 { height: 15px; } + .container { display: flex; align-items: center; -- Gitblit v1.9.3