From 3d69aca217ca66daa01a80c26570441e0b03875f Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期一, 12 五月 2025 16:47:41 +0800
Subject: [PATCH] 1
---
src/components/map/viewer.vue | 249 ++++++++++++++++++++++++++++++++-----------------
1 files changed, 160 insertions(+), 89 deletions(-)
diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue
index 9a11899..fafcad8 100644
--- a/src/components/map/viewer.vue
+++ b/src/components/map/viewer.vue
@@ -1,38 +1,57 @@
<template>
<div>
<div id="sdkContainer"></div>
+
<div class="listBox" v-show="viewer1Show && !isLand">
- <ul>
- <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
- {{ item }}
- </li>
+ <ul id="viewer_lsyx">
+ <li
+ v-for="(item, index) in arr"
+ :key="index"
+ @click="changeLeftMap($event, item, index)"
+ >{{ item }}</li>
</ul>
</div>
+
<layerTreeTwoScreen v-if="layerTreeTwoScreen" />
<!-- <div id="bottomInfo" v-html="bottomInfo"></div> -->
- <div id="switchImagerLayer" :style="{
- transform: `scale(${scale}) translate(${offset},${offset})`,
- '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
- '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
- '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
- '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
- }">
- <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide"
- enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear>
+ <div
+ id="switchImagerLayer"
+ :style="{
+ transform: `scale(${scale}) translate(${offset},${offset})`,
+ '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
+ '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
+ }"
+ >
+ <transition
+ name="animate__animated animate__bounce"
+ @click="switchImagerLayerShowOrHide"
+ enter-active-class="animate__backInRight"
+ leave-active-class="animate__backOutRight"
+ appear
+ >
<switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
</transition>
<img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
<div class="bgbox">
- <img class="swichImg" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
- <img class="swichImg bgbox" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
+ <img
+ class="swichImg"
+ @click="switchImagerLayerShowOrHide"
+ src="@/assets/img/new/shiliang.png"
+ />
+ <img
+ class="swichImg bgbox"
+ @click="switchImagerLayerShowOrHide"
+ src="@/assets/img/new/shiliang.png"
+ />
</div>
</div>
</div>
</template>
<script>
-import common from "@/components/common";
import layerTreeTwoScreen from "@/components/left/layerTreeTwoScreen";
import switchImagerLayer from "@/components/right/switchImagerLayer";
import { mapState, mapMutations } from "vuex";
@@ -42,13 +61,14 @@
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";
+import mapMsg from "../../assets/js/mapMsg";
-let activeLi, nLayer,LWLayer;
+let activeLi, nLayer, LWLayer;
export default {
name: "viewer",
components: {
switchImagerLayer,
- layerTreeTwoScreen,
+ layerTreeTwoScreen
},
data() {
return {
@@ -65,36 +85,65 @@
offset: "0%",
radio: 3,
arr: [
- 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
- 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
- ],
+ 2001,
+ 2002,
+ 2003,
+ 2004,
+ 2005,
+ 2006,
+ 2007,
+ 2008,
+ 2009,
+ 2010,
+ 2011,
+ 2012,
+ 2013,
+ 2014,
+ 2015,
+ 2016,
+ 2017,
+ 2018,
+ 2019,
+ 2020,
+ 2021
+ ]
};
},
computed: {
- ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
+ ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"])
},
watch: {
viewer1Show(newvalue, oldvalue) {
if (!newvalue) {
this.destroyImageLayer();
+ } else {
+ if (!this.isLand) {
+ this.initLSYX();
+ }
}
},
isLand(newvalue, oldvalue) {
if (newvalue) {
this.destroyImageLayer();
+ } else {
+ this.initLSYX();
}
-
}
},
mounted() {
- this.$nextTick(function () {
+ let pathName = window.location.pathname.split("/");
+ let StaticFileBaseUrl;
+ if (pathName.length != 2) {
+ StaticFileBaseUrl = `../../../${pathName[1]}/static/CimSDK/`;
+ } else {
+ StaticFileBaseUrl = `../../../static/CimSDK/`;
+ }
+ this.$nextTick(function() {
let that = this;
- //*********鍖椾含sdk************
window.sgworld = new SmartEarth.EarthCtrl(
"sdkContainer",
{
- // StaticFileBaseUrl: "../../../static/CimSDK/",
- StaticFileBaseUrl: "../../../SW/static/CimSDK/",
+ StaticFileBaseUrl: StaticFileBaseUrl
},
{},
{},
@@ -107,7 +156,7 @@
39.744945,
50000
),
- duration: 7, //椋炶鏃堕棿8s
+ duration: 7 //椋炶鏃堕棿8s
});
//鍐嶉鍒版湞鏋楀ぇ鍘�
setTimeout(() => {
@@ -117,7 +166,7 @@
39.791361,
5000
),
- duration: 5, //椋炶鏃堕棿8s
+ duration: 5 //椋炶鏃堕棿8s
});
}, 8000);
setTimeout(() => {
@@ -130,16 +179,19 @@
orientation: {
heading: Cesium.Math.toRadians(328.5),
pitch: Cesium.Math.toRadians(-27.5),
- roll: Cesium.Math.toRadians(0.0),
+ roll: Cesium.Math.toRadians(0.0)
},
- duration: 5, //椋炶鏃堕棿8s
+ duration: 5 //椋炶鏃堕棿8s
});
+ // console.log("鍔犺浇瀹屾垚");
}, 14000);
that.setCesiumInit(true);
}
);
window.Viewer = sgworld._Viewer;
- window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
+ window.viewer = sgworld._Viewer;
+ sgworld._Viewer.scene.moon.show = false;
+ window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
Viewer.shadows = false;
//娣卞害妫�娴�
sgworld.Analysis.depthTestAgainstTerrain(true);
@@ -147,28 +199,32 @@
// Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
Viewer.scene.globe.undergroundColor = undefined;
+
+ mapMsg.init();
+ // rpc.clickToCoordinates();
+ // mapMsg.setTime();
//寮�鍚紪杈戝苟鍚敤灞炴�у脊绐�
sgworld.Creator.SimpleGraphic.setEdit(true, {
editProp: true,
editPropData: {
offset: "r",
- height: "60%",
+ height: "60%"
},
callBack: {
- delete: function (entity) {
+ delete: function(entity) {
Bus.$emit("removeTreeNode", entity);
},
- end: function (entity) {
+ end: function(entity) {
if (entity) {
let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
let data = {
name: entity.name,
- style: style,
+ style: style
};
Bus.$emit("updataTreeNode", entity.id, data);
}
- },
- },
+ }
+ }
});
//鏍囦細缂栬緫
// sgworld.Creator.SimpleGraphic.setEdit(true, {
@@ -205,18 +261,9 @@
if (layeroHeight >= titleHeight + htmlHeight) {
layero.height(titleHeight + htmlHeight);
}
- },
- },
+ }
+ }
});
-
-
-
-
-
-
-
-
-
//鍒濆鍖栧脊绐椾簨浠�
// that.showBottom();
@@ -264,9 +311,14 @@
this.destroyImageLayer();
}
},
+ initLSYX() {
+ let ul = document.getElementById("viewer_lsyx");
+ let lis = ul.getElementsByTagName("li");
+ lis[19].click();
+ },
destroyImageLayer() {
if (activeLi) {
- activeLi.classList.remove('active');
+ activeLi.classList.remove("active");
activeLi = null;
}
if (nLayer) {
@@ -281,10 +333,10 @@
changeLeftMap(event, item, index) {
let liObj = event.currentTarget;
if (activeLi) {
- activeLi.classList.remove('active');
+ activeLi.classList.remove("active");
activeLi = null;
}
- liObj.classList.add('active');
+ liObj.classList.add("active");
activeLi = liObj;
this.loadImageLayer(item);
},
@@ -294,20 +346,22 @@
nLayer = null;
}
nLayer = this.loadBJ54ImageLayer(year);
- if(!LWLayer)
- {
+ if (!LWLayer || Viewer.imageryLayers.indexOf(LWLayer) < 0) {
+ if (LWLayer) {
+ LWLayer.destroy();
+ }
LWLayer = this.loadBJ54LWLayer();
}
},
loadBJ54LWLayer() {
- let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
+ let url = "http://10.10.4.116:8085/yzAdapter/ImageEngine/picdis/abc";
//let url = option.url;
//let year = option.year;
- let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
- let minx = 113.168199 * Math.PI / 180.0;
- let miny = 39.230551 * Math.PI / 180.0;
- let maxx = 118.562362 * Math.PI / 180.0;
- let maxy = 41.294714 * Math.PI / 180.0;
+ let paramUrl = `${url}?layer=Shiliang_Lw_2019&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
let tilingScheme = new Cesium.GeographicTilingScheme({
rectangle: rectangle,
@@ -318,28 +372,31 @@
url: paramUrl,
tilingScheme: tilingScheme,
customTags: {
- nx: function (imageryProvider, x, y, level) {
+ nx: function(imageryProvider, x, y, level) {
return (2 << (level - 1)) + x;
},
- ny: function (imageryProvider, x, y, level) {
+ ny: function(imageryProvider, x, y, level) {
return (2 << (level - 1)) + y;
}
}
};
var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
- let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0
+ });
Viewer.imageryLayers.add(imageLayer, 3);
return imageLayer;
},
loadBJ54ImageLayer(year) {
- let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
+ let url = "http://10.10.4.116:8085/yzAdapter/ImageEngine/picdis/abc";
//let url = option.url;
//let year = option.year;
- let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
- let minx = 113.168199 * Math.PI / 180.0;
- let miny = 39.230551 * Math.PI / 180.0;
- let maxx = 118.562362 * Math.PI / 180.0;
- let maxy = 41.294714 * Math.PI / 180.0;
+ let paramUrl = `${url}?layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
+ let minx = (113.168199 * Math.PI) / 180.0;
+ let miny = (39.230551 * Math.PI) / 180.0;
+ let maxx = (118.562362 * Math.PI) / 180.0;
+ let maxy = (41.294714 * Math.PI) / 180.0;
let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
let tilingScheme = new Cesium.GeographicTilingScheme({
rectangle: rectangle,
@@ -350,16 +407,19 @@
url: paramUrl,
tilingScheme: tilingScheme,
customTags: {
- nx: function (imageryProvider, x, y, level) {
+ nx: function(imageryProvider, x, y, level) {
return (2 << (level - 1)) + x;
},
- ny: function (imageryProvider, x, y, level) {
+ ny: function(imageryProvider, x, y, level) {
return (2 << (level - 1)) + y;
}
}
};
var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
- let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
+ let imageLayer = new Cesium.ImageryLayer(imageryProvider, {
+ alpha: 1,
+ brightness: 1.0
+ });
Viewer.imageryLayers.add(imageLayer, 2);
return imageLayer;
},
@@ -383,15 +443,24 @@
this.switchImagerLayer = !this.switchImagerLayer;
},
ArcgisImageryLayer() {
- var layer = sgworld.factory.createImageryLayer({
- sourceType: "arcgis",
- url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
- });
+ let InitMap = sgworld.Creator.createArcGisImageryLayer(
+ "ARCGIS",
+ {
+ url:
+ "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+ enablePickFeatures: false
+ },
+ "0",
+ 1,
+ true,
+ ""
+ );
+ console.log(InitMap);
},
//鍒濆鍖栧脊绐椾簨浠�
initLayerOpen() {
- window.layerOpen = function (name, options) {
+ window.layerOpen = function(name, options) {
layuiLayer.close(SmartEarthPopupData.layerProp);
let width = options.width;
@@ -418,27 +487,32 @@
offset: options.offset || undefined,
area: [
typeof width === "number" ? width + "px" : width,
- typeof height === "number" ? height + "px" : height,
+ typeof height === "number" ? height + "px" : height
],
content: options.url,
- success: function (layero, index) {
+ success: function(layero, index) {
layero.css({
- "border-radius": "8px",
+ "border-radius": "8px"
});
if (successFn && typeof successFn === "function") {
successFn(layero, index);
}
},
- cancel: function () {
+ cancel: function() {
if (cancelFn && typeof cancelFn === "function") {
cancelFn();
+ if (window.pickFeature && window.pickFeature.primitive) {
+ window.pickFeature.primitive.image = imgUrl;
+ window.pickFeature.primitive.scale = scale;
+ window.pickFeature = null;
+ }
}
},
- end: function () {
+ end: function() {
if (endFn && typeof endFn === "function") {
endFn();
}
- },
+ }
});
};
},
@@ -448,7 +522,7 @@
"<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>";
let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
- handler3D.setInputAction((wheelment) => {
+ handler3D.setInputAction(wheelment => {
// 婊氬姩婊氳酱锛屽緱鍒板綋鍓嶇殑瑙嗙偣楂樺害
// 鍗曚綅鎹㈢畻锛屽綋澶т簬1000绫崇殑鏃跺�欐樉绀衡�滃崈绫斥�濓紝灏忎簬1000绫崇殑鏃跺�欐樉绀哄崟浣嶄负鈥滅背鈥�
var cHeightM = Viewer.camera.positionCartographic.height;
@@ -517,8 +591,8 @@
// "</span>";
// }
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
- },
- },
+ }
+ }
};
</script>
@@ -588,13 +662,10 @@
position: absolute;
left: 20px;
top: 100px;
-
}
.listBox .active {
-
background: rgba(255, 166, 0, 0.808);
-
}
.listBox li {
--
Gitblit v1.9.3