<template>
|
<div>
|
<div id="sdkContainer"></div>
|
<!-- <div style="z-index: 30;position: absolute; top:1%;left: 1%;">
|
<el-button @click="setLocation(3)">漫游</el-button>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import store from "@/utils/store";
|
import poiLayer from "@/components/poplayer/main";
|
import common from "@/components/common";
|
import { mapState, mapMutations } from "vuex";
|
import "animate.css";
|
import rpc from "../../assets/js/rpc";
|
let PoiLayerConstructor = Vue.extend(poiLayer);
|
|
let handler;
|
let objdata;
|
window.divPoint3 = null;
|
window.instance = null;
|
window.pickFeature = null;
|
window.imgUrl = null;
|
window.scale = null;
|
export default {
|
name: "viewer",
|
data() {
|
return {
|
cHeight: "770千米",
|
date: "",
|
bottomInfo: "",
|
hb: "",
|
jd: "",
|
wd: "",
|
size: "100%",
|
scale: "1",
|
offset: "0%",
|
radio: 3,
|
locationPoint: null,
|
locationInstance: null,
|
locationData: null,
|
};
|
},
|
computed: {
|
...mapState(["cesiumInit"]),
|
},
|
mounted() {
|
|
this.$nextTick(function () {
|
let that = this;
|
let option = {
|
fullscreenButton: true,
|
licenseServer: "http://183.162.245.49:18080",
|
minViewHeight: parseFloat(common.minviewheight),
|
// url: SmartEarthRootUrl + "Workers/image/earth.jpg", //不含单张地图图片url则使用在线地图
|
contextOptions: {
|
failIfMajorPerformanceCaveat: false,
|
webgl: {
|
alpha: true,
|
preserveDrawingBuffer: true,
|
},
|
},
|
};
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
Cesium,
|
option,
|
|
null,
|
() => {
|
// sgworld.Navigate.flyToPointsInterest({
|
// destination: Cesium.Cartesian3.fromDegrees(
|
// 116.55341,
|
// 39.72163,
|
// 50000.83
|
// ),
|
// orientation: {
|
// heading: Cesium.Math.toRadians(0),
|
// pitch: Cesium.Math.toRadians(-90),
|
// roll: Cesium.Math.toRadians(0.0)
|
// },
|
// duration: 7 //飞行时间8s
|
// });
|
// sgworld._Viewer.imageryLayers.removeAll();
|
// 先飞到亦庄行政区
|
// setTimeout(() => {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.540659,
|
39.744945,
|
50000
|
),
|
duration: 7, //飞行时间8s
|
});
|
// }, 5000);
|
// setTimeout(() => {
|
// sgworld.Navigate.flyToPointsInterest({
|
// destination: Cesium.Cartesian3.fromDegrees(
|
// 116.502368,
|
// 39.791361,
|
// 6500
|
// ),
|
// duration: 8, //飞行时间8s
|
// });
|
// }, 10000);
|
setTimeout(() => {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: {
|
"x": -2187108.231948378,
|
"y": 4392040.442348233,
|
"z": 4063265.829085007
|
},
|
orientation: {
|
heading: 2.4384163743219607,
|
pitch: -0.32733173444759833,
|
roll: 6.283095595698651,
|
},
|
duration: 10, //飞行时间8s
|
});
|
}, 1000);
|
that.setCesiumInit(true);
|
// rpc.initRpc();
|
}
|
);
|
|
window.Viewer = sgworld._Viewer;
|
|
window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
|
Viewer.shadows = false;
|
//深度检测
|
sgworld.Analysis.depthTestAgainstTerrain(false);
|
Viewer.scene.globe.depthTestAgainstTerrain = false;
|
// window.Viewer.scene.globe.depthTestAgainstTerrain = true
|
//地下模式距离参数
|
Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
|
Viewer.scene.globe.undergroundColor = undefined;
|
rpc.initMessage();
|
rpc.clickToCoordinates();
|
|
//标会编辑
|
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.initLayerOpen();
|
that.setCesuimHandle();
|
// that.showBottom();
|
});
|
let size = this.detectZoom();
|
this.scale = (100 / size).toFixed(2);
|
this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
|
this.size = size + "%";
|
},
|
methods: {
|
...mapMutations(["setCesiumInit"]),
|
setLocation(res) {
|
rpc.setLocation(res)
|
},
|
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;
|
},
|
setCesuimHandle() {
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction((event) => {
|
let nPickFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(nPickFeature)) {
|
if (nPickFeature.primitive instanceof Cesium.Billboard) {
|
if (nPickFeature.id.length > 0) {
|
return;
|
}
|
this.resetImg();
|
window.pickFeature = nPickFeature;
|
imgUrl = nPickFeature.primitive.image;
|
scale = nPickFeature.primitive.scale;
|
nPickFeature.primitive.scale = 0.8;
|
nPickFeature.primitive.image =
|
window.SmartEarthRootUrl + "Workers/image/point.png";
|
//点击弹框
|
let attributes = nPickFeature.id.attributes;
|
if (attributes["SSDW"]) {
|
objdata = {
|
POITYPE: "FWTX",
|
SSDW: attributes["SSDW"],
|
LXR: attributes["LXR"],
|
DIZHI: attributes["DIZHI"],
|
lon: nPickFeature.id.positions[0],
|
lat: nPickFeature.id.positions[1],
|
};
|
}
|
divPoint3 && divPoint3.deleteObject();
|
store.setPoplayerShowAction(false);
|
store.setPoplayerListAction({});
|
store.setPoplayerShowAction(true);
|
store.setPoplayerListAction(objdata);
|
if (window.instance) {
|
window.instance.$destroy();
|
}
|
window.instance = new PoiLayerConstructor({
|
data: {
|
list: objdata,
|
},
|
});
|
window.instance.$mount();
|
|
divPoint3 = window.sgworld.Creator.createDivPoint(
|
"",
|
{
|
lon: objdata.lon,
|
lat: objdata.lat,
|
height: 50,
|
},
|
{
|
type: "custom",
|
offset: ["c", 100],
|
description: window.instance.$el,
|
near: 0,
|
far: 100000,
|
}
|
);
|
return;
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
resetImg() {
|
if (window.pickFeature && window.pickFeature.primitive) {
|
window.pickFeature.primitive.image = imgUrl;
|
window.pickFeature.primitive.scale = scale;
|
window.pickFeature = null;
|
}
|
},
|
},
|
};
|
</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>
|
