From c6df06bd690486739067ee1ee7124ac66da720fb Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期二, 27 二月 2024 14:23:32 +0800
Subject: [PATCH] youhua
---
src/components/sideMenu/layerMenu/layerPanel2.vue | 374 +++++++++++++++++++++++++----------------------------
1 files changed, 176 insertions(+), 198 deletions(-)
diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue
index e4c3a1c..cf14e79 100644
--- a/src/components/sideMenu/layerMenu/layerPanel2.vue
+++ b/src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -3,75 +3,31 @@
<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>
</div>
</div>
</div>
- <!-- <div class="areaType" style="margin-top: 10px">
- <div class="title">
- 涓撻鍥惧眰
- <span class="more" @click.stop="showLayerTree"
- >鏇村鍥惧眰<i class="el-icon-arrow-right"></i
- ></span>
- </div>
- <div class="container">
- <div
- class="layerItem"
- :key="value1.id"
- v-for="(value1, index1) in areaTypeList"
- @click.stop="handleAreaClick(value1, index1)"
- >
- <img
- :src="value1.src"
- :class="{ active: curAreaTypeIndex == index1 }"
- />
- <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
- value1.name
- }}</span>
- </div>
- </div>
- </div> -->
<div class="areaType" style="margin-top: 10px">
<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
@@ -80,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>
@@ -129,10 +78,16 @@
clearLayerByTypeId,
clearLayerByTypeIdArr,
} from "@/utils/map.js";
-import _GLOBAL from "@/assets/GLOBAL";
-import store from "@/utils/store.js";
-import ZTTitem from "@/utils/ztt.js";
+import _GLOBAL from "@/assets/GLOBAL2";
+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";
+
export default {
name: "LayerPanel",
data() {
@@ -153,22 +108,7 @@
src: require("@/assets/img/layer/yxdt.png"),
},
],
- sMapModelList: [
- // {
- // id: "3Dcs",
- // name: "3D鍩庡競",
- // active: false,
- // type: "san",
- // src: require("@/assets/img/layer/3Dcs.png"),
- // },
- // {
- // id: "swmx",
- // name: "涓夌淮妯″瀷",
- // active: false,
- // type: "san",
- // src: require("@/assets/img/layer/swmx.png"),
- // },
- ],
+ sMapModelList: [],
areaTypeList: [
{
id: "瑙勫垝鑼冨洿",
@@ -225,7 +165,7 @@
],
zhuantiList: ZTTitem,
//curMapModelIndex: 1,
- curEMapModelIndex: 0,
+ curEMapModelIndex: 1,
curSMapModelIndex: -1,
curAreaTypeIndex: -1,
curYjIndex: -1,
@@ -238,19 +178,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: {
@@ -286,32 +226,15 @@
},
// 浜岀淮搴曞浘閫夋嫨
handleEMapClick(result, index) {
- let p = sgworld.Navigate.getCameraInfo();
- let pitch;
- if (pitch !== -90) {
- pitch = -90;
- sgworld.Navigate.flyToPointsInterest({
- destination: new Cesium.Cartesian3.fromDegrees(
- p.location.lon,
- p.location.lat,
- p.location.height
- ),
- orientation: {
- heading: Cesium.Math.toRadians(0),
- pitch: Cesium.Math.toRadians(pitch),
- roll: Cesium.Math.toRadians(0),
- },
- });
- }
-
// 璁剧疆鐩告満
- if (result.name == "浜岀淮鍦板浘") {
- window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
- this.changeLayerView(25000, false);
- } else if (result.name == "褰卞儚鍦板浘") {
- window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
- this.changeLayerView(50000, false);
- }
+ // 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) {
@@ -319,6 +242,73 @@
}
});
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);
@@ -326,14 +316,14 @@
} 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]);
- });
+ // 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]);
+ // });
}
},
// 涓夌淮妯″瀷閫夋嫨
@@ -435,6 +425,7 @@
},
// 绗簩琛� 涓撻鍥� 鐐瑰嚮
handleZTlick(result, index) {
+ // console.log(result, index);
const val = layers.filter((res) => {
if (res.name == result.name) {
return res;
@@ -443,38 +434,11 @@
const children = val[0].children;
if (this.curZTIndex == index) {
this.curZTIndex = -1;
- // let _data = sgworld.ProjectTree.getObject(children[0].id);
- // if (_data) {
- // sgworld.ProjectTree.setVisibility(children[0].id, false);
- // }
+
store.setThematicLayerItemId("");
} else {
this.curZTIndex = index;
store.setThematicLayerItemId(children);
-
- // //娓呴櫎
- // // 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);
}
},
// 绗笁琛� 涓撻鍔熻兘 鐐瑰嚮
@@ -482,62 +446,80 @@
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) {
- sgworld.Creator.DeleteObject(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);
- sgworld.Creator.DeleteObject(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:
- 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,
- ""
- );
//鏄剧ず婊戝姩鏉�
+ store.setSliderShow(true);
store.setTdglFlag(true);
+ var url = layers[8].children[0].urls;
+ //鍔犺浇鍦板潡妯″瀷
+ window.tdgllayer = new ol.layer.Tile({
+ source: new ol.source.TileWMS({
+ ratio: 3,
+ url: 'https://skyzt.bda.gov.cn//gisserver/wmsserver/chengshiguihua_dikuaibianhao',
+ params: {
+ 'VERSION': '1.1.1',
+ 'SRS': 'EPSG:4326',
+ '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);
break;
case 1:
this.curFuncIndex = -1;
store.setTdglFlag(false);
- if (window.tdglLayer) {
- store.setSliderShow(false);
- sgworld.Creator.DeleteObject(window.tdglLayer);
- }
+ store.setSliderShow(false);
store.setHistoryShow(true);
break;
}
@@ -588,12 +570,6 @@
immediate: true, //鍒锋柊鍔犺浇 绔嬮┈瑙﹀彂涓�娆andler
deep: true, // 鍙互娣卞害妫�娴嬪埌 obj 瀵硅薄鐨勫睘鎬у�肩殑鍙樺寲
},
- // "state1.alpha": {
- // handler: function (newVal) {
- // this.handleFuncClick(0);
- // },
- // deep: true,
- // },
},
computed: {
alpha() {
@@ -624,9 +600,11 @@
line-height: 25px;
margin: 10px 0px 10px 0;
}
+
.title2 {
height: 15px;
}
+
.container {
display: flex;
align-items: center;
--
Gitblit v1.9.3