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 | 468 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 285 insertions(+), 183 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index 6d35b94..274089c 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -1,49 +1,90 @@
<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" :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>
</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 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
}}</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 }" />
+ <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 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">
@@ -82,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() {
@@ -108,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: "瑙勫垝鑼冨洿",
@@ -165,7 +217,7 @@
],
zhuantiList: ZTTitem,
//curMapModelIndex: 1,
- curEMapModelIndex: 1,
+ curEMapModelIndex: 0,
curSMapModelIndex: -1,
curAreaTypeIndex: -1,
curYjIndex: -1,
@@ -178,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: {
@@ -198,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.mapapi.getLayerByName("浜岀淮鍦板浘").setVisible(true);
- window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(false);
- } else if (result.name == "褰卞儚鍦板浘") {
- window.mapapi.getLayerByName("褰卞儚鍦板浘").setVisible(true);
- window.mapapi.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;
@@ -279,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]);
+ // });
}
},
// 涓撻鍥鹃�夋嫨
@@ -357,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;
@@ -378,75 +424,83 @@
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) {
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);
- window.mapapi.removeLayer(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:
- if (window.tdgllayer) {
- window.mapapi.removeLayer(window.tdgllayer);
- store.setSliderShow(false);
- window.tdgllayer = null;
- window.mapapi.removeLayer(window.tdglLine);
- return;
- }
+ //鏄剧ず婊戝姩鏉�
store.setSliderShow(true);
-
+ store.setTdglFlag(true);
var url = layers[8].children[0].urls;
- //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
-
- 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] +
- "/" +
- (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.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);
- //鏄剧ず婊戝姩鏉�
- store.setTdglFlag(true);
break;
case 1:
this.curFuncIndex = -1;
store.setTdglFlag(false);
store.setSliderShow(false);
+ window.mapapi.removeLayer(window.tdgllayer);
store.setHistoryShow(true);
- if (window.tdglLayer) {
- store.setSliderShow(false);
- window.mapapi.removeLayer(window.tdgllayer);
- }
break;
}
}
@@ -508,65 +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