<template>
|
<div class="panel">
|
<!-- 球 -->
|
<div id="sdkContainer" @click="clicktoclose"></div>
|
|
<!-- 页面标题 -->
|
<div class="titleBg">
|
<img src="@/assets/img/title/title.png" />
|
</div>
|
<!-- 历史影像 -->
|
<my-history v-if="state.show"></my-history>
|
<!-- 历史影像关闭按钮 -->
|
<div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
|
<img class="searchBtn" src="@/assets/closeinput1.png" />
|
</div>
|
<!-- 右侧导航框 -->
|
<my-navigation-bar></my-navigation-bar>
|
<!-- 搜索框 -->
|
<my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
|
<!-- 右上快捷区域（工程树、空间分析） -->
|
<!-- <div class="right-top">
|
<my-layertree :rightshowzy="childrendata"></my-layertree>
|
</div> -->
|
<!-- 原左下菜单 -->
|
<!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
|
<!-- 左下快捷区域（复位、指北等） -->
|
<my-left-bottom :test="childrendata"></my-left-bottom>
|
<!-- 右下快捷区域（放大缩小） -->
|
<my-right-bottom :test="childrendata"></my-right-bottom>
|
|
<!-- 各种面板 -->
|
<!-- 设置面板 -->
|
<my-setting-panel></my-setting-panel>
|
<!-- 位置面板 -->
|
<my-collection-panel></my-collection-panel>
|
<!-- 指北针面板 -->
|
<my-direction-panel></my-direction-panel>
|
<!-- 新增收藏面板 -->
|
<my-add-collection-panel></my-add-collection-panel>
|
<!-- 窨井、摄像头统计面板 -->
|
<my-statistics-panel></my-statistics-panel>
|
<!-- 窨井统计分析面板 -->
|
<my-manhole-panel></my-manhole-panel>
|
<!-- 摄像头统计分析面板 -->
|
<my-video-panel></my-video-panel>
|
<!-- 图层面板 -->
|
<my-layer-panel></my-layer-panel>
|
<!-- 漫游面板 -->
|
<my-roam-panel></my-roam-panel>
|
<!-- 图层树面板 -->
|
<my-layer-tree-panel></my-layer-tree-panel>
|
<!-- 土地管理弹窗 -->
|
<my-land-admin-info></my-land-admin-info>
|
<my-slider></my-slider>
|
</div>
|
</template>
|
<script>
|
import store from "@/utils/store.js";
|
|
import _GLOBAL from "@/assets/GLOBAL";
|
import { leftClick, loadLayer } from "@/utils/map.js";
|
import leftBottom from "@/components/leftMenu/bottom.vue";
|
import rightBottom from "@/components/rightMenu/bottom.vue";
|
import sousuo from "@/components/leftMenu/sousuo.vue";
|
import menu from "@/components/menu/menu.vue";
|
import NavigationBar from "./rightNavigation/NavigationBar.vue";
|
import layertree from "@/components/rightMenu/layerTree.vue";
|
import settingPanel from "./sideMenu/settingMenu/main.vue";
|
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
|
import directionPanel from "./sideMenu/directionMenu/main.vue";
|
import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
|
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
|
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
|
import videoPanel from "./sideMenu/videoStatistics/main.vue";
|
import layerPanel from "./sideMenu/layerMenu/main.vue";
|
import roamPanel from "./sideMenu/roamPanel/main.vue";
|
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
|
import history from "./poplayer/history.vue";
|
import landAdminInfo from "./poplayer/landAdmin.vue";
|
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
|
import Axios from "axios";
|
|
export default {
|
name: "viewer",
|
components: {
|
"my-sousuo": sousuo,
|
"my-left-bottom": leftBottom,
|
"my-right-bottom": rightBottom,
|
"my-menu": menu,
|
"my-layertree": layertree,
|
"my-navigation-bar": NavigationBar,
|
"my-setting-panel": settingPanel,
|
"my-collection-panel": collectionPanel,
|
"my-direction-panel": directionPanel,
|
"my-add-collection-panel": addCollectionPanel,
|
"my-statistics-panel": statisticsPanel,
|
"my-manhole-panel": manholePanel,
|
"my-video-panel": videoPanel,
|
"my-layer-panel": layerPanel,
|
"my-roam-panel": roamPanel,
|
"my-layer-tree-panel": layerTreePanel,
|
"my-history": history,
|
"my-land-admin-info": landAdminInfo,
|
"my-slider":sliderAlpha
|
},
|
data() {
|
return {
|
date: "",
|
parentItem: {},
|
childrendata: {
|
fwval: true,
|
zbzval: false,
|
qpval: false,
|
zymlval: false,
|
zymlmenu: false,
|
kjcxval: false,
|
dxmsval: false,
|
snmsval: false,
|
ssval: true,
|
zoomval: true,
|
},
|
timer: null,
|
count: 0,
|
state: store.history,
|
};
|
},
|
created() {},
|
mounted() {
|
this.$nextTick(function () {
|
let that = this;
|
let option = {
|
// licenseServer: "http://183.162.245.49:18080",
|
// StaticFileBaseUrl: "../../Mobile/static/CimSDK/",
|
url: "./static/img/cesium/earth.jpg",
|
toolbar: false,
|
// fullscreenButton: true,
|
navigationOption: {
|
enableCompass: false,
|
enableZoomControls: false,
|
enableDistanceLegend: false,
|
enableCompassOuterRing: false,
|
},
|
};
|
|
//EPSG4326
|
// Cesium.ExpandBySmartEarth.Ellipsoid.z = 6356752.3142451793;
|
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
// Cesium,
|
option,
|
// null,
|
function () {
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: Cesium.Cartesian3.fromDegrees(
|
116.52217697339846,
|
39.75979421847914,
|
17045.47005612415
|
),
|
// orientation: {
|
// heading: Cesium.Math.toRadians(0),
|
// pitch: Cesium.Math.toRadians(0),
|
// roll: Cesium.Math.toRadians(0),
|
// },
|
});
|
}
|
);
|
window.Viewer = sgworld._Viewer;
|
Viewer.shadows = false;
|
that.showBottom();
|
window.Viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //相机的高度的最小值
|
// window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 38000; //相机高度的最大值
|
//加载影像
|
// let dtLayer = loadLayer({
|
// id: "C0698021",
|
// sourceType: "arcgis",
|
// name: "航拍影像",
|
// urls: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
// });
|
// _GLOBAL.layers["yxdt"] = [];
|
// _GLOBAL.layers["yxdt"].push(dtLayer);
|
|
window.clusterLayer = new SmartEarth.ClusterLayer(Viewer, {
|
style: "clustering",
|
// size: 18,
|
// fontSize: 12,
|
// fontColor: "rgb(0,0,0)",
|
// pixelRange: 10,
|
});
|
|
window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer);
|
|
leftClick();
|
// this.getQYInfo();
|
//fps
|
// Viewer.scene.debugShowFramesPerSecond = true;
|
//深度检测
|
// sgworld.Analysis.depthTestAgainstTerrain(true);
|
|
// sgworld.Creator.SimpleGraphic.edit(true, {
|
// editProp: true,
|
// editPropData: {
|
// width: "100%",
|
// offset: "b",
|
// shade: 0.3,
|
// success: function (lay, index) {
|
// lay.css({
|
// "border-radius": "13px 13px 0px 0px",
|
// });
|
// lay.find(".layui-layer-title").css({
|
// "background-color": "#fff",
|
// border: "none",
|
// "font-size": "19px",
|
// "font-weight": "bold",
|
// });
|
// },
|
// },
|
// });
|
// sgworld.Creator.SimpleGraphic.setEdit(false);
|
window.layerOpen = function (name, options) {
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
|
var width = options.width;
|
var height = options.height;
|
var offset = options.offset;
|
var fn = options.fn || {};
|
|
//获取相关回调事件
|
var cancelFn = null;
|
var successFn = null;
|
var endFn = null;
|
for (var 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: "title-class",
|
// title:false,
|
type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
|
// shade: options.shade !== undefined ? options.shade : 0.3,
|
shade: 0,
|
shadeClose: false,
|
closeBtn: 1,
|
resize: false,
|
offset: offset,
|
area: [
|
typeof width === "number" ? width + "px" : width,
|
// "100%",
|
typeof height === "number" ? height + "px" : height,
|
],
|
content: options.url,
|
success: function (layero, index) {
|
if (successFn && typeof successFn === "function") {
|
successFn(layero, index);
|
}
|
},
|
cancel: function () {
|
if (cancelFn && typeof cancelFn === "function") {
|
cancelFn();
|
}
|
},
|
end: function () {
|
if (endFn && typeof endFn === "function") {
|
endFn();
|
}
|
},
|
});
|
};
|
|
window._layerOpen = function (name, options) {
|
layuiLayer.close(SmartEarthPopupData._layerProp);
|
|
var width = options.width;
|
var height = options.height;
|
var fn = options.fn || {};
|
|
//获取相关回调事件
|
var cancelFn = null;
|
var successFn = null;
|
var endFn = null;
|
for (var 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,
|
type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
|
shade: options.shade !== undefined ? options.shade : 0.3,
|
shadeClose: true,
|
resize: false,
|
offset: "b",
|
area: [
|
// typeof width === "number" ? width + "px" : width,
|
"100%",
|
typeof height === "number" ? height + "px" : height,
|
],
|
content: options.url,
|
success: function (layero, index) {
|
if (successFn && typeof successFn === "function") {
|
successFn(layero, index);
|
}
|
},
|
cancel: function () {
|
if (cancelFn && typeof cancelFn === "function") {
|
cancelFn();
|
}
|
},
|
end: function () {
|
if (endFn && typeof endFn === "function") {
|
endFn();
|
}
|
},
|
});
|
};
|
});
|
},
|
methods: {
|
clicktoclose() {
|
clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.count++;
|
if (this.count == 2) {
|
// console.log("单击事件");
|
// 关闭所有弹窗
|
//this.$refs.menu.closeall();
|
// 清除定位中的位置标记
|
//this.$refs.menu.clearFlyPoint();
|
} else {
|
// 执行放大操作
|
// console.log("双击");
|
// Viewer.camera.zoomIn();
|
// console.log(window.clickPOI);
|
let p = sgworld.Navigate.getDegrees();
|
// console.log(p);
|
Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
window.clickPOI.lon,
|
window.clickPOI.lat,
|
p.height / 1.8
|
),
|
duration: 1.0,
|
});
|
}
|
this.count = 0;
|
}, 300);
|
this.count++;
|
},
|
datafromchild(data) {
|
for (var i in data) {
|
this.childrendata[i] = data[i];
|
}
|
},
|
closeHistory(val) {
|
store.setHistoryShow(val);
|
},
|
showBottom() {
|
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);
|
// 当cHeight的值改变时，赋值给window中的sdHeight
|
window.sdHeight = this.cHeight;
|
|
//当滑动的距离小于2km，取消聚合
|
// 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);
|
},
|
getQYInfo() {
|
console.log(window.gisBaseUrl);
|
Axios.get(
|
window.gisBaseUrl +
|
"/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
|
).then((res) => {
|
console.log(res);
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.panel,
|
#sdkContainer {
|
width: 100%;
|
height: 100%;
|
background: black;
|
position: absolute !important;
|
}
|
|
.titleBg {
|
position: absolute;
|
left: 0rem;
|
top: 0rem;
|
width: 100%;
|
height: 0.43rem;
|
background-color: #127eff;
|
text-align: center;
|
/* background-image: url("~@/assets/img/title/u2.png") !important;
|
background-repeat: no-repeat;
|
background-size: 100% 100% !important; */
|
}
|
|
.titleBg img {
|
width: 207px;
|
margin-top: 5px;
|
}
|
|
.bottomLeft {
|
display: none;
|
}
|
.colseBtn {
|
position: absolute;
|
z-index: 2;
|
top: 0.55rem;
|
left: 0.2rem;
|
}
|
.colseBtn img {
|
width: 30px;
|
}
|
</style>
|
