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 | 511 +++++++++++++++++++++-----------------------------------
1 files changed, 190 insertions(+), 321 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index db3a36f..bb7cdcf 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"
@@ -9,37 +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" style="margin-top: 10px">
- <div class="title">
+
+ <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
@@ -49,46 +49,27 @@
@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>
- <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 }"
- />
- <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
+ <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
+ <span :class="{ spanActive: curFuncIndex == funcIndex }">
+ {{
funcValue.name
- }}</span>
+ }}
+ </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>
@@ -103,7 +84,7 @@
loadEnterprise,
loadLayer,
clearLayerByTypeId,
- clearLayerByTypeIdArr,
+ clearLayerByTypeIdArr
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL2";
import store from "@/utils/store2.js";
@@ -116,7 +97,7 @@
addYzLayer,
loadBaseMap,
loadGeoMap,
- clearAll,
+ clearAll
} from "@/utils/tool";
export default {
name: "LayerPanel",
@@ -128,132 +109,81 @@
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: [],
- areaTypeList: [
+ sMapModelList: [
{
- id: "瑙勫垝鑼冨洿",
- name: "瑙勫垝鑼冨洿",
+ id: "swmx",
+ 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"),
- },
+ type: "san",
+ 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: 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;
@@ -262,11 +192,11 @@
switch (result.name) {
case "浜岀淮鍦板浘":
loadGeoMap();
- loadBaseMap();
- addAnnotationLayer();
+ // loadBaseMap();
+ // addAnnotationLayer();
addHxLayer();
addYzLayer();
- window.mapapi.getView().setZoom(14);
+ // window.mapapi.getView().setZoom(14);
break;
case "褰卞儚鍦板浘":
addImageLayer();
@@ -276,107 +206,15 @@
break;
}
},
- // 涓夌淮妯″瀷閫夋嫨
+ // 璺宠浆鍒颁笁缁�
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);
- }
- // 鍒囨崲鍥惧眰
- 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]);
- });
- }
+ store.setLayerPanelShow(false);
+ this.$router.push("/viewer3D");
},
- // 涓撻鍥鹃�夋嫨
- 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;
}
@@ -391,7 +229,7 @@
store.setThematicLayerItemId(children);
}
},
- // 绗笁琛� 涓撻鍔熻兘 鐐瑰嚮
+ // 鍔熻兘椤� 鐐瑰嚮
handleFuncClick(index) {
if (this.curFuncIndex == index) {
store.setTdglFlag(false);
@@ -403,6 +241,7 @@
window.mapapi.removeLayer(window.tdglLine);
window.tdglLine = null;
}
+
if (window.tdgllayer) {
store.setSliderShow(false);
window.mapapi.removeLayer(window.tdgllayer);
@@ -426,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:4326",
+ SRS: "EPSG:3857",
FORMAT: "image/png",
TILED: true,
- LAYERS: "",
- },
- }),
+ LAYERS: ""
+ }
+ })
});
// window.tdgllayer = new ol.layer.Tile({
@@ -470,6 +310,7 @@
this.curFuncIndex = -1;
store.setTdglFlag(false);
store.setSliderShow(false);
+ window.mapapi.removeLayer(window.tdgllayer);
store.setHistoryShow(true);
break;
}
@@ -477,120 +318,148 @@
},
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>
<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