<template>
|
<div class="ztfx">
|
<div class="closeBtn">
|
<span>专题应用</span><span class="closeSpan" @click="closeJm">×</span>
|
</div>
|
<hr />
|
<div class="ztfx-tol1">
|
<el-row :gutter="5">
|
<el-col :span="12">
|
<ul>
|
<li @click="tdglHandle">
|
<img class="left-function" src="@/assets/img/left/ztfx/tdgl.png" />
|
<span>土地管理</span>
|
</li>
|
<li @click="stdsj">
|
<img class="left-function" src="@/assets/img/left/ztfx/dashuju.png" />
|
<span>视图大数据平台</span>
|
</li>
|
<li @click="spjkHandle">
|
<img class="left-function" src="@/assets/img/left/ztfx/spjk.png" />
|
<span>视频监控</span>
|
</li>
|
<li @click="jjHandle">
|
<img class="left-function" src="@/assets/img/left/ztfx/jiejing.png" />
|
<span>街景</span>
|
</li>
|
<!-- <li>
|
<img class="left-function" src="@/assets/img/left/ztfx/sjxq.png" />
|
<span>数据详情</span>
|
<el-switch v-model="showPointInfo" active-color="#13ce66" inactive-color="#ff4949" @change="sjxqHandle">
|
</el-switch>
|
</li> -->
|
<!-- <li @click="dlbm">
|
<img class="left-function" src="@/assets/img/left/ztfx/jj.png" />
|
<span>地理编码</span>
|
</li> -->
|
</ul>
|
</el-col>
|
<el-col :span="12">
|
<ul>
|
<!-- <li @click="yqfkHandle">
|
<img
|
class="left-function"
|
src="@/assets/img/left/ztfx/yqfk.png"
|
/>
|
<span>疫情防控</span>
|
</li> -->
|
|
<!-- <li @click="ndlbm">
|
<img class="left-function" src="@/assets/img/left/ztfx/jj.png" />
|
<span>逆地理编码</span>
|
</li> -->
|
</ul>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
/* yhadd */
|
.ztfx-tol1 ul li {
|
color: white;
|
}
|
|
.el-switch {
|
margin: 15px 0px 0px 10px;
|
}
|
|
.fjx {
|
position: static;
|
height: 35%;
|
border-right: 1px solid #dddddd;
|
width: 0px;
|
left: 50%;
|
}
|
|
.closeBtn {
|
color: white;
|
position: relative;
|
height: 21px;
|
line-height: 21px;
|
font-size: 17px;
|
padding-left: 10px;
|
}
|
|
.closeSpan {
|
position: absolute;
|
font-size: 30px;
|
right: 0;
|
color: white;
|
transition: 1s;
|
right: 40px;
|
}
|
|
.closeSpan:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
|
hr {
|
width: 114%;
|
margin: 11px 0;
|
margin-left: -14px;
|
}
|
|
/* yhadd */
|
.ztfx {
|
/* width: 100%;
|
height: 100%; */
|
width: 320px;
|
height: 360px;
|
}
|
|
.left-function {
|
/* margin-top: 8x; */
|
margin-top: 13px;
|
margin-left: 8px;
|
margin-bottom: 8px;
|
cursor: pointer;
|
width: 23px;
|
}
|
|
.ztfx-tol1 {
|
width: 100%;
|
display: inline-block;
|
/* border-right: 1px solid #a0a0a0; */
|
}
|
|
.ztfx-tol1 span {
|
font-size: 16px;
|
margin-top: 13px;
|
margin-left: 10px;
|
display: block;
|
/* width: 85px; */
|
float: right;
|
}
|
|
/* .ztfx-tol2 {
|
margin-top: 10px;
|
width: 185px;
|
display: inline-block;
|
vertical-align: top;
|
} */
|
li {
|
cursor: pointer;
|
/* width: 90%; */
|
display: flex;
|
justify-content: start;
|
}
|
|
.left-ssan {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
cursor: pointer;
|
}
|
|
.active {
|
background: rgba(0, 168, 255, 0.16);
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.26);
|
}
|
|
li:hover {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
</style>
|
|
<script>
|
import axios from "axios";
|
import { mapState, mapMutations } from "vuex";
|
let handler;
|
let pickFeature;
|
let tooltipHTML;
|
let divPoint1;
|
let imgUrl;
|
//交通图层
|
let panoramaLayer;
|
export default {
|
name: "leftkjfx",
|
data() {
|
return {
|
showPointInfo: true
|
};
|
},
|
computed: {
|
...mapState(["viewer1Show", "yqfk", "cesiumInit"])
|
},
|
mounted() { },
|
watch: {
|
cesiumInit: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
if (
|
window._showPointInfo === undefined ||
|
window._showPointInfo === true
|
) {
|
this.showPointInfo = true;
|
setTimeout(() => {
|
//this.setCesuimHandle();
|
}, 1000);
|
} else if (window._showPointInfo === false) {
|
this.showPointInfo = false;
|
}
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
...mapMutations(["setViewer1Show", "setYqfk"]),
|
spjkLoad() {
|
window.sxtkGeojson = new SmartEarth.ClusterLayer(sgworld.Viewer, {
|
pixelRange: 30,
|
gradient: {
|
0.0001: "rgb(0,191,255)",
|
0.001: "rgb(0,128,0)",
|
0.01: "rgb(255,165,0)",
|
0.1: "rgb(255,0,0)"
|
},
|
style: "clustering"
|
});
|
|
window.sxtkGeojson.dataSource.clustering.minimumClusterSize = 5;
|
let url = window.sessionStorage.getItem("sxtGeojsonUrl");
|
axios
|
.get(url)
|
.then(data => {
|
// console.log(data);
|
let features = data.data.features;
|
features.forEach(feature => {
|
let geom = feature.geometry.coordinates;
|
let properties = feature.properties;
|
let point = new SmartEarth.Degrees(geom[0], geom[1]);
|
// let item = {
|
// lon
|
// };
|
|
let entitie = window.sxtkGeojson.add(point, {
|
image: SmartEarthRootUrl + "Workers/image/sxt.png"
|
});
|
entitie.properties = properties;
|
entitie.tag = "sxt";
|
});
|
|
sgworld.Navigate.flyToObj(window.sxtkGeojson.dataSource);
|
window.sxthandler = new Cesium.ScreenSpaceEventHandler(
|
sgworld.Viewer.scene.canvas
|
);
|
window.sxthandler.setInputAction(event => {
|
let pick = sgworld.Viewer.scene.pick(event.position);
|
//debugger;
|
if (pick && pick.id && pick.id.tag == "sxt") {
|
//结束之前操作
|
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler &&
|
sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
const props = pick.id.properties;
|
let screenHeight =
|
document.body.clientHeight ||
|
document.documentElement.clientHeigh;
|
let offsetTop = screenHeight - 385;
|
offsetTop = offsetTop < 0 ? 0 : offsetTop;
|
|
offsetTop = offsetTop > 100 ? offsetTop - 100 : offsetTop;
|
// console.log(props.installPla._value)
|
layerOpen(props.name._value, {
|
width: 470,
|
height: 385,
|
offset: [offsetTop + "px", "100px"],
|
url:
|
"./static/html/video/video.html?code=" +
|
props.cameraInde._value,
|
fn: {
|
success: (layero, index) => {
|
SmartEarthPopupData.layerContainer = layero;
|
},
|
end: () => {
|
this.isOpen.ymfx = false;
|
},
|
cancel: () => {
|
sgworld.drawObj &&
|
sgworld.drawObj.end &&
|
sgworld.drawObj.end("cancel");
|
}
|
}
|
});
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
},
|
spjkHandle() {
|
if (window.sxtkGeojson) {
|
window.sxtkGeojson.deleteObject();
|
window.sxtkGeojson = null;
|
window.sxthandler.destroy();
|
return;
|
} else {
|
this.spjkLoad();
|
}
|
},
|
yqfkHandle() {
|
this.setYqfk(!this.yqfk);
|
},
|
tdglHandle() {
|
this.setViewer1Show(!this.viewer1Show);
|
},
|
jjHandle() {
|
if (!window.panoramaHandler) {
|
var urls = "http://10.10.4.116:8070/gisserver/wmsserver/YZ_LW";
|
// panoramaLayer = sgworld.Creator.createImageryProvider(
|
// "gisserver",
|
// "wms",
|
// {
|
// url: urls,
|
// layers: "",
|
// parameters: {
|
// format: "image/png",
|
// transparent: true
|
// }
|
// },
|
// "0",
|
// undefined,
|
// true,
|
// ""
|
// );
|
window.panoramaLayer = sgworld.Creator.CreateWMSImageFeatureLayer(
|
"gisserver",
|
{
|
url: urls,
|
queryParameters: {
|
layers: ""
|
}
|
},
|
{},
|
"0",
|
true,
|
function () { }
|
);
|
window.panoramaHandler = new Cesium.ScreenSpaceEventHandler(
|
Viewer.scene.canvas
|
);
|
window.panoramaHandler.setInputAction(event => {
|
let p;
|
p = sgworld.Navigate.getMouseDegrees(event);
|
let panorama = new yzPanorama();
|
panorama.open({
|
id: "qjMap",
|
closeId: "panoramaClose",
|
lng: p.lon,
|
lat: p.lat
|
});
|
|
// let StreetUrl = "http://10.10.4.116:8085/yzAdapter/";
|
// let _StreetscapeYZ = new StreetscapeYZ(sgworld, {
|
// StreetUrl: StreetUrl,
|
// lon: p.lon,
|
// lat: p.lat
|
// });
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
try {
|
window.panoramaLayer.deleteObject();
|
} catch (e) { }
|
window.panoramaHandler.destroy();
|
window.panoramaHandler = undefined;
|
}
|
},
|
sjxqHandle() {
|
window._showPointInfo = this.showPointInfo;
|
|
switch (this.showPointInfo) {
|
case true:
|
this.setCesuimHandle();
|
break;
|
case false:
|
if (divPoint1) {
|
sgworld.Creator.DeleteObject(divPoint1);
|
}
|
if (handler) {
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
break;
|
}
|
},
|
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 (pickFeature && pickFeature.primitive) {
|
pickFeature.primitive.image = imgUrl;
|
pickFeature = null
|
}
|
pickFeature = nPickFeature;
|
imgUrl = nPickFeature.primitive.image;
|
nPickFeature.primitive.image = window.SmartEarthRootUrl + "Workers/image/point.png";
|
// console.log(nPickFeature);
|
this.$store.commit("description", nPickFeature.id.attributes);
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
dlbm() {
|
this.$store.commit("ReGeoCode", false);
|
this.$store.commit("GeoCode", true);
|
},
|
ndlbm() {
|
this.$store.commit("GeoCode", false);
|
this.$store.commit("ReGeoCode", true);
|
},
|
stdsj() {
|
window.open(
|
"http://10.9.2.29:8080/#/login?token=1ed14c5157acb8088efe65bc93a032c3"
|
);
|
},
|
closeJm() {
|
this.$parent.$parent.$parent.isShowSpeAnalyse = false;
|
},
|
resetImg() {
|
if (pickFeature && pickFeature.primitive) {
|
pickFeature.primitive.image = imgUrl;
|
pickFeature = null
|
}
|
}
|
}
|
};
|
</script>
|
