From 4a5af28ba9fc254b81aae7345ae936cbaf0716be Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期一, 04 三月 2024 15:33:56 +0800
Subject: [PATCH] youhua
---
src/components/sideMenu/layerMenu/layerPanel2.vue | 200 ++++++++++++++++++-------------------------------
1 files changed, 75 insertions(+), 125 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index cf14e79..db3a36f 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -3,16 +3,30 @@
<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>
@@ -23,11 +37,17 @@
<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
@@ -36,9 +56,16 @@
</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>
@@ -82,12 +109,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() {
@@ -226,104 +256,24 @@
},
// 浜岀淮搴曞浘閫夋嫨
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);
- // }
-
- // 鍒囨崲鍥惧眰
- const val = layers.filter((res) => {
- if (res.name == result.name) {
- return res;
- }
- });
- const children = val[0].children;
- // console.log(children, '111')
- if (result.name == '褰卞儚鍦板浘') {
- //鍔犺浇鑸媿褰卞儚
- window.ImageLayer = new ol.layer.Tile({
- id: 'C0698021',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.ImageLayer);
-
- //鍔犺浇楂樺痉鏍囨敞
- window.annotation = new ol.layer.Tile({
- id: '69EB42A8',
- visible: true,
- source: new ol.source.XYZ({
- wrapX: true,
- url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
- }),
- projection: new ol.proj.get('EPSG:4326')
- });
- window.mapapi.addLayer(window.annotation);
-
-
- window.hexin = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.hexin)
-
-
- //浜﹀簞鏂板煄瑙勫垝鑼冨洿
- window.yizhuang = new ol.layer.Tile({
- source: new ol.source.TileWMS({
- ratio: 3,
- url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//鍥惧眰鍦板潃
- params: {
- 'VERSION': '1.1.1',
- 'SRS': 'EPSG:4326',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
- window.mapapi.addLayer(window.yizhuang)
- } else {
- window.mapapi.removeLayer(window.ImageLayer);
- window.mapapi.removeLayer(window.annotation)
- window.mapapi.removeLayer(window.hexin);
- window.mapapi.removeLayer(window.yizhuang);
- }
-
-
-
- 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]);
- // });
+ 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;
}
},
// 涓夌淮妯″瀷閫夋嫨
@@ -476,16 +426,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',
- 'FORMAT': 'image/png',
- 'TILED': true,
- "LAYERS": ''
- }
- })
- })
+ VERSION: "1.1.1",
+ SRS: "EPSG:4326",
+ FORMAT: "image/png",
+ TILED: true,
+ LAYERS: "",
+ },
+ }),
+ });
// window.tdgllayer = new ol.layer.Tile({
// source: new ol.source.XYZ({
--
Gitblit v1.9.3