<template>
|
<div>
|
<div id="sdkContainer"></div>
|
<div class="listBox" v-show="viewer1Show && !isLand">
|
<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>
|
<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" />
|
</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";
|
import yingxiang from "@/assets/img/new/yingxiang.png";
|
import shiliang from "@/assets/img/new/shiliang.png";
|
import sanwei from "@/assets/img/new/sanwei.png";
|
import jiejing from "@/assets/img/new/jiejing.png";
|
import "animate.css";
|
import Bus from "@tools/Bus";
|
import mapViewer from "../../assets/js/Layer/mapViewer";
|
|
|
let activeLi, nLayer, LWLayer;
|
export default {
|
name: "viewer",
|
components: {
|
switchImagerLayer,
|
layerTreeTwoScreen,
|
},
|
data() {
|
return {
|
cHeight: "770千米",
|
date: "",
|
bottomInfo: "",
|
hb: "",
|
jd: "",
|
wd: "",
|
switchImage: yingxiang,
|
switchImagerLayer: false,
|
size: "100%",
|
scale: "1",
|
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,
|
],
|
};
|
},
|
computed: {
|
...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 that = this;
|
//*********北京sdk************
|
|
// Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NzE3ZGI5NC00MzAwLTRmMzEtOTA5NS0zNzQ3YmJhOTg5MWMiLCJpZCI6NDE4NDYsImlhdCI6MTYxMjU4MDEyN30.XQkH4SpF-q3ykVvnBi_HVyJwSxTM-58SxlRG387T6TY";
|
window.sgworld = new SmartEarth.EarthCtrl(
|
"sdkContainer",
|
{
|
StaticFileBaseUrl: "../../../static/CimSDK/",
|
// StaticFileBaseUrl: "../../../SW/static/CimSDK/",
|
// StaticFileBaseUrl: "../../../JSJKZHGS/static/CimSDK/",
|
},
|
{},
|
{},
|
() => {
|
|
this.TdtIMageLayer();
|
this.ArcgisImageryLayer();
|
|
//先飞到亦庄行政区
|
sgworld.Navigate.flyToPointsInterest({
|
destination: {
|
"x": -2739326.5749705257,
|
"y": 4699172.613682586,
|
"z": 3363231.4711036524
|
}, orientation: new Cesium.HeadingPitchRoll(0.20701194045518534, -1.2462306958113518, 0.00000112321019862804),
|
duration: 7, //飞行时间8s
|
});
|
|
|
that.setCesiumInit(true);
|
}
|
);
|
window.Viewer = sgworld._Viewer;
|
window.viewer = sgworld._Viewer;
|
sgworld._Viewer.scene.moon.show = false;
|
// Viewer.terrainProvider=Cesium.createWorldTerrain()
|
|
window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
|
Viewer.shadows = false;
|
//深度检测
|
sgworld.Analysis.depthTestAgainstTerrain(true);
|
//地下模式距离参数
|
// Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
|
Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
|
Viewer.scene.globe.undergroundColor = undefined;
|
// Viewer.scene.screenSpaceCameraController.minimumZoomDistance =200;
|
//开启编辑并启用属性弹窗
|
sgworld.Creator.SimpleGraphic.setEdit(false, {
|
editProp: false,
|
editPropData: {
|
offset: "r",
|
height: "60%",
|
},
|
callBack: {
|
delete: function (entity) {
|
Bus.$emit("removeTreeNode", entity);
|
},
|
end: function (entity) {
|
if (entity) {
|
let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
|
let data = {
|
name: entity.name,
|
style: style,
|
};
|
Bus.$emit("updataTreeNode", entity.id, data);
|
}
|
},
|
},
|
});
|
//标会编辑
|
// sgworld.Creator.SimpleGraphic.setEdit(true, {
|
// editProp: true,
|
// editPropData: {
|
// offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"],
|
// // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
|
// height: 650,
|
// success(layero, index) {
|
// let contentWindow = layero.find("iframe")[0].contentWindow;
|
// let layeroHeight = layero.height();
|
// let titleHeight = layero.find(".layui-layer-title").height();
|
// let htmlHeight =
|
// contentWindow.document.firstElementChild.offsetHeight;
|
// if (layeroHeight > titleHeight + htmlHeight) {
|
// layero.height(titleHeight + htmlHeight);
|
// layero.find("iframe").height(htmlHeight);
|
// }
|
// },
|
// },
|
// });
|
//军标编辑
|
sgworld.Creator.MilitaryPlotting.setEdit(true, {
|
editProp: true,
|
editPropData: {
|
offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
|
height: 650,
|
success(layero, index) {
|
let contentWindow = layero.find("iframe")[0].contentWindow;
|
let layeroHeight = layero.height();
|
let titleHeight = layero.find(".layui-layer-title").height();
|
let htmlHeight =
|
contentWindow.document.firstElementChild.offsetHeight;
|
if (layeroHeight >= titleHeight + htmlHeight) {
|
layero.height(titleHeight + htmlHeight);
|
}
|
},
|
},
|
});
|
|
//初始化弹窗事件
|
// that.showBottom();
|
that.initLayerOpen();
|
//添加鼠标点击事件
|
mapViewer.addClick();
|
|
|
|
});
|
let size = this.detectZoom();
|
this.scale = (100 / size).toFixed(2);
|
this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
|
this.size = size + "%";
|
},
|
methods: {
|
...mapMutations(["setCesiumInit", "updataTreeNode"]),
|
detectZoom() {
|
var ratio = 0,
|
screen = window.screen,
|
ua = navigator.userAgent.toLowerCase();
|
if (window.devicePixelRatio !== undefined) {
|
ratio = window.devicePixelRatio;
|
} else if (~ua.indexOf("msie")) {
|
if (screen.deviceXDPI && screen.logicalXDPI) {
|
ratio = screen.deviceXDPI / screen.logicalXDPI;
|
}
|
} else if (
|
window.outerWidth !== undefined &&
|
window.innerWidth !== undefined
|
) {
|
ratio = window.outerWidth / window.innerWidth;
|
}
|
|
if (ratio) {
|
ratio = Math.round(ratio * 100);
|
}
|
// ratio 就是获取到的百分比
|
//console.log(ratio);
|
return ratio;
|
//this.onresize_height = ratio;
|
// return ratio;
|
},
|
changeMode(mode) {
|
this.$refs.switchImagerLayer.switchImagerLayerClick(mode);
|
},
|
setImageComparison(isStart) {
|
this.isImage = isStart;
|
if (!this.isImage) {
|
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 = null;
|
}
|
if (nLayer) {
|
Viewer.imageryLayers.remove(nLayer, true);
|
nLayer = null;
|
}
|
if (LWLayer) {
|
Viewer.imageryLayers.remove(LWLayer, true);
|
LWLayer = null;
|
}
|
},
|
changeLeftMap(event, item, index) {
|
let liObj = event.currentTarget;
|
if (activeLi) {
|
activeLi.classList.remove("active");
|
activeLi = null;
|
}
|
liObj.classList.add("active");
|
activeLi = liObj;
|
this.loadImageLayer(item);
|
},
|
loadImageLayer(year) {
|
if (nLayer) {
|
Viewer.imageryLayers.remove(nLayer, true);
|
nLayer = null;
|
}
|
nLayer = this.loadBJ54ImageLayer(year);
|
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 = 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 rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
|
let tilingScheme = new Cesium.GeographicTilingScheme({
|
rectangle: rectangle,
|
numberOfLevelZeroTilesX: 2,
|
numberOfLevelZeroTilesY: 1,
|
});
|
var dx = {
|
url: paramUrl,
|
tilingScheme: tilingScheme,
|
customTags: {
|
nx: function (imageryProvider, x, y, level) {
|
return (2 << (level - 1)) + x;
|
},
|
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,
|
});
|
Viewer.imageryLayers.add(imageLayer, 3);
|
return imageLayer;
|
},
|
loadBJ54ImageLayer(year) {
|
let url = "http://172.26.64.84/service/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 rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
|
let tilingScheme = new Cesium.GeographicTilingScheme({
|
rectangle: rectangle,
|
numberOfLevelZeroTilesX: 2,
|
numberOfLevelZeroTilesY: 1,
|
});
|
var dx = {
|
url: paramUrl,
|
tilingScheme: tilingScheme,
|
customTags: {
|
nx: function (imageryProvider, x, y, level) {
|
return (2 << (level - 1)) + x;
|
},
|
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,
|
});
|
Viewer.imageryLayers.add(imageLayer, 2);
|
return imageLayer;
|
},
|
changeImage(val) {
|
switch (val) {
|
case "1":
|
this.switchImage = yingxiang;
|
break;
|
case "2":
|
this.switchImage = shiliang;
|
break;
|
case "3":
|
this.switchImage = sanwei;
|
break;
|
case "4":
|
this.switchImage = jiejing;
|
break;
|
}
|
},
|
switchImagerLayerShowOrHide() {
|
this.switchImagerLayer = !this.switchImagerLayer;
|
},
|
ArcgisImageryLayer() {
|
// var layer= sgworld.Creator.createArcGisImageryLayer(
|
// "ARCGIS",
|
// {
|
// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
// enablePickFeatures: false,
|
// },
|
// "0",
|
// 1,
|
// true,
|
// ""
|
// );
|
var layer = Viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
|
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
|
}))
|
layer.name = "ARCGIS"
|
},
|
TdtIMageLayer() {
|
var layer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
url: layerData.config.tdtSl + layerData.config.tdtToken,
|
layer: "tdtImgLayer",
|
style: "default",
|
format: "image/jpeg",
|
name: '天地图',
|
tileMatrixSetID: "GoogleMapsCompatible",
|
}))
|
layer.name = "天地图";
|
layer.show = false;
|
var layer1 = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
url: layerData.config.tdtZj + layerData.config.tdtToken,
|
layer: "tdtAnnoLayer",
|
style: "default",
|
format: "image/jpeg",
|
name: '天地图',
|
tileMatrixSetID: "GoogleMapsCompatible",
|
}))
|
layer1.name = "天地图"
|
layer1.show = false;
|
},
|
//初始化弹窗事件
|
|
initLayerOpen() {
|
window.layerOpen = function (name, options) {
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
|
let width = options.width;
|
let height = options.height;
|
let fn = options.fn || {};
|
|
//获取相关回调事件
|
let cancelFn = null;
|
let successFn = null;
|
let endFn = null;
|
for (let key in fn) {
|
cancelFn = key == "cancel" ? fn[key] : cancelFn;
|
successFn = key == "success" ? fn[key] : successFn;
|
endFn = key == "end" ? fn[key] : endFn;
|
}
|
|
SmartEarthPopupData.layerProp = layuiLayer.open({
|
title: name,
|
skin: "other-class",
|
type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
|
shade: 0,
|
shadeClose: true,
|
resize: false,
|
offset: options.offset || undefined,
|
area: [
|
typeof width === "number" ? width + "px" : width,
|
typeof height === "number" ? height + "px" : height,
|
],
|
content: options.url,
|
success: function (layero, index) {
|
layero.css({
|
"border-radius": "8px",
|
});
|
if (successFn && typeof successFn === "function") {
|
successFn(layero, index);
|
}
|
},
|
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 () {
|
if (endFn && typeof endFn === "function") {
|
endFn();
|
}
|
},
|
});
|
};
|
},
|
//地图底部工具栏显示地图坐标信息
|
showBottom() {
|
this.bottomInfo =
|
"<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>";
|
|
let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler3D.setInputAction((wheelment) => {
|
// 滚动滚轴，得到当前的视点高度
|
// 单位换算，当大于1000米的时候显示“千米”，小于1000米的时候显示单位为“米”
|
var cHeightM = Viewer.camera.positionCartographic.height;
|
var cHeightKm = (cHeightM / 1000).toFixed(0);
|
if (cHeightKm > 1) {
|
this.cHeight = cHeightKm + "千米";
|
} else {
|
this.cHeight = cHeightM.toFixed(0) + "米";
|
}
|
// 当cHeight的值改变时，赋值给window中的sdHeight
|
window.sdHeight = this.cHeight;
|
this.bottomInfo =
|
"<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>" +
|
"<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#FFFFFF;float: right;height: 28px;line-height: 28px;'>" +
|
"<span style='margin-right:40px'>海拔:" +
|
this.hb +
|
"米</span>" +
|
"<span style='margin-right:40px'>经度：" +
|
this.jd +
|
"</span>" +
|
"<span style='margin-right:40px'>纬度：" +
|
this.wd +
|
"</span>" +
|
"<span style='margin-right:40px'>视点高度：" +
|
this.cHeight +
|
"</span>" +
|
"</span>";
|
//当滑动的距离小于5km，取消聚合
|
// if (window.dataClustering && window.dataClustering.enabled) {
|
if (parseFloat(cHeightKm) < 2) {
|
window.dataClustering && (window.dataClustering.enabled = false);
|
} else {
|
window.dataClustering && (window.dataClustering.enabled = true);
|
}
|
// }
|
}, Cesium.ScreenSpaceEventType.WHEEL);
|
// handler3D.setInputAction((movement) => {
|
// if (window.sdHeight == "") {
|
// this.cHeight = "862.1千米";
|
// }
|
// let cartesian = Viewer.scene.pickPosition(movement.endPosition);
|
// if (!cartesian) return;
|
// let degrees = sgworld.Core.toDegrees(cartesian);
|
// if (degrees) {
|
// let height = degrees.height;
|
// //地理坐标（弧度）转经纬度坐标
|
// let point = [degrees.lon, degrees.lat];
|
// this.hb = height.toFixed(0);
|
// this.jd = point[0].toFixed(2);
|
// this.wd = point[1].toFixed(2);
|
// this.bottomInfo =
|
// "<div style='color: #FFFFFF;float: left;height: 28px;line-height: 28px;'></div>" +
|
// "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#FFFFFF;float: right;height: 28px;line-height: 28px;'>" +
|
// "<span style='margin-right:40px'>海拔:" +
|
// this.hb +
|
// "米</span>" +
|
// "<span style='margin-right:40px'>经度：" +
|
// this.jd +
|
// "</span>" +
|
// "<span style='margin-right:40px'>纬度：" +
|
// this.wd +
|
// "</span>" +
|
// "<span style='margin-right:40px'>视点高度：" +
|
// this.cHeight +
|
// "</span>" +
|
// "</span>";
|
// }
|
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
#bottomInfo {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 28px;
|
background: rgba(0, 0, 0, 0.27);
|
}
|
|
#distanceLegendDiv {
|
display: none !important;
|
}
|
|
#switchImagerLayer {
|
display: block;
|
position: absolute;
|
/*bottom: 120px;*/
|
bottom: 30px;
|
right: 80px;
|
/* margin-right: -105px; */
|
z-index: 9999;
|
border-radius: 10px;
|
/* box-shadow: 0px 0px 5px 3px #fff; */
|
}
|
|
/* #switchImagerLayer:before {
|
content: "";
|
position: absolute;
|
right: 5px;
|
bottom: 10px;
|
border: 13px solid rgba(0, 0, 0, 0.5);
|
border-top-color: transparent;
|
border-left-color: transparent;
|
}
|
|
#switchImagerLayer:after {
|
content: "";
|
width: 5px;
|
height: 12px;
|
position: absolute;
|
right: 8px;
|
bottom: 10px;
|
border: 2px solid #fff;
|
border-top-color: transparent;
|
border-left-color: transparent;
|
transform: rotate(45deg);
|
} */
|
|
.swichImg {
|
width: 117px;
|
height: 80px;
|
border-radius: 10px;
|
cursor: pointer;
|
}
|
|
.bgbox {
|
position: absolute;
|
top: 0;
|
left: 8px;
|
z-index: -1;
|
}
|
|
.listBox {
|
position: absolute;
|
left: 20px;
|
top: 100px;
|
}
|
|
.listBox .active {
|
background: rgba(255, 166, 0, 0.808);
|
}
|
|
.listBox li {
|
padding: 2px;
|
margin-top: 1px;
|
border-radius: 2px;
|
color: white;
|
background: rgba(14, 50, 143, 0.6);
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
/* 屏幕分辨率放大为 125 */
|
@media (-webkit-min-device-pixel-ratio: 1.25) {
|
.listBox li {
|
font-size: 12px;
|
}
|
}
|
|
.listBox li:hover {
|
background: rgba(255, 166, 0, 0.808);
|
}
|
|
.mid {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
right: 20%;
|
}
|
</style>
|
