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 | 159 +++++++++++++++--------------------------------------
1 files changed, 45 insertions(+), 114 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index 62a0d84..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>
@@ -110,10 +83,10 @@
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 Tile from "ol/layer/Tile";
+// import XYZ from "ol/source/XYZ";
+// import { get as getProjection, getTransform } from "ol/proj";
+// import { createXYZ } from "ol/tilegrid";
export default {
name: "LayerPanel",
@@ -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,69 +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 projection = getProjection("EPSG:4326");
- var tmslayer = new Tile({
- source: new XYZ({
- projection: projection,
- tileGrid: createXYZ({
- extent: projection.getExtent(),
+ window.mapapi.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] +
@@ -500,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;
}
}
@@ -561,12 +496,6 @@
immediate: true, //鍒锋柊鍔犺浇 绔嬮┈瑙﹀彂涓�娆andler
deep: true, // 鍙互娣卞害妫�娴嬪埌 obj 瀵硅薄鐨勫睘鎬у�肩殑鍙樺寲
},
- // "state1.alpha": {
- // handler: function (newVal) {
- // this.handleFuncClick(0);
- // },
- // deep: true,
- // },
},
computed: {
alpha() {
@@ -597,9 +526,11 @@
line-height: 25px;
margin: 10px 0px 10px 0;
}
+
.title2 {
height: 15px;
}
+
.container {
display: flex;
align-items: center;
--
Gitblit v1.9.3