<template>
|
<div class="menustrip">
|
<div class="features" @click="showlyc">
|
<div class="icon_box">
|
<i class="el-icon-question"></i>
|
</div>
|
<div>图层控制</div>
|
</div>
|
<div class="features">
|
<div class="icon_box">
|
<i class="el-icon-question"></i>
|
</div>
|
<div title="点击选中对象，显示属性信息">查询</div>
|
<div class="featuresitem">
|
<el-collapse v-model="activeNames">
|
<a @click="testws()">人员模拟</a>
|
<a @click="loadGif()">gif模拟1</a>
|
<!-- <a @click="modelHighlight('F2101')">变色</a> -->
|
<!-- <a @click="modelHighlight('T2103')">变色</a> -->
|
<!-- <a @click="showgif()">gif模拟2</a> -->
|
<!-- <a @click="showView()">视角</a>
|
<a @click="kaishi()">开始</a>
|
<a @click="guanbi()">关闭</a>
|
<a @click="jieshou()">接收</a> -->
|
<a @click="testAlert()">报警点</a>
|
<el-collapse-item title="模型分区加载" name="1">
|
<el-switch
|
v-model="tooltip.addModel"
|
active-text="开"
|
inactive-text="关"
|
@change="addModel"
|
>
|
</el-switch>
|
</el-collapse-item>
|
|
<a @click="showInfo()">数据展示</a>
|
<el-collapse-item title="数据联动" name="2">
|
<el-switch
|
v-model="tooltip.tooltip"
|
active-text="开"
|
inactive-text="关"
|
@change="dataLinkage"
|
>
|
</el-switch>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
<div class="features">
|
<div class="icon_box">
|
<i class="el-icon-question"></i>
|
</div>
|
<div title="对于图层数据进行管理">数据管理</div>
|
<div class="featuresitem">
|
<el-collapse v-model="activeNames" accordion>
|
<el-collapse-item title="添加数据" name="3">
|
<a @click="addPointEntity">添加点位数据</a>
|
<a @click="addPolygonEntity">添加区域数据</a>
|
</el-collapse-item>
|
<el-collapse-item title="修改数据" name="6">
|
<a @click="updateEntity('point')">修改点位数据</a>
|
<a @click="updateEntity('operation_area')">修改作业区</a>
|
<a @click="updateEntity('production_unit_area')">修改功能区</a>
|
<a @click="updateEntity('production_area')">修改厂区</a>
|
<a @click="closeUpdata()">关闭修改</a>
|
</el-collapse-item>
|
<el-collapse-item title="删除数据" name="7">
|
<a @click="delEntity('point')">删除点位数据</a>
|
<a @click="delEntity('operation_area')">删除作业区</a>
|
<a @click="delEntity('production_unit_area')">删除功能区</a>
|
<a @click="delEntity('production_area')">删除厂区</a>
|
<a @click="closeUpdata()">关闭删除</a>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
<div class="features">
|
<div class="icon_box">
|
<i class="el-icon-s-marketing"></i>
|
</div>
|
<div>分析工具</div>
|
<div class="featuresitem">
|
<el-collapse v-model="activeNames">
|
<el-collapse-item title="通视分析" name="4">
|
<div style="margin-bottom: 10px">
|
<el-button
|
@click="visibility('default')"
|
style="width: 100%"
|
plain
|
size="mini"
|
>通视分析</el-button
|
>
|
</div>
|
<div>
|
<el-button
|
@click="visiClear"
|
style="width: 100%"
|
plain
|
size="mini"
|
>清除</el-button
|
>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="缓冲区分析" name="5">
|
<div style="margin-bottom: 10px">
|
<el-button
|
@click="showBuffer"
|
style="width: 100%"
|
plain
|
size="mini"
|
>开启</el-button
|
>
|
</div>
|
<div style="margin-bottom: 10px">
|
<el-button
|
@click="hiddenBuffer"
|
style="width: 100%"
|
plain
|
size="mini"
|
>关闭</el-button
|
>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
<div class="features">
|
<div class="icon_box">
|
<i class="el-icon-menu"></i>
|
</div>
|
<div>空间量测</div>
|
<div class="featuresitem measure">
|
<a @click="jl()">距离测量</a>
|
<a @click="height()">高度测量</a>
|
<a @click="mj()">面积测量</a>
|
<a @click="bmjl()">表面距离</a>
|
<a @click="bmmj()">表面面积</a>
|
<a @click="clearMeasure()">清除</a>
|
</div>
|
</div>
|
<div class="features">
|
<div class="icon_box">
|
<i class="el-icon-s-promotion"></i>
|
</div>
|
<div>三维漫游</div>
|
<div class="featuresitem">
|
<a @click="setPointFly">定点绕飞</a>
|
<a @click="drawPath">地面漫游</a>
|
</div>
|
</div>
|
<div class="features" @click="showBindbox">
|
<div class="icon_box">
|
<i class="el-icon-s-tools"></i>
|
</div>
|
<div>模型维护</div>
|
</div>
|
<div v-show="ShowLyr" class="layerControl">
|
<layer-control
|
ref="layercontrol"
|
:keyString="`id`"
|
@closeLyr="lyrCloseData"
|
></layer-control>
|
</div>
|
<!-- 联动结果 -->
|
<div class="list" v-show="showSearchRes">
|
<div class="closeBtn" @click="closeData">
|
<i class="el-icon-close"></i>
|
</div>
|
<div class="listBox">
|
<ul v-if="personSearchRes.length != 0">
|
<li v-for="item in personSearchRes" :key="item.index">
|
<p>人员</p>
|
<p>id：{{ item.id }}</p>
|
<p>姓名：{{ item.name }}</p>
|
</li>
|
<el-divider></el-divider>
|
</ul>
|
<ul v-if="cameraSearchRes.length != 0">
|
<li v-for="item in cameraSearchRes" :key="item.index">
|
<p>视频监控</p>
|
<p>id：{{ item.properties.point_id }}</p>
|
<p>名称：{{ item.properties.point_name }}</p>
|
</li>
|
<el-divider></el-divider>
|
</ul>
|
<ul v-if="alarmSearchRes.length != 0">
|
<li v-for="item in alarmSearchRes" :key="item.index">
|
<p>报警监控</p>
|
<p>id：{{ item.properties.point_id }}</p>
|
<p>名称：{{ item.properties.point_name }}</p>
|
</li>
|
</ul>
|
<ul v-if="areaSearchRes.length != 0">
|
<el-divider></el-divider>
|
<li v-for="item in areaSearchRes" :key="item.index">
|
<p>作业区</p>
|
<p>
|
id：{{
|
item.properties.ope_id == " "
|
? "未填写ID"
|
: item.properties.ope_id
|
}}
|
</p>
|
<p>
|
名称：{{
|
item.properties.ope_name == " "
|
? "未填写名称"
|
: item.properties.ope_name
|
}}
|
</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 缓冲区 -->
|
<div class="funcBox layui-form" v-show="showBuffBox">
|
<div class="layui-form-item">
|
<label class="layui-form-label">缓冲范围</label>
|
<div class="layui-input-block">
|
<input
|
type="number"
|
id="buff"
|
placeholder="请输入缓冲范围(m)"
|
value="100"
|
class="layui-input"
|
/>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<button id="btn1" class="layui-btn" @click="add1()">点</button>
|
<button id="btn1" class="layui-btn" @click="add2()">线</button>
|
<button id="btn1" class="layui-btn" @click="add3()">面</button>
|
<button id="btn2" class="layui-btn" @click="clear1()">清除</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
var buffRadius = 100;
|
|
let measureData = [];
|
let colorAll = {
|
point: Cesium.Color.fromCssColorString("#ff0000"),
|
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
|
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
|
};
|
let lineOfSight = [];
|
let buff;
|
let handler;
|
let personWs;
|
let itemLabel;
|
let circlePosition = [];
|
let circle = [];
|
let dataLinkArea;
|
var perMap = new Map();
|
let delwfs;
|
let updateArea;
|
let OIPpoint; //巡检点
|
let OIParray = []; //巡检点集合
|
let getHistoryLine = null;
|
var selected = [];
|
|
import {
|
queryData,
|
queryPOI,
|
queryMainByModelId,
|
queryDeviceByModelId,
|
queryMainById,
|
queryDeviceById,
|
} from "../../../api/api";
|
|
import layerControl from "./layerControl.vue";
|
import * as turf from "@turf/turf";
|
import { mapState, mapMutations } from "vuex";
|
import $ from "jquery";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { layerControl },
|
data() {
|
//这里存放数据
|
return {
|
showBuffBox: false,
|
radio: "1",
|
showVideo: false,
|
url1: "",
|
url2: "",
|
tooltip: {
|
addModel: false,
|
tooltip: false,
|
},
|
showSearchRes: false,
|
ShowLyr: false,
|
activeNames: [],
|
buffRadius: 100,
|
coordinates: [],
|
showBindBox: false,
|
personSearchRes: [],
|
cameraSearchRes: [],
|
alarmSearchRes: [],
|
areaSearchRes: [],
|
historyTrack: {
|
name: "",
|
id: null,
|
beginTime: "",
|
endTime: "",
|
},
|
timepickvalue: "",
|
itemData: {
|
type: "",
|
positions: [],
|
fillcolor: [0, 1, 0],
|
fillalpha: 0.6,
|
isborder: true,
|
bordercolor: [1, 1, 1],
|
borderalpha: 0.6,
|
bordersize: 0,
|
linewidth: 3,
|
text: "",
|
fontszie: "",
|
fonstscale: "",
|
isbackground: false,
|
backcolor: "",
|
backalpha: "",
|
image: "",
|
imagescale: "",
|
},
|
element: {},
|
personList: [],
|
timePickBox: false,
|
showhistory: false,
|
timer: null,
|
colorTimer: null,
|
};
|
},
|
//方法集合
|
methods: {
|
...mapMutations([
|
"UPDATE_layer_STATE",
|
"UPDATE_restore_STATE",
|
"UPDATE_RULES_STATE",
|
]),
|
|
modelHighlight(name) {
|
if (this.$store.state.modelArr) {
|
for (const value of this.$store.state.modelArr.values()) {
|
value.color = Cesium.Color.WHITE;
|
}
|
if (name !== "") {
|
let res = this.$store.state.modelArr.get(name);
|
if (res) {
|
clearInterval(this.colorTimer);
|
this.colorTimer = null;
|
res.color = Cesium.Color.RED.withAlpha(0.8);
|
setTimeout(() => {
|
res.color = Cesium.Color.WHITE;
|
}, 1000);
|
this.colorTimer = setInterval(() => {
|
res.color = Cesium.Color.RED.withAlpha(0.8);
|
setTimeout(() => {
|
res.color = Cesium.Color.WHITE;
|
}, 1000);
|
}, 2000);
|
} else {
|
alert("未能查找到模型");
|
}
|
} else {
|
clearInterval(this.colorTimer);
|
this.colorTimer = null;
|
}
|
} else {
|
alert("模型未加载");
|
}
|
},
|
|
loadGif() {
|
let url = SmartEarthRootUrl + "Workers/image/icon/gif.gif";
|
let gifDiv = document.createElement("div");
|
let gifImg = document.createElement("img");
|
|
// gif库需要img标签配置下面两个属性
|
gifImg.setAttribute("rel:animated_src", url);
|
gifImg.setAttribute("rel:auto_play", "1"); // 设置自动播放属性
|
gifDiv.appendChild(gifImg);
|
|
let superGif = new SuperGif({
|
gif: gifImg,
|
});
|
superGif.load(function () {
|
sgworld.Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(124.1864, 41.9207),
|
billboard: {
|
image: new Cesium.CallbackProperty(() => {
|
// 转成base64,直接加canvas理论上是可以的，这里设置有问题
|
return superGif.get_canvas().toDataURL();
|
}, false),
|
scale: 0.25,
|
},
|
});
|
});
|
},
|
// showgif() {
|
// var entitys = sgworld.Viewer.entities.add({
|
// position: Cesium.Cartesian3.fromDegrees(124.038021579, 41.834725327, 0),
|
// billboard: {
|
// image: new Cesium.GifImageProperty({
|
// url: "SmartEarthSDK/Workers/image/icon/gif.gif",
|
// }),
|
// width: 30,
|
// height: 30,
|
// },
|
// });
|
// let flyParam = {
|
// offset: {
|
// heading: 0,
|
// pitch: -45,
|
// range: 1000,
|
// },
|
// duration: 3,
|
// };
|
// sgworld.Viewer.flyTo(entitys, flyParam);
|
// },
|
// 【图层控制】
|
showlyc() {
|
this.ShowLyr = !this.ShowLyr;
|
},
|
// 【图层控制】
|
lyrCloseData(e) {
|
this.ShowLyr = e;
|
},
|
kaishi() {
|
this.timer = setInterval(() => {
|
perMap.clear();
|
this.$store.commit("UPDATE_Person_STATE", []);
|
console.log(1);
|
}, 5000);
|
},
|
guanbi() {
|
console.log(2);
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
jieshou() {
|
var position = turf.randomPosition([
|
124.038021579, 41.834725327, 124.037885321, 41.833602475, 124.036917583,
|
41.833656046, 124.037041621, 41.834755012, 124.037502208, 41.834748337,
|
124.038021579, 41.834725327,
|
]);
|
let id = Math.floor(Math.random() * 3);
|
let send = {
|
data: {
|
longitude: position[0],
|
latitude: position[1],
|
locationType: 1,
|
buildId: "204001",
|
labelMac: "1918FF021521",
|
type: `${id + 1}`,
|
floorNo: "Floor1",
|
subType: 1,
|
id,
|
name: "刘纯玉" + id,
|
position: '{"x":-280.22895488218535,"y":0.0,"z":862.3133713949993}',
|
time: "2022-08-12T10:50:36.393",
|
status: 0,
|
},
|
mid: 16602731975482544,
|
topic: "REAL_TIME_POSITION",
|
};
|
//收到消息
|
let res = { data: JSON.stringify(send) };
|
//定位数据
|
let data = JSON.parse(res.data);
|
let personobj = data.data;
|
perMap.set(personobj.id, personobj);
|
let arr = [];
|
for (const value of perMap.values()) {
|
arr.push(value);
|
}
|
let that = this;
|
that.$store.commit("UPDATE_Person_STATE", arr);
|
// console.log(perMap);
|
// console.log(arr);
|
},
|
|
// connectWS() {
|
// let that = this;
|
// const socket = new WebSocket(
|
// "ws://1.1.2.100:7800/safe/subscribe/20220812102901"
|
// );
|
// let heartbeat = null;
|
// socket.onopen = () => {
|
// console.log("连接成功");
|
// this.timer = setInterval(() => {
|
// perMap.clear();
|
// this.$store.commit("UPDATE_Person_STATE", []);
|
// }, 5000);
|
// // 进行人员定位信息订阅
|
// socket.send(
|
// JSON.stringify({
|
// type: 1,
|
// topic: "REAL_TIME_POSITION",
|
// })
|
// );
|
// // 因为是通过Nginx代理，需要隔一段时间进行一次心跳连接
|
// heartbeat = setInterval(() => {
|
// socket.send("HEARTBEAT");
|
// }, 30 * 1000);
|
// };
|
// socket.onmessage = (res) => {
|
// // console.log("定位数据：", res.data);
|
// let data = JSON.parse(res.data);
|
// let personobj = data.data;
|
// perMap.set(personobj.id, personobj);
|
// let arr = [];
|
// for (const value of perMap.values()) {
|
// arr.push(value);
|
// }
|
// console.log("数组", arr);
|
// that.$store.commit("UPDATE_Person_STATE", arr);
|
// };
|
|
// socket.onclose = () => {
|
// console.log("Socket连接已断开，3秒后重连...");
|
// if (heartbeat) {
|
// heartbeat = clearInterval(heartbeat);
|
// }
|
// setTimeout(that.connectWS, 3000);
|
// };
|
// socket.onerror = (e) => {
|
// console.error("Socket连接错误:", e);
|
// };
|
// },
|
// 接收ws人员
|
getwsdata() {
|
let that = this;
|
// var ws = new WebSocket("ws://82.157.123.54:9010/ajaxchattest");
|
var ws = new WebSocket("ws://1.1.2.100:7304/safe/position");
|
ws.onopen = function () {
|
that.timer = setInterval(() => {
|
perMap.clear();
|
that.$store.commit("UPDATE_Person_STATE", []);
|
}, 5000);
|
|
// setInterval(() => {
|
// var position = turf.randomPosition([
|
// 124.038021579, 41.834725327, 124.037885321, 41.833602475,
|
// 124.036917583, 41.833656046, 124.037041621, 41.834755012,
|
// 124.037502208, 41.834748337, 124.038021579, 41.834725327,
|
// ]);
|
// let id = Math.floor(Math.random() * 3);
|
// let data = {
|
// longitude: position[0],
|
// latitude: position[1],
|
// locationType: 1,
|
// buildId: "204001",
|
// labelMac: "1918FF021521",
|
// type: `${id + 1}`,
|
// floorNo: "Floor1",
|
// subType: 1,
|
// id,
|
// name: "" + id,
|
// position: '{"x":-280.22895488218535,"y":0.0,"z":862.3133713949993}',
|
// time: "2022-08-12T10:50:36.393",
|
// status: 0,
|
// };
|
// ws.send(JSON.stringify(data));
|
// }, 500);
|
};
|
ws.onmessage = function (res) {
|
// let data = JSON.parse(res.data);
|
// let personobj = data.data;
|
// let personobj = JSON.parse(res.data.split("[<")[0]);
|
let personobj = JSON.parse(res.data);
|
perMap.set(personobj.id, personobj);
|
let arr = [];
|
for (const value of perMap.values()) {
|
arr.push(value);
|
}
|
// console.log("人员数组", arr);
|
that.$store.commit("UPDATE_Person_STATE", arr);
|
};
|
ws.onclose = function () {};
|
ws.onerror = function (error) {
|
// console.log(error);
|
};
|
},
|
// 接收ws人员
|
//#region
|
// getwsdata() {
|
// let that = this;
|
// var ws = new WebSocket("ws://1.1.2.100:7304/safe/position");
|
// ws.onopen = function () {
|
// // this.timer = setInterval(() => {
|
// // perMap.clear();
|
// // }, 10000);
|
// setTimeout(() => {
|
// ws.close();
|
// }, 5000);
|
// };
|
// ws.onmessage = function (res) {
|
|
// let personobj = JSON.parse(res.data);
|
// // 将该条信息存入map
|
// perMap.set(personobj.id, personobj);
|
// // 将整个map传出去
|
// // let arr = [];
|
// // if (perMap.size == 0) {
|
// // that.$store.commit("UPDATE_Person_STATE", []);
|
// // } else {
|
// // for (const value of perMap.values()) {
|
// // arr.push(value);
|
// // }
|
// // that.$store.commit("UPDATE_Person_STATE", arr);
|
// // }
|
// };
|
// ws.onclose = function () {
|
// // console.log("ws已关闭");
|
// //接收的人员数组arr 存到 state
|
// let arr = [];
|
// if (perMap.size == 0) {
|
// that.$store.commit("UPDATE_Person_STATE", []);
|
// } else {
|
// for (const value of perMap.values()) {
|
// arr.push(value);
|
// }
|
// that.$store.commit("UPDATE_Person_STATE", arr);
|
// }
|
// perMap.clear();
|
// that.getwsdata();
|
// };
|
// ws.onerror = function (error) {
|
// console.log(error);
|
// };
|
// },
|
//#endregion
|
//【模型区域加载】
|
addModel(val) {
|
if (val) {
|
let sgwfs = new SmartEarth.WFSTool(Viewer);
|
dataLinkArea = sgwfs.CreateWfs("polygon", {
|
urls: BASE_URL + "/wfsserver/fssh_map_wfs?",
|
layer: "production_unit_area",
|
color: "#ff0",
|
alpha: 0.1,
|
extrudedHeight: 0.01, // 拉伸高度，无拉伸高度则为贴地面
|
});
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction((event) => {
|
const pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pickedFeature)) {
|
if (pickedFeature.primitive instanceof Cesium.Primitive) {
|
if (pickedFeature.id.fid.indexOf("production_unit_area") !== -1) {
|
let value = pickedFeature.id.attributes.model_name;
|
if (value !== undefined) {
|
let arr = value.split(",");
|
this.UPDATE_layer_STATE(arr);
|
} else {
|
layer.msg("该区域没有模型");
|
}
|
}
|
}
|
} else {
|
layer.msg("未选中区域");
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
layer.msg("已关闭模型加载");
|
if (dataLinkArea) {
|
dataLinkArea.destroy();
|
dataLinkArea = undefined;
|
}
|
if (handler) {
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
}
|
},
|
//【数据展示（点击显示ID）】
|
showInfo(params) {
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
let pickedFeature;
|
handler.setInputAction((event) => {
|
pickedFeature && (pickedFeature.color = Cesium.Color.WHITE);
|
pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pickedFeature)) {
|
console.log(pickedFeature);
|
if (pickedFeature.primitive instanceof Cesium.Cesium3DTileset) {
|
if (pickedFeature && pickedFeature.getProperty) {
|
pickedFeature.color = Cesium.Color.RED.withAlpha(0.8);
|
let value = pickedFeature.getProperty("name");
|
let cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
|
pickedFeature.content.tile.boundingSphere.center
|
);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
let poi = [lng, lat];
|
this.senderLayerMassage("Cesium3DTileset", value, poi);
|
}
|
} else if (pickedFeature.primitive instanceof Cesium.Billboard) {
|
if (pickedFeature.id instanceof Cesium.Entity) {
|
//点击传入的巡检点
|
if (
|
pickedFeature.id.properties.featureType &&
|
pickedFeature.id.properties.featureType._value ==
|
"onsite_inspection_point"
|
) {
|
this.senderLayerMassage(
|
pickedFeature.id.properties.properties._value.point_type,
|
pickedFeature.id.properties.properties._value.point_id,
|
pickedFeature.id.properties.geometry._value.coordinates
|
);
|
} else if (pickedFeature.id.properties.labelMac) {
|
let msg = {
|
funName: "userJson",
|
data: [
|
{
|
point_type: "person",
|
userInfo: {
|
buildId: pickedFeature.id.properties.buildId._value,
|
floorNo: pickedFeature.id.properties.floorNo._value,
|
id: pickedFeature.id.properties.id._value,
|
labelMac: pickedFeature.id.properties.labelMac._value,
|
latitude: pickedFeature.id.properties.latitude._value,
|
locationType:
|
pickedFeature.id.properties.locationType._value,
|
longitude: pickedFeature.id.properties.longitude._value,
|
name: pickedFeature.id.properties.name._value,
|
position: pickedFeature.id.properties.position._value,
|
status: pickedFeature.id.properties.status._value,
|
subType: pickedFeature.id.properties.subType._value,
|
time: pickedFeature.id.properties.time._value,
|
type: pickedFeature.id.properties.type._value,
|
},
|
},
|
],
|
};
|
window.parent.postMessage(msg, "*");
|
}
|
} else {
|
if (pickedFeature.id.fid.indexOf("camera_point") !== -1) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (pickedFeature.id.fid.indexOf("alarm_point") !== -1) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("toxic_gas_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("entrance_guard_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("major_hazards_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("emergency_supplies_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("evacuation_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("onsite_Inspection_point") !== -1
|
) {
|
let poi = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
this.senderLayerMassage(
|
pickedFeature.id.attributes.point_type,
|
pickedFeature.id.attributes.point_id,
|
poi
|
);
|
}
|
}
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
//【数据展示结果 postmessage】
|
senderLayerMassage(point_type, point_id, poi) {
|
let msg = {
|
funName: "showInfo",
|
data: {
|
point_type,
|
point_id,
|
poi,
|
},
|
};
|
window.parent.postMessage(msg, "*");
|
},
|
//【数据联动（本系统）】
|
dataLinkage(val) {
|
if (val) {
|
let sgwfs = new SmartEarth.WFSTool(Viewer);
|
dataLinkArea = sgwfs.CreateWfs("polygon", {
|
urls: BASE_URL + "/wfsserver/fssh_map_wfs",
|
layer: "production_unit_area",
|
color: "#fff",
|
alpha: 0.1,
|
extrudedHeight: 0.01, // 拉伸高度，无拉伸高度则为贴地面
|
});
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
let pickedFeature;
|
handler.setInputAction((event) => {
|
pickedFeature && (pickedFeature.color = Cesium.Color.WHITE);
|
pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
//判断点击类型
|
if (Cesium.defined(pickedFeature)) {
|
this.personSearchRes = [];
|
this.cameraSearchRes = [];
|
this.alarmSearchRes = [];
|
this.areaSearchRes = [];
|
//【区域---查询人员】
|
if (pickedFeature.primitive instanceof Cesium.Primitive) {
|
this.personSearchRes = [];
|
this.cameraSearchRes = [];
|
this.alarmSearchRes = [];
|
this.areaSearchRes = [];
|
//1.获取区域
|
let searchArea = pickedFeature.id.positions[0].filter(
|
(item) => item !== 0
|
);
|
let poly = turf.polygon([spArr(searchArea, 2)]);
|
//2.获取人员数据
|
personWs = this.$store.state.personState;
|
//3.返回结果
|
let perSearch = [];
|
if (personWs.length != 0) {
|
personWs.forEach((e) => {
|
let pt = [e.longitude, e.latitude];
|
if (turf.booleanPointInPolygon(pt, poly)) {
|
perSearch.push(e);
|
}
|
});
|
this.personSearchRes = perSearch;
|
} else {
|
this.personSearchRes = [];
|
}
|
this.showSearchRes = true;
|
} else if (
|
//【模型---视频+报警】
|
pickedFeature.primitive instanceof Cesium.Cesium3DTileset
|
) {
|
pickedFeature.color = Cesium.Color.RED.withAlpha(0.8);
|
let cartographic =
|
window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
|
pickedFeature.content.tile.boundingSphere.center
|
);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
this.$prompt("请输入查询范围：如50（默认单位m）", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(({ value }) => {
|
this.personSearchRes = [];
|
this.cameraSearchRes = [];
|
this.alarmSearchRes = [];
|
this.areaSearchRes = [];
|
let center = [lng, lat];
|
let radius = value / 1000;
|
let options = {
|
steps: 32,
|
units: "kilometers",
|
properties: { foo: "bar" },
|
};
|
let circle = turf.circle(center, radius, options);
|
let searchArea =
|
circle.geometry.coordinates[0].flat(Infinity);
|
let searchArr = searchArea.join("+");
|
Promise.all([
|
queryData("camera_point", searchArr),
|
queryData("alarm_point", searchArr),
|
])
|
.then((res) => {
|
this.cameraSearchRes = res[0].data.features;
|
this.alarmSearchRes = res[1].data.features;
|
this.showSearchRes = true;
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
} else if (pickedFeature.primitive instanceof Cesium.Billboard) {
|
if (
|
//【人员---人员+视频+报警】
|
pickedFeature.id instanceof Cesium.Entity
|
) {
|
this.$prompt("请输入查询范围：如50（默认单位m）", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(({ value }) => {
|
this.personSearchRes = [];
|
this.cameraSearchRes = [];
|
this.alarmSearchRes = [];
|
this.areaSearchRes = [];
|
let center = [
|
pickedFeature.id.properties.longitude._value,
|
pickedFeature.id.properties.latitude._value,
|
];
|
let radius = value / 1000;
|
let options = {
|
steps: 32,
|
units: "kilometers",
|
properties: { foo: "bar" },
|
};
|
let circle = turf.circle(center, radius, options);
|
//2.获取人员数据
|
personWs = this.$store.state.personState;
|
//3.返回人员结果
|
let perSearch = [];
|
if (personWs.length != 0) {
|
personWs.forEach((e) => {
|
let pt = [e.longitude, e.latitude];
|
if (turf.booleanPointInPolygon(pt, circle)) {
|
perSearch.push(e);
|
}
|
});
|
this.personSearchRes = perSearch;
|
} else {
|
this.personSearchRes = [];
|
}
|
//4.返回视频和报警结果
|
let searchArea =
|
circle.geometry.coordinates[0].flat(Infinity);
|
let searchArr = searchArea.join("+");
|
Promise.all([
|
queryData("camera_point", searchArr),
|
queryData("alarm_point", searchArr),
|
])
|
.then((res) => {
|
this.cameraSearchRes = res[0].data.features;
|
this.alarmSearchRes = res[1].data.features;
|
this.showSearchRes = true;
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
}
|
//【报警---人员+视频+作业区】
|
else {
|
if (pickedFeature.id.fid.indexOf("alarm_point") !== -1) {
|
this.$prompt("请输入查询范围：如50（默认单位m）", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(({ value }) => {
|
this.personSearchRes = [];
|
this.cameraSearchRes = [];
|
this.alarmSearchRes = [];
|
this.areaSearchRes = [];
|
let center = [
|
pickedFeature.id.positions[0],
|
pickedFeature.id.positions[1],
|
];
|
let radius = value / 1000;
|
let options = {
|
steps: 32,
|
units: "kilometers",
|
properties: { foo: "bar" },
|
};
|
let circle = turf.circle(center, radius, options);
|
//2.获取人员数据
|
personWs = this.$store.state.personState;
|
//3.返回人员结果
|
let perSearch = [];
|
if (personWs.length != 0) {
|
personWs.forEach((e) => {
|
let pt = [e.longitude, e.latitude];
|
if (turf.booleanPointInPolygon(pt, circle)) {
|
perSearch.push(e);
|
}
|
});
|
this.personSearchRes = perSearch;
|
} else {
|
this.personSearchRes = [];
|
}
|
//4.返回视频和区域结果
|
let searchArea =
|
circle.geometry.coordinates[0].flat(Infinity);
|
let searchArr = searchArea.join("+");
|
Promise.all([
|
queryData("camera_point", searchArr),
|
queryData("operation_area", searchArr),
|
])
|
.then((res) => {
|
this.cameraSearchRes = res[0].data.features;
|
this.areaSearchRes = res[1].data.features;
|
this.showSearchRes = true;
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
}
|
}
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
if (dataLinkArea) {
|
dataLinkArea.destroy();
|
dataLinkArea = undefined;
|
}
|
if (handler) {
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
}
|
},
|
//【数据联动（本系统）】关闭结果界面
|
closeData() {
|
this.showSearchRes = false;
|
},
|
//【数据联动（postMessage对接）】
|
dataLink(data) {
|
//1.生成范围面
|
let center = [data.poi[0], data.poi[1]];
|
let radius = data.r / 1000;
|
let options = {
|
steps: 32,
|
units: "kilometers",
|
properties: { foo: "bar" },
|
};
|
let circle = turf.circle(center, radius, options);
|
// 2.返回人员结果
|
let perSearch = [];
|
personWs = this.$store.state.personState;
|
if (personWs.length != 0) {
|
personWs.forEach((e) => {
|
let pt = [e.longitude, e.latitude];
|
if (turf.booleanPointInPolygon(pt, circle)) {
|
perSearch.push(e);
|
}
|
});
|
} else {
|
console.log("人员数据为空");
|
}
|
//3.返回视频、报警结果
|
let searchArea = circle.geometry.coordinates[0].flat(Infinity);
|
let searchArr = searchArea.join("+");
|
Promise.all([
|
queryData("camera_point", searchArr),
|
queryData("alarm_point", searchArr),
|
])
|
.then((res) => {
|
let msg = {
|
funName: "dataLink",
|
data: {
|
//人员结果
|
data0: perSearch,
|
//视频结果
|
data1: res[0].data.features,
|
//报警结果
|
data2: res[1].data.features,
|
},
|
};
|
|
window.parent.postMessage(msg, "*");
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
},
|
//【数据管理】添加点
|
addPointEntity(params) {
|
layer.msg("请点击屏幕进行绘制");
|
// sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
|
// sgworld.Creator.createSimpleGraphic("point", {}, function (entity) {});
|
var that = this;
|
var tempEntities = [];
|
var tempposition = [];
|
var tempData = {};
|
if (params) {
|
tempData = params;
|
}
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction(function (movement) {
|
var position = Viewer.camera.pickEllipsoid(
|
movement.position,
|
Viewer.scene.globe.ellipsoid
|
);
|
if (position) {
|
tempposition.push(position);
|
let point = drawPoint(position);
|
sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(point.id);
|
tempEntities.push(point);
|
clearhander();
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
function clearhander() {
|
handler.destroy(); //关闭事件句柄
|
handler = null;
|
var temp = {};
|
temp.type = "Point";
|
temp.position = tempposition;
|
temp.Entities = tempEntities;
|
temp.data = tempData;
|
that.$bus.$emit("setAddEntity", temp);
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
|
}
|
},
|
//【数据管理】添加面
|
addPolygonEntity(params) {
|
layer.msg("请点击屏幕进行绘制");
|
var that = this;
|
var tempPoints = [];
|
var tempEntities = [];
|
var LSEntities = [];
|
var tempData = {};
|
if (params) {
|
tempData = params;
|
}
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction(function (click) {
|
//调用获取位置信息的接口
|
var position = Viewer.camera.pickEllipsoid(
|
click.position,
|
Viewer.scene.globe.ellipsoid
|
);
|
tempPoints.push(position);
|
let tempLength = tempPoints.length;
|
//调用绘制点的接口
|
let point = drawPoint(position);
|
tempEntities.push(point);
|
if (tempLength > 1) {
|
let pointline = drawPolyline([
|
tempPoints[tempPoints.length - 2],
|
tempPoints[tempPoints.length - 1],
|
]);
|
tempEntities.push(pointline);
|
} else {
|
}
|
return;
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
//右键点击操作
|
handler.setInputAction(function (click) {
|
let cartesian = Viewer.camera.pickEllipsoid(
|
click.position,
|
Viewer.scene.globe.ellipsoid
|
);
|
if (cartesian) {
|
let tempLength = tempPoints.length;
|
if (tempLength < 3) {
|
alert("请选择3个以上的点再执行闭合操作命令");
|
} else {
|
//闭合最后一条线
|
let pointline = drawPolyline([
|
tempPoints[tempPoints.length - 1],
|
tempPoints[0],
|
]);
|
tempEntities.push(pointline);
|
var polygon = drawPolygon(tempPoints);
|
LSEntities.push(polygon);
|
sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(polygon.id);
|
handler.destroy(); //关闭事件句柄
|
handler = null;
|
var temp = {};
|
temp.type = "Polygon";
|
temp.position = tempPoints;
|
temp.Entities = LSEntities;
|
temp.data = tempData;
|
that.$bus.$emit("setAddEntity", temp);
|
clearhander();
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
function clearhander() {
|
for (var i in tempEntities) {
|
sgworld.Viewer.entities.remove(tempEntities[i]);
|
}
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
|
}
|
},
|
//【数据管理】更新
|
updateEntity(params) {
|
if (updateArea) {
|
updateArea.deleteObject(updateArea.item);
|
}
|
switch (params) {
|
case "point":
|
break;
|
case "operation_area":
|
updateArea = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
"作业区wfs",
|
BASE_URL +
|
"/wfsserver/fssh_map_wfs?version=1.3.0&request=GetFeature&typename=operation_area&format=json",
|
{
|
far: 20000000,
|
heightReference: 1,
|
layertype: "polygonlayer",
|
near: 0,
|
outline: true,
|
outlineColor: "#fff",
|
outlineWidth: 1,
|
extrudedHeight: undefined,
|
material: "#00f",
|
},
|
"0",
|
true,
|
function (layer_data) {
|
// sgworld.Navigate.flyToObj(layer_data)
|
for (
|
let a = 0;
|
a < layer_data.entities._entities._array.length;
|
a++
|
) {
|
let ent = layer_data.entities._entities._array[a];
|
ent.height = 0;
|
ent.extrudedHeight = 0;
|
ent.polygon.material.color = new Cesium.Color(
|
255 / 255,
|
255 / 255,
|
0 / 255,
|
1
|
); //面颜色
|
}
|
}
|
);
|
break;
|
case "production_unit_area":
|
updateArea = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
"",
|
BASE_URL +
|
"/wfsserver/fssh_map_wfs?version=1.3.0&request=GetFeature&typename=production_unit_area&format=json",
|
{
|
far: 20000000,
|
heightReference: 1,
|
layertype: "polygonlayer",
|
near: 0,
|
outline: true,
|
outlineColor: "#fff",
|
outlineWidth: 1,
|
extrudedHeight: undefined,
|
material: "#00f",
|
},
|
"0",
|
true,
|
function (layer_data) {
|
// sgworld.Navigate.flyToObj(layer_data)
|
for (
|
let a = 0;
|
a < layer_data.entities._entities._array.length;
|
a++
|
) {
|
let ent = layer_data.entities._entities._array[a];
|
ent.height = 0;
|
ent.extrudedHeight = 0;
|
ent.polygon.material.color = new Cesium.Color(
|
255 / 255,
|
255 / 255,
|
0 / 255,
|
1
|
); //面颜色
|
}
|
}
|
);
|
break;
|
case "production_area":
|
updateArea = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
"",
|
BASE_URL +
|
"/wfsserver/fssh_map_wfs?version=1.3.0&request=GetFeature&typename=production_area&format=json",
|
{
|
far: 20000000,
|
heightReference: 1,
|
layertype: "polygonlayer",
|
near: 0,
|
outline: true,
|
outlineColor: "#fff",
|
outlineWidth: 1,
|
extrudedHeight: undefined,
|
material: "#00f",
|
},
|
"0",
|
true,
|
function (layer_data) {
|
// sgworld.Navigate.flyToObj(layer_data)
|
for (
|
let a = 0;
|
a < layer_data.entities._entities._array.length;
|
a++
|
) {
|
let ent = layer_data.entities._entities._array[a];
|
ent.height = 0;
|
ent.extrudedHeight = 0;
|
ent.polygon.material.color = new Cesium.Color(
|
255 / 255,
|
255 / 255,
|
0 / 255,
|
1
|
); //面颜色
|
}
|
}
|
);
|
break;
|
}
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction((event) => {
|
let pickedFeature = sgworld.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pickedFeature)) {
|
this.$bus.$emit("setUpdateEntity", pickedFeature);
|
handler.destroy(); //关闭事件句柄
|
handler = null;
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
//【数据管理】删除
|
delEntity(params) {
|
if (delwfs) {
|
delwfs.destroy();
|
delwfs = undefined;
|
}
|
this.$store.state.getDelEntity = true;
|
let sgwfs = new SmartEarth.WFSTool(Viewer);
|
switch (params) {
|
case "operation_area":
|
delwfs = sgwfs.CreateWfs("polygon", {
|
urls: BASE_URL + "/wfsserver/fssh_map_wfs",
|
layer: "operation_area",
|
color: "#ff0",
|
alpha: 0.5,
|
extrudedHeight: 0.01, // 拉伸高度，无拉伸高度则为贴地面
|
});
|
break;
|
case "production_unit_area":
|
delwfs = sgwfs.CreateWfs("polygon", {
|
urls: BASE_URL + "/wfsserver/fssh_map_wfs",
|
layer: "production_unit_area",
|
color: "#ff0",
|
alpha: 0.5,
|
extrudedHeight: 0.01, // 拉伸高度，无拉伸高度则为贴地面
|
});
|
break;
|
case "production_area":
|
delwfs = sgwfs.CreateWfs("polygon", {
|
urls: BASE_URL + "/wfsserver/fssh_map_wfs",
|
layer: "production_area",
|
color: "#ff0",
|
alpha: 0.5,
|
extrudedHeight: 0.01, // 拉伸高度，无拉伸高度则为贴地面
|
});
|
break;
|
}
|
handler && handler.destroy();
|
handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler.setInputAction((event) => {
|
let pickedFeature = Viewer.scene.pick(event.position);
|
// console.log(pickedFeature);
|
if (Cesium.defined(pickedFeature)) {
|
if (pickedFeature.primitive instanceof Cesium.Billboard) {
|
if (pickedFeature.id.fid.indexOf("camera_point") !== -1) {
|
this.sureDel("视频监控点", pickedFeature.id.fid, 1);
|
} else if (pickedFeature.id.fid.indexOf("alarm_point") !== -1) {
|
this.sureDel("报警监控点", pickedFeature.id.fid, 2);
|
} else if (pickedFeature.id.fid.indexOf("toxic_gas_point") !== -1) {
|
this.sureDel("有毒有害气体检测点", pickedFeature.id.fid, 3);
|
} else if (
|
pickedFeature.id.fid.indexOf("onsite_Inspection_point") !== -1
|
) {
|
this.sureDel("巡检点", pickedFeature.id.fid, 4);
|
} else if (
|
pickedFeature.id.fid.indexOf("emergency_supplies_point") !== -1
|
) {
|
this.sureDel("应急物资点", pickedFeature.id.fid, 5);
|
} else if (
|
pickedFeature.id.fid.indexOf("major_hazards_point") !== -1
|
) {
|
this.sureDel("危险源", pickedFeature.id.fid, 6);
|
} else if (
|
pickedFeature.id.fid.indexOf("entrance_guard_point") !== -1
|
) {
|
this.sureDel("门禁点", pickedFeature.id.fid, 7);
|
} else if (
|
pickedFeature.id.fid.indexOf("evacuation_point") !== -1
|
) {
|
this.sureDel("集结点", pickedFeature.id.fid, 8);
|
} else if (
|
pickedFeature.id.fid.indexOf("fire_equipment_point") !== -1
|
) {
|
this.sureDel("消防设备点", pickedFeature.id.fid, 14);
|
}
|
} else if (pickedFeature.primitive instanceof Cesium.Primitive) {
|
if (pickedFeature.id.fid.indexOf("operation_area") !== -1) {
|
this.sureDel(
|
`作业区："${pickedFeature.id.attributes.ope_name}"`,
|
pickedFeature.id.fid,
|
11
|
);
|
} else if (
|
pickedFeature.id.fid.indexOf("production_unit_area") !== -1
|
) {
|
this.sureDel(
|
`功能区："${pickedFeature.id.attributes.unit_name}"`,
|
pickedFeature.id.fid,
|
12
|
);
|
} else if (pickedFeature.id.fid.indexOf("production_area") !== -1) {
|
this.sureDel(
|
`厂区："${pickedFeature.id.attributes.pro_name}"`,
|
pickedFeature.id.fid,
|
13
|
);
|
}
|
}
|
}
|
// handler.destroy(); //关闭事件句柄
|
// handler = null;
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
//确认删除
|
sureDel(name, id, layerNum) {
|
let res = id.split(".");
|
this.$confirm(`此操作将永久删除该${name}, 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
$.ajax({
|
type: "post",
|
url:
|
BASE_URL +
|
"/rest/services/fssh_map_wfs/FeatureServer/" +
|
layerNum +
|
"/deleteFeatures",
|
async: false,
|
data: {
|
objectIds: res[1],
|
},
|
dataType: "json",
|
success: (data) => {
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
// window.location.reload();
|
},
|
error: function (e) {
|
this.$message.error("删除失败!");
|
},
|
});
|
});
|
},
|
//【数据管理】关闭数据管理
|
closeUpdata() {
|
if (delwfs) {
|
delwfs.destroy();
|
delwfs = undefined;
|
}
|
if (updateArea) {
|
updateArea.deleteObject(updateArea.item);
|
}
|
if (handler) {
|
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
},
|
//【分析工具】通视分析
|
visibility(type) {
|
let SightLine = sgworld.Analysis.createSightLine({
|
type: type,
|
});
|
lineOfSight.push(SightLine);
|
},
|
//【分析工具】清除通视分析
|
visiClear() {
|
lineOfSight.forEach((line) => {
|
line && line.deleteObject();
|
});
|
lineOfSight = [];
|
},
|
//【分析工具】缓冲区分析
|
showBuffer() {
|
this.showBuffBox = true;
|
},
|
add1() {
|
buff = sgworld.Analysis.DrawPointBuffer(buffRadius, function () {});
|
},
|
//线
|
add2() {
|
buff = sgworld.Analysis.DrawPolylineBuffer(buffRadius, function () {});
|
},
|
//面
|
add3() {
|
buff = sgworld.Analysis.DrawPolygonBuffer(buffRadius, function () {});
|
},
|
//清除缓冲区分析
|
clear1() {
|
if (buff) {
|
buff.clearBuff();
|
}
|
},
|
//【分析工具】关闭缓冲区界面
|
hiddenBuffer() {
|
this.showBuffBox = false;
|
},
|
//【空间测量】距离
|
jl() {
|
let m = window.sgworld.Command.execute(0, 10, colorAll, () => {});
|
measureData.push(m);
|
},
|
//【空间测量】表面距离
|
bmjl() {
|
let m = sgworld.Command.execute(0, 2, colorAll, () => {});
|
measureData.push(m);
|
},
|
//【空间测量】面积测量
|
mj() {
|
let m = window.sgworld.Command.execute(0, 3, colorAll, () => {});
|
measureData.push(m);
|
},
|
//【空间测量】表面面积
|
bmmj() {
|
let m = sgworld.Command.execute(0, 8, colorAll, () => {});
|
measureData.push(m);
|
},
|
//【空间测量】高度
|
height() {
|
let m = sgworld.Command.execute(0, 5, colorAll, () => {});
|
measureData.push(m);
|
},
|
//【空间测量】清除测量
|
clearMeasure() {
|
measureData.forEach((item) => {
|
item.deleteObject();
|
});
|
measureData = [];
|
},
|
//【三维漫游】地面漫游
|
drawPath() {
|
sgworld.Command.execute(2, 3, "", (data) => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
window.PathAnimationData = {
|
flyData: data,
|
};
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: "路径动画",
|
shade: false,
|
area: ["352px", "690px"],
|
offset: "r",
|
skin: "other-class",
|
content: SmartEarthRootUrl + "Workers/path/Path.html",
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
},
|
});
|
});
|
},
|
//【三维漫游】定点绕飞
|
setPointFly() {
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
124.041921763,
|
41.832088564,
|
2000
|
),
|
});
|
sgworld.Analysis.setPointFly();
|
},
|
//【模型维护】
|
showBindbox() {
|
this.$store.commit("showBindBox", true);
|
},
|
//【新功能】
|
// 传ID飞到点
|
showIdPoint(params) {
|
// console.log(params);
|
switch (params.point_type) {
|
case "4":
|
queryPOI("camera_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 200);
|
}
|
});
|
break;
|
case "7":
|
queryPOI("onsite_inspection_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 200);
|
}
|
});
|
break;
|
case "17":
|
queryPOI("alarm_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 50);
|
}
|
});
|
break;
|
case "19":
|
queryPOI("toxic_gas_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 30);
|
}
|
});
|
break;
|
case "Cesium3DTileset":
|
Promise.all([
|
queryMainByModelId(params.point_id),
|
queryDeviceByModelId(params.point_id),
|
])
|
.then((res) => {
|
if (res[0].data.data.length != 0) {
|
switch (params.point_id) {
|
case "T2101":
|
this.flyView(
|
4.9781735205721205,
|
-0.43760056824220506,
|
6.2796293201292315,
|
-2664467.862670266,
|
3943328.083614013,
|
4232385.740674607
|
);
|
break;
|
case "T2102":
|
this.flyView(
|
4.027835159764557,
|
-0.39864587189130707,
|
6.2803828289543695,
|
-2664257.1919244225,
|
3943167.9503327315,
|
4232633.918752354
|
);
|
break;
|
case "T2103":
|
this.flyView(
|
1.9317634468320648,
|
-0.3922573311767279,
|
0.00337667573377054,
|
-2664062.778230234,
|
3943371.910947225,
|
4232371.747353884
|
);
|
break;
|
default:
|
let poiarr = res[0].data.data[0].bdmLocation.split(", ");
|
let poi = {
|
lon: parseFloat(poiarr[0]),
|
lat: parseFloat(poiarr[1]),
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 30);
|
}
|
} else if (res[1].data.data.length != 0) {
|
switch (params.point_id) {
|
case "T2101":
|
this.flyView(
|
4.9781735205721205,
|
-0.43760056824220506,
|
6.2796293201292315,
|
-2664467.862670266,
|
3943328.083614013,
|
4232385.740674607
|
);
|
break;
|
case "T2102":
|
this.flyView(
|
4.027835159764557,
|
-0.39864587189130707,
|
6.2803828289543695,
|
-2664257.1919244225,
|
3943167.9503327315,
|
4232633.918752354
|
);
|
break;
|
case "T2103":
|
this.flyView(
|
1.9317634468320648,
|
-0.3922573311767279,
|
0.00337667573377054,
|
-2664062.778230234,
|
3943371.910947225,
|
4232371.747353884
|
);
|
break;
|
default:
|
let poiarr = res[0].data.data[0].bdmLocation.split(", ");
|
let poi = {
|
lon: parseFloat(poiarr[0]),
|
lat: parseFloat(poiarr[1]),
|
};
|
sgworld.Navigate.flyToPosition(poi.lon, poi.lat, 30);
|
}
|
} else {
|
let msg = {
|
funName: "showIdPointResult",
|
data: {
|
point_id: params.point_id,
|
message: "该模型尚未进行绑定，无法定位",
|
},
|
};
|
window.parent.postMessage(msg, "*");
|
}
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
break;
|
}
|
},
|
// 返回id的经纬度
|
getPointPoi(params) {
|
switch (params.point_type) {
|
case "4":
|
queryPOI("camera_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else {
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
}
|
});
|
break;
|
case "7":
|
queryPOI("onsite_inspection_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else {
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
}
|
});
|
break;
|
case "17":
|
queryPOI("alarm_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else {
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
}
|
});
|
break;
|
case "19":
|
queryPOI("toxic_gas_point", params.point_id).then((res) => {
|
if (res.data.features.length != 0) {
|
let poi = {
|
lon: res.data.features[0].geometry.coordinates[0],
|
lat: res.data.features[0].geometry.coordinates[1],
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else {
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
}
|
});
|
break;
|
case "Cesium3DTileset":
|
Promise.all([
|
queryMainByModelId(params.point_id),
|
queryDeviceByModelId(params.point_id),
|
])
|
.then((res) => {
|
if (res[0].data.data.length != 0) {
|
let poiarr = res[0].data.data[0].bdmLocation.split(", ");
|
let poi = {
|
lon: parseFloat(poiarr[0]),
|
lat: parseFloat(poiarr[1]),
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else if (res[1].data.data.length != 0) {
|
let poiarr = res[1].data.data[0].bindLocation.split(", ");
|
let poi = {
|
lon: parseFloat(poiarr[0]),
|
lat: parseFloat(poiarr[1]),
|
};
|
this.senderpointPoi(params.point_id, params.point_type, poi);
|
} else {
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
}
|
})
|
.catch((res) => {
|
console.log("数据请求失败");
|
});
|
break;
|
default:
|
this.senderpointPoi(params.point_id, params.point_type, {});
|
break;
|
}
|
},
|
senderpointPoi(point_id, point_type, poi) {
|
let msg = {
|
funName: "getPointPoi",
|
data: {
|
point_id,
|
point_type,
|
poi,
|
},
|
};
|
window.parent.postMessage(msg, "*");
|
},
|
// 动态巡检点（传id）
|
showOIP(params) {
|
if (OIParray.length !== 0) {
|
OIParray.forEach((item) => {
|
sgworld.Creator.DeleteObject(item);
|
});
|
OIParray = [];
|
}
|
let promises = params.map((item) => {
|
return queryPOI("onsite_inspection_point", item.point_id);
|
});
|
Promise.all(promises).then((res) => {
|
res.forEach((item) => {
|
if (item.data.features != undefined) {
|
if (item.data.features.length != 0) {
|
item.data.features.forEach((item) => {
|
let position = sgworld.Creator.CreatePosition(
|
item.geometry.coordinates[0],
|
item.geometry.coordinates[1],
|
// item.properties.coor_z
|
0
|
);
|
OIPpoint = sgworld.Creator.CreateLabel(
|
position,
|
item.properties.point_name,
|
SmartEarthRootUrl + "Workers/image/icon/xj.png",
|
{
|
// 文本偏移量
|
pixelOffset: {
|
x: 0,
|
y: -50,
|
},
|
// 无视遮挡
|
disableDepthTestDistance: Infinity,
|
scale: 0.8,
|
},
|
0,
|
"巡检点"
|
);
|
OIPpoint.item.properties = item;
|
OIParray.push(OIPpoint);
|
});
|
}
|
}
|
});
|
});
|
},
|
// 清除巡检点
|
clearOIP() {
|
if (OIParray.length != 0) {
|
OIParray.forEach((item) => {
|
sgworld.Creator.DeleteObject(item);
|
});
|
OIParray = [];
|
}
|
},
|
// 获取多个点位经纬度
|
showAltPoint(params) {
|
let promises = params.map((item) => {
|
switch (item.point_type) {
|
case "4":
|
return queryPOI("camera_point", item.point_id);
|
case "7":
|
return queryPOI("onsite_inspection_point", item.point_id);
|
case "17":
|
return queryPOI("alarm_point", item.point_id);
|
case "19":
|
return queryPOI("toxic_gas_point", item.point_id);
|
case "busDeviceMain":
|
return queryMainById(item.point_id);
|
case "busProductionDevice":
|
return queryDeviceById(item.point_id);
|
}
|
});
|
Promise.all(promises).then((res) => {
|
res.forEach((item) => {
|
if (item.data.data != undefined) {
|
if (item.data.data.bdmId) {
|
if (
|
item.data.data.bdmLocation !== null &&
|
item.data.data.bdmLocation !== ""
|
) {
|
let res = item.data.data.bdmLocation.split(", ");
|
let poi = {
|
lon: parseFloat(res[0]),
|
lat: parseFloat(res[1]),
|
height: 15,
|
};
|
circlePosition.push(poi);
|
} else {
|
layer.msg("未绑定模型，无法定位");
|
}
|
} else {
|
if (
|
item.data.data.bindLocation !== null &&
|
item.data.data.bindLocation !== ""
|
) {
|
let res = item.data.data.bindLocation.split(", ");
|
let poi = {
|
lon: parseFloat(res[0]),
|
lat: parseFloat(res[1]),
|
height: 15,
|
};
|
circlePosition.push(poi);
|
} else {
|
layer.msg("未绑定模型，无法定位");
|
}
|
}
|
} else if (item.data.features != undefined) {
|
if (item.data.features.length != 0) {
|
item.data.features.forEach((item) => {
|
let poi = {
|
lon: item.geometry.coordinates[0],
|
lat: item.geometry.coordinates[1],
|
height: 15,
|
};
|
circlePosition.push(poi);
|
});
|
}
|
}
|
});
|
this.alertPoint(circlePosition);
|
});
|
},
|
// 显示报警环
|
alertPoint(params) {
|
this.delAltPoint();
|
params.forEach((item) => {
|
let c = sgworld.Analysis.createMultiCircleScan(
|
item,
|
100,
|
"#f00",
|
2000,
|
false
|
);
|
circle.push(c);
|
});
|
},
|
// 清除报警环
|
delAltPoint() {
|
circle.forEach((e) => {
|
e.remove();
|
});
|
circle = [];
|
},
|
// 传值显示点
|
itemPoint(params) {
|
console.log(params);
|
if (itemLabel) {
|
sgworld.Creator.DeleteObject(itemLabel);
|
}
|
var position = { X: params[0], Y: params[1], Altitude: params[2] };
|
itemLabel = sgworld.Creator.CreateImageLabel(
|
position,
|
SmartEarthRootUrl + "Workers/image/icon/gz26.png",
|
{},
|
0,
|
"标签点"
|
);
|
sgworld.Navigate.flyToPosition(params[0], params[1], 3000);
|
},
|
// 清除传值点
|
delItemPoint() {
|
if (itemLabel) {
|
sgworld.Creator.DeleteObject(itemLabel);
|
}
|
},
|
// 清除历史轨迹
|
clearHistory() {
|
if (getHistoryLine != null) {
|
sgworld.Viewer.entities.remove(getHistoryLine.item);
|
getHistoryLine = null;
|
}
|
},
|
// 初始化视角
|
initView() {
|
sgworld.Navigate.flyToPosition(124.041921763, 41.832088564, 5000);
|
},
|
//显示当前视角
|
showView() {
|
let msg = {
|
funName: "showView",
|
data: {
|
heading: Viewer.scene.camera.heading,
|
pitch: Viewer.scene.camera.pitch,
|
roll: Viewer.scene.camera.roll,
|
position: Viewer.scene.camera.position,
|
},
|
};
|
window.parent.postMessage(msg, "*");
|
// console.log("heading", Viewer.scene.camera.heading);
|
// console.log("pitch", Viewer.scene.camera.pitch);
|
// console.log("roll", Viewer.scene.camera.roll);
|
// console.log("position", Viewer.scene.camera.position);
|
},
|
// 飞行到任意视角
|
flyView(heading, pitch, roll, x, y, z) {
|
sgworld.Viewer.camera.flyTo({
|
orientation: {
|
heading,
|
pitch,
|
roll,
|
// heading: 4.9781735205721205,
|
// pitch: -0.43760056824220506,
|
// roll: 6.2796293201292315,
|
},
|
destination: new Cesium.Cartesian3(
|
x,
|
y,
|
z
|
// -2664467.862670266,
|
// 3943328.083614013,
|
// 4232385.740674607
|
),
|
});
|
},
|
|
//postMessage
|
handleMessage(e) {
|
let funName = e.data.funName;
|
let data = e.data.data;
|
switch (funName) {
|
//定点绕飞
|
case "setPointFly":
|
this.setPointFly();
|
break;
|
//地面漫游
|
case "drawPath":
|
this.drawPath();
|
break;
|
//距离
|
case "lengthMeasure":
|
this.jl();
|
break;
|
//高度
|
case "heightMeasure":
|
this.height();
|
break;
|
//面积
|
case "areaMeasure":
|
this.mj();
|
break;
|
//表面距离
|
case "SDMeasure":
|
this.bmjl();
|
break;
|
//表面面积
|
case "SAMeasure":
|
this.bmmj();
|
break;
|
//清除量测
|
case "clearMeasure":
|
this.clearMeasure();
|
break;
|
//通视分析
|
case "visibility":
|
this.visibility();
|
break;
|
//清除通视
|
case "visiClear":
|
this.visiClear();
|
break;
|
//缓冲区分析(点线面)
|
case "showBuffer":
|
this.showBuffer();
|
break;
|
//清除缓冲区
|
case "hiddenBuffer":
|
this.hiddenBuffer();
|
break;
|
//模型分区加载
|
case "addModel":
|
this.addModel(data);
|
break;
|
//数据展示返回ID
|
case "showInfo":
|
this.showInfo();
|
break;
|
//【数据联动：原生】
|
case "getAreaData":
|
this.dataLinkage(data);
|
break;
|
// 显示历史轨迹
|
case "showhistory":
|
//判断历史轨迹是否存在
|
if (getHistoryLine != null) {
|
//清除历史轨迹的方法
|
this.clearHistory();
|
}
|
getHistoryLine = sgworld.Creator.createPolyline(
|
data,
|
"#ffff00",
|
1,
|
0,
|
"线"
|
);
|
break;
|
// 清除历史轨迹
|
case "clearhistory":
|
this.clearHistory();
|
break;
|
//【联动】返回列表
|
case "dataLink":
|
this.dataLink(data);
|
break;
|
//【联动】传坐标显示点
|
case "itemPoint":
|
this.itemPoint(data);
|
break;
|
//清除坐标显示点
|
case "delItemPoint":
|
this.delItemPoint();
|
break;
|
//显示报警扩散圆
|
case "showAltPoint":
|
this.showAltPoint(data);
|
break;
|
//清除扩散圆
|
case "delAltPoint":
|
this.delAltPoint();
|
break;
|
//传id飞行
|
case "showIdPoint":
|
this.showIdPoint(data);
|
break;
|
case "getPointPoi":
|
this.getPointPoi(data);
|
break;
|
// 添加点
|
case "addPointEntity":
|
this.addPointEntity(data);
|
break;
|
// 添加面
|
case "addPolygonEntity":
|
this.addPolygonEntity(data);
|
break;
|
// 更新wfs
|
case "updateEntity":
|
this.updateEntity(data);
|
break;
|
//关闭更新
|
case "closeUpdata":
|
this.closeUpdata();
|
break;
|
// 删除wfs
|
case "delEntity":
|
this.delEntity(data);
|
break;
|
//显示模型维护界面
|
case "showBindbox":
|
this.showBindbox();
|
break;
|
//巡检点
|
case "showOIP":
|
this.showOIP(data);
|
break;
|
//关闭巡检点
|
case "clearOIP":
|
this.clearOIP();
|
break;
|
//初始化视角
|
case "initView":
|
this.initView();
|
break;
|
//返回当前视角
|
case "showView":
|
this.showView();
|
break;
|
case "modelHighlight":
|
console.log(data);
|
this.modelHighlight(data);
|
break;
|
}
|
},
|
// 模拟人员定位
|
testws(data) {
|
//模拟坐标
|
var position = turf.randomPosition([
|
124.038021579, 41.834725327, 124.037885321, 41.833602475, 124.036917583,
|
41.833656046, 124.037041621, 41.834755012, 124.037502208, 41.834748337,
|
124.038021579, 41.834725327,
|
]);
|
let a = {
|
buildId: "204001",
|
floorNo: "Floor1",
|
id: 1505722,
|
labelMac: "1918FF02153D",
|
latitude: position[1],
|
// latitude: 41.8403679291,
|
locationType: 1,
|
longitude: position[0],
|
// longitude: 124.0425500831,
|
name: "李庆峰",
|
position: '{"x":-273.07075257930103,"y":0.0,"z":861.189668486425}',
|
status: 0,
|
subType: "1",
|
time: "2022-06-20T15:43:43.254",
|
type: "2",
|
};
|
let b = {
|
buildId: "204001",
|
floorNo: "Floor1",
|
id: 1505721,
|
labelMac: "1918FF021539",
|
// latitude: 41.84218643748873,
|
latitude: position[1] + 0.011,
|
locationType: 1,
|
// longitude: 124.0479566202547,
|
longitude: position[0] + 0.011,
|
name: "李诚",
|
position: '{"x":-243.9065265542524,"y":0.0,"z":943.3707431128342}',
|
status: 0,
|
subType: "1",
|
time: "2022-06-20T15:43:43.415",
|
type: "1",
|
};
|
perMap.set(a.id, a);
|
perMap.set(b.id, b);
|
let arr = [];
|
for (const value of perMap.values()) {
|
arr.push(value);
|
console.log(value.longitude, value.latitude);
|
}
|
this.$store.commit("UPDATE_Person_STATE", arr);
|
perMap.clear();
|
},
|
// 模拟报警点
|
testAlert() {
|
this.alertPoint([
|
{ lon: 124.0395126913, lat: 41.8288691111, height: 100 },
|
]);
|
},
|
//#region
|
// historyInfo() {
|
// this.showhistory = true;
|
// },
|
// closeHistory() {
|
// this.showhistory = false;
|
// },
|
// showTimeBox(item) {
|
// this.historyTrack.name = item.name;
|
// this.historyTrack.id = item.id;
|
// this.timePickBox = true;
|
// },
|
// sendTimePick() {
|
// if (
|
// this.timepickvalue[0] == undefined ||
|
// this.timepickvalue[1] == undefined
|
// ) {
|
// this.$alert("请选择要查询的时间范围", "", {
|
// confirmButtonText: "确定",
|
// callback: (action) => {},
|
// });
|
// } else {
|
// let name = this.historyTrack.name;
|
// let id = this.historyTrack.id;
|
// let timeSpan = {
|
// beginTime: this.timepickvalue[0],
|
// endTime: this.timepickvalue[1],
|
// };
|
// this.$alert(
|
// "您查询的是：" +
|
// name +
|
// "，开始时间：" +
|
// timeSpan.beginTime +
|
// "，截止时间：" +
|
// timeSpan.endTime,
|
// "查询历史轨迹",
|
// {
|
// confirmButtonText: "确定",
|
// callback: (action) => {
|
// // sgworld.Viewer.entities.removeAll();
|
// //判断历史轨迹是否存在
|
// if (getHistoryLine != null) {
|
// //清除历史轨迹的方法
|
// this.clearHistory();
|
// }
|
// this.timePickBox = false;
|
// this.$axios.get("./config/History.json").then((response) => {
|
// let res = response.data.data;
|
// let historygeometry = [];
|
// res.forEach((e) => {
|
// let poi = {
|
// x: e.longitude,
|
// y: e.latitude,
|
// };
|
// historygeometry.push(poi);
|
// });
|
// getHistoryLine = sgworld.Creator.createPolyline(
|
// historygeometry,
|
// "#ffff00",
|
// 1,
|
// 0,
|
// "线"
|
// );
|
// });
|
// },
|
// }
|
// );
|
// }
|
// },
|
// cancelTimePick() {
|
// this.timePickBox = false;
|
// },
|
//#endregion
|
},
|
mounted() {
|
this.getwsdata(); //调用ws
|
window.addEventListener("message", this.handleMessage);
|
$("#buff").on("input propertychange", function (event) {
|
let num = $(this).val();
|
num = parseFloat(num);
|
if (buff) {
|
buff.changeBurr(num);
|
}
|
buffRadius = num;
|
});
|
},
|
created() {
|
const _this = this;
|
layui.use(["layer"], function () {
|
_this.layer = layui.layer;
|
});
|
},
|
};
|
|
function drawPolygon(positions, config) {
|
if (positions.length < 2) return;
|
var config = config ? config : {};
|
var polygonGeometry = sgworld.Viewer.entities.add({
|
name: "面几何对象",
|
polygon: {
|
height: 0.1,
|
hierarchy: new Cesium.PolygonHierarchy(positions),
|
material: config.color
|
? new Cesium.Color.fromCssColorString(config.color).withAlpha(0.2)
|
: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(0.2),
|
perPositionHeight: true,
|
},
|
});
|
return polygonGeometry;
|
}
|
function drawPolyline(positions, config) {
|
if (positions.length < 1) return;
|
var config = config ? config : {};
|
var polylineGeometry = sgworld.Viewer.entities.add({
|
name: "线几何对象",
|
polyline: {
|
positions: positions,
|
width: config.width ? config.width : 5.0,
|
material: new Cesium.PolylineGlowMaterialProperty({
|
color: config.color
|
? new Cesium.Color.fromCssColorString(config.color)
|
: Cesium.Color.GOLD,
|
}),
|
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
|
color: config.color
|
? new Cesium.Color.fromCssColorString(config.color)
|
: Cesium.Color.GOLD,
|
}),
|
},
|
});
|
return polylineGeometry;
|
}
|
function drawPoint(position) {
|
var pointGeometry = sgworld.Viewer.entities.add({
|
name: "点几何对象",
|
position: position,
|
show: true,
|
point: {
|
color: Cesium.Color.SKYBLUE,
|
pixelSize: 10,
|
outlineColor: Cesium.Color.YELLOW,
|
outlineWidth: 3,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
|
return pointGeometry;
|
}
|
function spArr(arr, num) {
|
//arr是你要分割的数组，num是以几个为一组
|
let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
|
for (let i = 0; i < arr.length; ) {
|
//注意：这里与for循环不太一样的是，没有i++
|
newArr.push(arr.slice(i, (i += num)));
|
}
|
return newArr;
|
}
|
</script>
|
<style lang="less" scoped>
|
.personList {
|
position: absolute;
|
width: 300px;
|
height: 500px;
|
bottom: 4%;
|
left: -50vh;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
.closeBtn {
|
height: 20px;
|
i {
|
border: 1px solid #000;
|
float: right;
|
margin-top: 10px;
|
margin-right: 10px;
|
}
|
}
|
li {
|
cursor: pointer;
|
width: 90%;
|
overflow-y: auto;
|
background-color: #eee;
|
margin: 10px auto 0;
|
padding: 0;
|
font-size: 14px;
|
}
|
}
|
.timepick {
|
position: absolute;
|
top: 270px;
|
left: -57vw;
|
width: 500px;
|
height: 140px;
|
background: rgba(255, 255, 255, 0.9);
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
border: 1px solid #000;
|
border-radius: 10px;
|
.perInfo {
|
// background: #bfa;
|
// font-size: 16px;
|
padding-left: 15px;
|
margin: 10px 0;
|
}
|
.block {
|
width: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
}
|
.btnBox {
|
width: 25%;
|
position: relative;
|
left: 350px;
|
}
|
}
|
.list {
|
position: absolute;
|
width: 300px;
|
height: 400px;
|
background-color: rgba(255, 255, 255, 0.5);
|
top: 0;
|
left: -500px;
|
// z-index: 10000;
|
padding: 20px;
|
border: 1px solid #000;
|
border-radius: 10px;
|
font-size: 14px;
|
text-decoration: none;
|
.closeBtn {
|
height: 20px;
|
i {
|
border: 1px solid #000;
|
float: right;
|
margin-top: 10px;
|
margin-right: 10px;
|
}
|
}
|
.listBox {
|
background-color: #fff;
|
height: 95%;
|
// margin-top: 30px;
|
overflow: auto;
|
li {
|
background-color: #eee;
|
margin-bottom: 5px;
|
}
|
}
|
}
|
.menustrip {
|
width: 70px;
|
height: 74%;
|
background: rgba(255, 255, 255, 0.8);
|
padding: 10px 0;
|
position: absolute;
|
top: 13%;
|
right: 1%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
border: 1px solid #fff;
|
border-radius: 10px;
|
// visibility: hidden;
|
}
|
// .measure {
|
// position: absolute;
|
// top: -175%;
|
// right: 100%;
|
// }
|
|
.features {
|
cursor: pointer;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
width: 100%;
|
}
|
|
.icon_box {
|
font-size: 40px;
|
}
|
|
/* 悬停时显示下拉菜单 */
|
.features:hover .featuresitem {
|
display: block;
|
}
|
|
/* 下拉内容（默认隐藏） */
|
.featuresitem {
|
display: none;
|
position: absolute;
|
top: 0%;
|
right: 100%;
|
background: rgba(255, 255, 255, 0.8);
|
width: 140px;
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
z-index: 1;
|
border: 1px solid #fff;
|
border-radius: 10px;
|
text-align: center;
|
font-size: 14px;
|
padding: 10px;
|
}
|
|
.featuresitem a {
|
color: black;
|
padding: 12px 16px;
|
text-decoration: none;
|
display: block;
|
}
|
|
/* 悬停时更改下拉链接的颜色 */
|
.featuresitem a:hover {
|
background-color: #f1f1f1;
|
}
|
|
.el-collapse /deep/ .el-collapse-item__header {
|
background: transparent;
|
border-radius: 4px 4px 0 0;
|
height: 30px;
|
font-size: 14px;
|
color: black;
|
padding: 12px 16px;
|
}
|
|
.el-collapse /deep/ .el-collapse-item__wrap {
|
background: transparent;
|
border-radius: 0 0 4px 4px;
|
padding-left: 5px;
|
}
|
|
.layui-form-label {
|
width: 60px;
|
}
|
|
.layui-input-block {
|
margin-left: 90px;
|
}
|
.layerControl {
|
position: absolute;
|
}
|
.videoBox {
|
// width: 600px;
|
// height: 600px;
|
// background-color: #bfa;
|
// border: 1px solid #eee;
|
position: absolute;
|
top: 0;
|
left: -50vw;
|
.closeBtn i {
|
float: right;
|
background-color: #eee;
|
}
|
}
|
.editbox {
|
position: absolute;
|
top: 25%;
|
left: -58vw;
|
width: 450px;
|
height: 200px;
|
background-color: #eee;
|
}
|
.funcBox {
|
position: absolute;
|
top: 10px;
|
left: -30vw;
|
padding: 10px;
|
width: 300px;
|
background-color: rgba(0, 0, 0, 0.7);
|
border-radius: 4px;
|
|
color: #fff;
|
}
|
|
.layui-form-item {
|
text-align: center;
|
}
|
|
.layui-form-label {
|
width: unset !important;
|
padding: 9px !important;
|
}
|
|
.layui-input-block {
|
margin-left: 80px !important;
|
}
|
</style>
|
