<template>
|
<div>
|
<div id="sdkContainer"></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 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";
|
export default {
|
name: "viewer",
|
components: {
|
switchImagerLayer,
|
layerTreeTwoScreen,
|
},
|
data() {
|
return {
|
cHeight: "770千米",
|
date: "",
|
bottomInfo: "",
|
hb: "",
|
jd: "",
|
wd: "",
|
switchImage: sanwei,
|
switchImagerLayer: false,
|
size: "100%",
|
scale: "1",
|
offset: "0%",
|
radio: 3,
|
};
|
},
|
computed: {
|
...mapState(["layerTreeTwoScreen", "cesiumInit"]),
|
},
|
mounted() {
|
this.$nextTick(function () {
|
let that = this;
|
//*********北京sdk************
|
window.sgworld = new SmartEarth.EarthCtrl(
|
"sdkContainer",
|
{
|
// StaticFileBaseUrl: "../../../static/CimSDK/",
|
StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
|
},
|
{},
|
{},
|
() => {
|
this.ArcgisImageryLayer();
|
//先飞到亦庄行政区
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.540659,
|
39.744945,
|
50000
|
),
|
duration: 7, //飞行时间8s
|
});
|
//再飞到朝林大厦
|
setTimeout(() => {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.502368,
|
39.791361,
|
5000
|
),
|
duration: 5, //飞行时间8s
|
});
|
}, 8000);
|
setTimeout(() => {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.502368,
|
39.791361,
|
225.59
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(328.5),
|
pitch: Cesium.Math.toRadians(-27.5),
|
roll: Cesium.Math.toRadians(0.0),
|
},
|
duration: 5, //飞行时间8s
|
});
|
}, 14000);
|
that.setCesiumInit(true);
|
}
|
);
|
window.Viewer = sgworld._Viewer;
|
window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
|
Viewer.shadows = false;
|
//深度检测
|
sgworld.Analysis.depthTestAgainstTerrain(true);
|
//地下模式距离参数
|
// Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
|
Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
|
Viewer.scene.globe.undergroundColor = undefined;
|
//开启编辑并启用属性弹窗
|
sgworld.Creator.SimpleGraphic.setEdit(true, {
|
editProp: true,
|
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();
|
});
|
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;
|
},
|
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.factory.createImageryLayer({
|
sourceType: "arcgis",
|
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
});
|
},
|
//初始化弹窗事件
|
|
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();
|
}
|
},
|
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: 13px;
|
right: 46px;
|
/* 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;
|
}
|
.mid {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
right: 20%;
|
}
|
</style>
|
