1452 lines
50 KiB
JavaScript
1452 lines
50 KiB
JavaScript
|
||
// var BASE_URL = "http://192.168.10.102:9023";
|
||
var BASE_URL = window.BASE_URL;
|
||
var APP_URL = window.APP_URL;
|
||
for (var i = 0; i < xianjie.features.length; i++) {
|
||
xianjie.features[i].id = i + 1;
|
||
}
|
||
|
||
var present_Township = "";
|
||
// console.log(xianjie);
|
||
var townshipCaseCount = [];
|
||
var newsReportDataGeoJsonArr = []
|
||
var historyCaseGeoJsonArr = []
|
||
var townshipCaseCountArr = [];
|
||
var colorSelect = [];
|
||
|
||
function loadMainMap() {
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneOrgCount",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
async: false,
|
||
data: {},
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
townshipCaseCount = data.result;
|
||
// console.log("townshipCaseCount",townshipCaseCount);
|
||
}
|
||
});
|
||
|
||
townshipCaseCount.forEach((item, index) => {
|
||
townshipCaseCountArr[index] = item.reportCount;
|
||
})
|
||
|
||
var bigCount = 0;
|
||
var smallCount = 9999;
|
||
for (var i = 0; i < townshipCaseCountArr.length; i++) {
|
||
if (townshipCaseCountArr[i] > bigCount) {
|
||
bigCount = townshipCaseCountArr[i]
|
||
}
|
||
if (townshipCaseCountArr[i] < smallCount) {
|
||
smallCount = townshipCaseCountArr[i]
|
||
}
|
||
}
|
||
|
||
let unit = (bigCount - smallCount) / 12;
|
||
|
||
colorSelect = ['interpolate', ['linear'], ['get', 'count'],
|
||
smallCount, '#43E1F8',
|
||
smallCount + unit * 2, '#49B0F9',
|
||
smallCount + unit * 3, '#3EABFA',
|
||
smallCount + unit * 4, '#27A2FB',
|
||
smallCount + unit * 5, '#34E6B1',
|
||
smallCount + unit * 6, '#1099FB',
|
||
smallCount + unit * 7, '#0695FB',
|
||
smallCount + unit * 8, '#058DEE',
|
||
smallCount + unit * 9, '#09C78E',
|
||
smallCount + unit * 10, '#047DD4',
|
||
smallCount + unit * 11, '#94D515',
|
||
smallCount + unit * 12, '#0568B0',
|
||
]
|
||
// console.log(colorSelect);
|
||
xianjie.features.forEach(function (item, index) {
|
||
var towninfo = townshipCaseCount.filter(function (it, idx) {
|
||
return it.name == item.properties.name
|
||
})
|
||
xianjie.features[index].properties.count = towninfo[0].reportCount;
|
||
xianjie.features[index].properties.newestCount = towninfo[0].todayCount;
|
||
})
|
||
}
|
||
|
||
// 获取乡镇等数据
|
||
loadMainMap();
|
||
//console.log("xianjie",xianjie);
|
||
|
||
var worldMapContainer1 = document.getElementById('distribution_map');
|
||
worldMapContainer1.style.height = "610px";
|
||
worldMapContainer1.style.width = "970px";
|
||
worldMapContainer1.style.position = "relative";
|
||
worldMapContainer1.style.left = "30px";
|
||
|
||
mapboxgl.accessToken = 'pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA';
|
||
let map = new mapboxgl.Map({
|
||
container: 'distribution_map',
|
||
style: {
|
||
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||
"version": 8,
|
||
"sources": {
|
||
// "raster-tiles": {
|
||
// "type": "raster",
|
||
// "tiles": ['http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ed82a9d17a463c1c604f7e1f40293f25'],
|
||
// "tileSize": 256,
|
||
// }
|
||
},
|
||
"layers": [
|
||
// {
|
||
// "id": "tdt-img-tiles",
|
||
// "type": "raster",
|
||
// "source": "raster-tiles",
|
||
// "minzoom": 0,
|
||
// "maxzoom": 22
|
||
// },
|
||
]
|
||
},
|
||
zoom: 7.6,
|
||
center: [118.284576,35.199955],
|
||
});
|
||
var size = 200;
|
||
|
||
var pulsingDot = {
|
||
width: size,
|
||
height: size,
|
||
data: new Uint8Array(size * size * 4),
|
||
|
||
onAdd: function () {
|
||
var canvas = document.createElement('canvas');
|
||
canvas.width = this.width;
|
||
canvas.height = this.height;
|
||
this.context = canvas.getContext('2d');
|
||
},
|
||
|
||
render: function () {
|
||
var duration = 1000;
|
||
var t = (performance.now() % duration) / duration;
|
||
var radius = size / 2 * 0.3;
|
||
var outerRadius = size / 2 * 0.7 * t + radius;
|
||
var context = this.context;
|
||
context.clearRect(0, 0, this.width, this.height);
|
||
context.beginPath();
|
||
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
|
||
context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
|
||
context.fill();
|
||
context.beginPath();
|
||
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
|
||
context.fillStyle = 'rgba(255, 100, 100, 1)';
|
||
context.strokeStyle = 'white';
|
||
context.lineWidth = 2 + 4 * (1 - t);
|
||
context.fill();
|
||
context.stroke();
|
||
this.data = context.getImageData(0, 0, this.width, this.height).data;
|
||
map.triggerRepaint();
|
||
|
||
return true;
|
||
}
|
||
};
|
||
|
||
|
||
var UAVMarkerArray = [];
|
||
var flvMarkerArray = []
|
||
var flvDataArray = []
|
||
var DroneMarkerArray = [];
|
||
var UAVInfo = [];
|
||
var getUAVMarkersTimer = null;
|
||
|
||
var newestCountMarkerArray = [];
|
||
var historyCountMarkerArray = [];
|
||
|
||
// 无人机
|
||
function loadUAVBox(data) {
|
||
// var data = {
|
||
// "account": "17853305026",
|
||
// "createtime": "2023-11-08 09:58:16",
|
||
// "height": 185,
|
||
// "ip": "192.168.10.101",
|
||
// "lat": 35.264007,
|
||
// "lng": 118.130002,
|
||
// "model": "airPlaneModel"
|
||
// }
|
||
if (flvMarkerArray.length > 0) {
|
||
$('#UAVView').attr("data-isActive", "true")
|
||
$('#UAVView').css("color", "#FFF726")
|
||
$("#UAVView").find(".centerimg").css('display', 'none')
|
||
$("#UAVView").find(".centerimgActive").css('display', 'inline-block')
|
||
for (var i = 0; i < window.flvMarkerArray.length; i++) {
|
||
window.flvMarkerArray[i].remove(map);
|
||
}
|
||
}
|
||
if (data && data.account) {
|
||
$('#UAVView').attr("data-isActive", "true")
|
||
$('#UAVView').css("color", "#FFF726")
|
||
$("#UAVView").find(".centerimg").css('display', 'none')
|
||
$("#UAVView").find(".centerimgActive").css('display', 'inline-block')
|
||
// console.log('loadUAVBox')
|
||
if (flvDataArray.find(info => info.account === data.account)) {
|
||
// console.log('已存在')
|
||
info = data
|
||
} else {
|
||
flvDataArray.push(data)
|
||
}
|
||
flvMarkerArray = []
|
||
flvDataArray.forEach(element => {
|
||
var arr = []
|
||
arr.push(element.lng)
|
||
arr.push(element.lat)
|
||
let coordinate = arr
|
||
let el = document.createElement('img')
|
||
el.id = 'markerId'
|
||
el.src = 'images/unmanned.png'
|
||
el.setAttribute("phone", element.account);
|
||
// console.log(coordinate)
|
||
let marker = new mapboxgl.Marker(el).setLngLat(coordinate).addTo(map) // 将标记添加到地图上
|
||
window.flvMarkerArray.push(marker);
|
||
el.addEventListener('click', (e) => {
|
||
$('.bgPop5,.pop5').show();
|
||
var phone = el.getAttribute("phone")
|
||
if(phone == '17853305026'){
|
||
vm.flvStr = "17853305026"
|
||
localStorage.setItem('flvStr', vm.flvStr)
|
||
childFlv.window.childFunction()
|
||
}else{
|
||
vm.flvStr = "http://live.hopetrytech.com/live/" + phone + ".flv"
|
||
// console.log(vm.flvStr)
|
||
// var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
|
||
// player.src(vm.flvStr); // url 播放地址
|
||
localStorage.setItem('flvStr', vm.flvStr)
|
||
myWebSocket.send(data.account)
|
||
childFlv.window.childFunction()
|
||
}
|
||
})
|
||
});
|
||
for (var i = 0; i < window.flvMarkerArray.length; i++) {
|
||
window.flvMarkerArray[i].addTo(map);
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
// 加载最新上报的数据点
|
||
function loadLastReportPoint(caseId, isFirst) {
|
||
if (UAVMarkerArray.length > 0) {
|
||
for (var i = 0; i < window.UAVMarkerArray.length; i++) {
|
||
window.UAVMarkerArray[i].remove(map);
|
||
}
|
||
}
|
||
|
||
UAVMarkerArray = [];
|
||
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo?id=" + caseId,
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
async: false,
|
||
data: {},
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
UAVInfo[0] = data.result;
|
||
console.log(!isFirst)
|
||
if (!isFirst) {
|
||
if (audio != null) {
|
||
audio.pause();
|
||
audio = null;
|
||
}
|
||
audio = "./audio/" + data.result.info.streetname + ".mp3";
|
||
console.log(audio);
|
||
audio = new Audio(audio);
|
||
audio.play();
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
for (var i = 0; i < 1; i++) {
|
||
var el = document.createElement('div');
|
||
el.className = 'marker';
|
||
el.style.backgroundSize = '100%';
|
||
|
||
var point = document.createElement("div");
|
||
point.className = 'point';
|
||
|
||
el.appendChild(point);
|
||
el.setAttribute("data-caseId", UAVInfo[i].info.id);
|
||
|
||
var uavimg = document.createElement("div");
|
||
// uavimg.className="UAVImg";
|
||
|
||
var uavimgCon = document.createElement("div");
|
||
uavimgCon.className = "uavimgCon";
|
||
|
||
uavimgCon.appendChild(el);
|
||
uavimgCon.append(uavimg);
|
||
|
||
el.className = "uavmarker";
|
||
$(document).on("click", '.uavmarker', function (e) {
|
||
console.log($(this).attr("data-caseId"))
|
||
var caseid = $(this).attr("data-caseId")
|
||
var IMAGE_BASE_URL = "http://60.213.14.14:6070";
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
data: { id: caseid },
|
||
async: false,
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
if (data.code == 200) {
|
||
$('.caseinfoNo').text(data.result.info.case_no);
|
||
$('.caseinfoDesc').text(data.result.info.case_description);
|
||
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
|
||
$('.caseinfoType').text(data.result.info.typename);
|
||
$('.caseinfoMarker').text(data.result.info.remark);
|
||
$(".caseinfoAddress").text(data.result.info.address);
|
||
$(".caseinfoTime").text(data.result.info.createtime);
|
||
$(".caseinfoArea").text(data.result.info.area);
|
||
$(".caseinfoImages").empty();
|
||
for (var i = 0; i < data.result.pic_list.length; i++) {
|
||
var url = IMAGE_BASE_URL + "/" + data.result.pic_list[i];
|
||
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_list[i] + "' class='caseInfoImg' data-imgSrc='" + url + "' style='width:230px;height:100px;margin-right:15px;'/>";
|
||
$(".caseinfoImages").append(appendStr);
|
||
}
|
||
getkmcamera(data.result)
|
||
}
|
||
$(".caseInfoImg").click(function () {
|
||
$(".imgContainers").empty();
|
||
$(".imgDetail").show()
|
||
$(".imgDetail").css({ "display": "flex" });
|
||
var imgPath = $(this).attr("data-imgSrc");
|
||
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
|
||
$(".imgContainers").append(appendStrPath);
|
||
})
|
||
}
|
||
});
|
||
//console.log($(this).attr("data-caseId"));
|
||
$('.bgPop2,.pop2').show();
|
||
})
|
||
// document.getElementsByClassName('uavmarker').addEventListener('click', (e) => {
|
||
// // console.log(e.path[1].getAttribute("data-caseId"));
|
||
// console.log(e)
|
||
// console.log($(this))
|
||
// console.log($(this).getAttribute("data-caseId"))
|
||
// // window.alert(marker.properties.message);
|
||
// var IMAGE_BASE_URL = "http://60.213.14.14:6070";
|
||
// $.ajax({
|
||
// type: "GET",
|
||
// url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
|
||
// dataType: "json",
|
||
// headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
// data: { id: e.path[1].getAttribute("data-caseId") },
|
||
// async: false,
|
||
// beforeSend: function (xhr) { },
|
||
// success: function (data) {
|
||
// if (data.code == 200) {
|
||
// $('.caseinfoNo').text(data.result.info.case_no);
|
||
// $('.caseinfoDesc').text(data.result.info.case_description);
|
||
// $('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
|
||
// $('.caseinfoType').text(data.result.info.typename);
|
||
// $('.caseinfoMarker').text(data.result.info.remark);
|
||
// $(".caseinfoAddress").text(data.result.info.address);
|
||
// $(".caseinfoTime").text(data.result.info.createtime);
|
||
// $(".caseinfoArea").text(data.result.info.area);
|
||
// $(".caseinfoImages").empty();
|
||
// for (var i = 0; i < data.result.pic_list.length; i++) {
|
||
// var url = IMAGE_BASE_URL + "/" + data.result.pic_list[i];
|
||
// var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_list[i] + "' class='caseInfoImg' data-imgSrc='" + url + "' style='width:230px;height:100px;margin-right:15px;'/>";
|
||
// $(".caseinfoImages").append(appendStr);
|
||
// }
|
||
// }
|
||
// $(".caseInfoImg").click(function () {
|
||
// $(".imgContainers").empty();
|
||
// $(".imgDetail").show()
|
||
// $(".imgDetail").css({ "display": "flex" });
|
||
// var imgPath = $(this).attr("data-imgSrc");
|
||
// var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
|
||
// $(".imgContainers").append(appendStrPath);
|
||
// })
|
||
// }
|
||
// });
|
||
// //console.log($(this).attr("data-caseId"));
|
||
// $('.bgPop2,.pop2').show();
|
||
// });
|
||
console.log(UAVInfo[i])
|
||
var coordinate = [UAVInfo[i].lng, UAVInfo[i].lat];
|
||
// var UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate).addTo(map);
|
||
var UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
|
||
|
||
// var UAVmarker2 = new mapboxgl.Marker(uavimgCon).setLngLat([117.72339712649222,35.05450202665419]).addTo(map);
|
||
window.UAVMarkerArray.push(UAVmarker);
|
||
|
||
for (var i = 0; i < window.UAVMarkerArray.length; i++) {
|
||
window.UAVMarkerArray[i].addTo(map);
|
||
}
|
||
|
||
// console.log(UAVMarkerArray);
|
||
|
||
}
|
||
}
|
||
function loadNewestReportPoint() {
|
||
// console.log("load++");
|
||
// 加载最新数据
|
||
loadMainMap();
|
||
|
||
if (newestCountMarkerArray.length > 0) {
|
||
for (var i = 0; i < newestCountMarkerArray.length; i++) {
|
||
newestCountMarkerArray[i].remove(map);
|
||
}
|
||
}
|
||
|
||
if (historyCountMarkerArray.length > 0) {
|
||
for (var i = 0; i < historyCountMarkerArray.length; i++) {
|
||
historyCountMarkerArray[i].remove(map);
|
||
}
|
||
}
|
||
|
||
newestCountMarkerArray = [];
|
||
historyCountMarkerArray = [];
|
||
|
||
// console.log("townshipCaseCount111",townshipCaseCount);
|
||
let townships = [
|
||
{
|
||
name: "临沭县",
|
||
coordinate: [118.648379,34.917062]
|
||
}, {
|
||
name: "郯城县",
|
||
coordinate: [118.342963,34.614741],
|
||
}, {
|
||
name: "费县",
|
||
coordinate: [117.968869,35.269174],
|
||
}, {
|
||
name: "河东区",
|
||
coordinate: [118.398296,35.085004],
|
||
}, {
|
||
name: "兰山区",
|
||
coordinate: [118.327667,35.061631],
|
||
}, {
|
||
name: "罗庄区",
|
||
coordinate: [118.284795,34.997204],
|
||
}, {
|
||
name: "沂南县",
|
||
coordinate: [118.455395,35.547002],
|
||
}, {
|
||
name: "沂水县",
|
||
coordinate: [118.634543,35.787029],
|
||
}, {
|
||
name: "兰陵县",
|
||
coordinate: [118.049968,34.855573],
|
||
}, {
|
||
name: "平邑县",
|
||
coordinate: [117.631884,35.511519],
|
||
}, {
|
||
name: "莒南县",
|
||
coordinate: [118.838322,35.175911],
|
||
}, {
|
||
name: "蒙阴县",
|
||
coordinate: [117.943271,35.712435],
|
||
}
|
||
];
|
||
|
||
for (var j = 0; j < townships.length; j++) {
|
||
var arr = townshipCaseCount.filter((item, index) => {
|
||
// console.log(item.name);
|
||
if (item.name == townships[j].name) {
|
||
townships[j].newestCount = item.todayCount;
|
||
townships[j].historyCount = item.historyCount;
|
||
}
|
||
return item.name == townships[j].name;
|
||
})
|
||
}
|
||
|
||
for (var t = 0; t < townships.length; t++) {
|
||
var townshipContainer = document.createElement('div');
|
||
townshipContainer.className = 'townshipParent';
|
||
|
||
|
||
var townshipChildren = document.createElement("div");
|
||
townshipChildren.className = 'townshipChildren';
|
||
|
||
var townshipName = document.createElement("div");
|
||
townshipName.className = 'townshipName';
|
||
var mytext = document.createTextNode("历史图斑：" + townships[t].historyCount);
|
||
townshipName.appendChild(mytext);
|
||
|
||
|
||
townshipChildren.appendChild(townshipName);
|
||
townshipContainer.appendChild(townshipChildren);
|
||
|
||
var township = new mapboxgl.Marker(townshipContainer).setLngLat([townships[t].coordinate[0], townships[t].coordinate[1] - 0.001]);
|
||
historyCountMarkerArray.push(township);
|
||
|
||
}
|
||
|
||
for (var t = 0; t < townships.length; t++) {
|
||
var newestParent = document.createElement('div');
|
||
newestParent.className = 'newestParent';
|
||
|
||
|
||
var newestChildren = document.createElement("div");
|
||
newestChildren.className = 'newestChildren';
|
||
|
||
var newestName = document.createElement("div");
|
||
newestName.className = 'newestName';
|
||
var mytext = document.createTextNode("最新图斑：" + townships[t].newestCount);
|
||
newestName.appendChild(mytext);
|
||
|
||
|
||
newestChildren.appendChild(newestName);
|
||
newestParent.appendChild(newestChildren);
|
||
|
||
|
||
var township = new mapboxgl.Marker(newestParent).setLngLat([townships[t].coordinate[0], townships[t].coordinate[1]]);
|
||
|
||
newestCountMarkerArray.push(township);
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
function loadDroneMarker() {
|
||
if (DroneMarkerArray.length > 0) {
|
||
for (var i = 0; i < DroneMarkerArray.length; i++) {
|
||
DroneMarkerArray[i].remove(map);
|
||
}
|
||
}
|
||
DroneMarkerArray = [];
|
||
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneLocationPointsFalse",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
async: false,
|
||
data: {},
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
if (data.code == 200) {
|
||
let results = data.result;
|
||
for (var i = 0; i < results.length; i++) {
|
||
var el = document.createElement('div');
|
||
el.className = 'marker';
|
||
el.style.backgroundSize = '100%';
|
||
|
||
var point = document.createElement("div");
|
||
point.className = 'point';
|
||
|
||
el.appendChild(point);
|
||
// el.setAttribute("data-caseId",UAVInfo[i].info.id);
|
||
|
||
var uavimg = document.createElement("div");
|
||
// uavimg.className="UAVImg";
|
||
|
||
var uavimgCon = document.createElement("div");
|
||
uavimgCon.className = "uavimgCon";
|
||
|
||
uavimgCon.appendChild(el);
|
||
uavimgCon.append(uavimg);
|
||
|
||
el.className = "uavmarker";
|
||
|
||
var coordinate = results[i].point[0].point.split(",");
|
||
console.log("coordinate", coordinate);
|
||
var DroneMarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate).addTo(map);
|
||
DroneMarkerArray.push(DroneMarkerArray);
|
||
// var DroneMarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
|
||
|
||
// var UAVmarker2 = new mapboxgl.Marker(uavimgCon).setLngLat([117.72339712649222,35.05450202665419]).addTo(map);
|
||
// DroneMarkerArray.push(DroneMarker);
|
||
|
||
// for(var i=0;i<DroneMarkerArray.length;i++){
|
||
// DroneMarkerArray[i].addTo(map);
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
map.on('load', function () {
|
||
// loadLastReportPoint(news_report[0].id, true);
|
||
|
||
loadNewestReportPoint();
|
||
|
||
// loadDroneMarker();
|
||
// 马庄镇
|
||
// var data = {
|
||
// "account": "17853305026",
|
||
// "createtime": "2023-11-08 09:58:16",
|
||
// "height": 185,
|
||
// "ip": "192.168.10.101",
|
||
// "lat": 35.104007,
|
||
// "lng": 118.01002,
|
||
// "model": "airPlaneModel"
|
||
// }
|
||
// loadUAVBox(data)
|
||
|
||
map.loadImage(
|
||
'images/position.png',
|
||
(error, image) => {
|
||
if (error) throw error;
|
||
|
||
// Add the image to the map style.
|
||
map.addImage('cat', image);
|
||
}
|
||
);
|
||
map.loadImage(
|
||
'images/history.png',
|
||
(error, image) => {
|
||
if (error) throw error;
|
||
|
||
// Add the image to the map style.
|
||
map.addImage('history-icon', image);
|
||
}
|
||
);
|
||
map.loadImage(
|
||
'images/unmanned.png',
|
||
(error, image) => {
|
||
if (error) throw error;
|
||
|
||
// Add the image to the map style.
|
||
map.addImage('uav-icon', image);
|
||
}
|
||
);
|
||
map.loadImage(
|
||
'images/camera.png',
|
||
(error, image) => {
|
||
if (error) throw error;
|
||
|
||
// Add the image to the map style.
|
||
map.addImage('monitor-icon', image);
|
||
}
|
||
);
|
||
// 背景图层
|
||
map.addLayer({
|
||
"id": "background-id", // 唯一 id （必填）
|
||
"type": "background", // 类型（必填）
|
||
"minzoom": 0, // 最小层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 小于此 minzoom 时，layer 将被隐藏）
|
||
"maxzoom": 24, // 最大层级（可选，取值范围为 0 ~ 24。当 style 的 zoom 大于此 maxzoom 时，layer 将被隐藏）
|
||
"paint": { // 绘制类属性
|
||
"background-color": "#0B122E", // 背景颜色（可选，默认值为 #000000。如果设置了 background-pattern，则 background-color 将无效）
|
||
"background-opacity": 1 // 背景不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
|
||
}
|
||
}
|
||
);
|
||
map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 4 });
|
||
|
||
//卫星地图
|
||
map.addLayer({
|
||
'id': 'weixingditu',
|
||
'type': 'raster',
|
||
'source': {
|
||
"type": "raster",
|
||
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=ff98577d147820843ec2d04da3c5bad4'],
|
||
"tileSize": 256,
|
||
},
|
||
'paint': {
|
||
|
||
},
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
"metadata": {
|
||
"zIndex": 1
|
||
}
|
||
});
|
||
// 添加影像图
|
||
map.addLayer({
|
||
'id': 'yingxiang',
|
||
'type': 'raster',
|
||
'source': {
|
||
"type": "raster",
|
||
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=ff98577d147820843ec2d04da3c5bad4'],
|
||
"tileSize": 256,
|
||
},
|
||
'paint': {
|
||
|
||
},
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
"metadata": {
|
||
"zIndex": 2
|
||
}
|
||
});
|
||
|
||
// 县界图层
|
||
map.addLayer({
|
||
'id': 'countyLayer',
|
||
'type': 'fill',
|
||
'source': {
|
||
'type': 'geojson',
|
||
'data': countygeojson,
|
||
},
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
'paint': {
|
||
'fill-color': "#1f3cb1",
|
||
'fill-opacity': 0.8,
|
||
},
|
||
"metadata": {
|
||
"zIndex": 3
|
||
}
|
||
});
|
||
|
||
// 镇界图层面
|
||
map.addSource("townshipSource", {
|
||
'type': 'geojson',
|
||
'data': xianjie
|
||
});
|
||
map.addSource("townshipSource1", {
|
||
'type': 'geojson',
|
||
'data': xianjie
|
||
});
|
||
map.addLayer({
|
||
'id': 'townshipLayer',
|
||
'type': 'fill',
|
||
'source': 'townshipSource',
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
'paint': {
|
||
'fill-color': colorSelect,
|
||
'fill-opacity': 1,
|
||
}
|
||
});
|
||
|
||
|
||
// 镇界图层线
|
||
map.addLayer({
|
||
'id': 'townshipLayerLine',
|
||
'type': 'line',
|
||
'source': 'townshipSource',
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
'paint': {
|
||
'line-color': "#3f52be",
|
||
'line-width': 1,
|
||
// 'line-pattern':1
|
||
}
|
||
});
|
||
|
||
|
||
|
||
map.addSource("states", {
|
||
"type": "geojson",
|
||
"data": xianjie
|
||
});
|
||
|
||
// The feature-state dependent fill-opacity expression will render the hover effect
|
||
// when a feature's hover state is set to true.
|
||
map.addLayer({
|
||
"id": "state-fills",
|
||
"type": "fill",
|
||
"source": "states",
|
||
"layout": {},
|
||
"paint": {
|
||
"fill-color": colorSelect,
|
||
"fill-opacity": ["case",
|
||
["boolean", ["feature-state", "hover"], false],
|
||
1,
|
||
0.6
|
||
]
|
||
}
|
||
});
|
||
|
||
// 村界
|
||
map.addLayer({
|
||
'id': 'villageLayer',
|
||
'type': 'fill',
|
||
'source': {
|
||
'type': 'geojson',
|
||
'data': villageGeoJson
|
||
},
|
||
'layout': {
|
||
"visibility": "none"
|
||
},
|
||
'paint': {
|
||
'fill-color': [
|
||
'interpolate',
|
||
['linear'],
|
||
['get', 'OBJECTID'],
|
||
0,
|
||
'#0234fb',
|
||
3,
|
||
'#0937ef',
|
||
6,
|
||
'#0f39e2',
|
||
9,
|
||
'#143ad4',
|
||
12,
|
||
'#1a3abd',
|
||
15,
|
||
'#1f3cb1',
|
||
18,
|
||
'#233b9e',
|
||
21,
|
||
'#364686',
|
||
24,
|
||
'#6e81ca',
|
||
27,
|
||
'#0234fb',
|
||
30,
|
||
'#0937ef',
|
||
33,
|
||
'#0f39e2',
|
||
36,
|
||
'#143ad4',
|
||
39,
|
||
'#1a3abd',
|
||
42,
|
||
'#1f3cb1',
|
||
45,
|
||
'#233b9e',
|
||
48,
|
||
'#364686',
|
||
51,
|
||
'#6e81ca'
|
||
],
|
||
'fill-opacity': 1,
|
||
}
|
||
});
|
||
// 历史图斑数量
|
||
map.addLayer({
|
||
id: `historyCaseLayer`,
|
||
type: 'symbol',
|
||
source: 'townshipSource',
|
||
filter: ['!', ['has', 'point_count']],
|
||
layout: {
|
||
'icon-image': '',
|
||
visibility: 'none',
|
||
'text-field': '历史图斑：{count}',//此属性为需要显示的字段
|
||
'text-size': 12,
|
||
'text-offset': [0, 1],
|
||
'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。
|
||
'text-anchor': 'top',
|
||
|
||
},
|
||
paint: {
|
||
// 绘制类属性
|
||
// 文本类属性（需要设置 text-field）样式才生效
|
||
'text-color': '#ffffff', // 文本的颜色
|
||
'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]
|
||
'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
|
||
},
|
||
})
|
||
// 最新图斑数量
|
||
map.addLayer({
|
||
id: `newCaseLayer`,
|
||
type: 'symbol',
|
||
source: 'townshipSource',
|
||
filter: ['!', ['has', 'point_count']],
|
||
layout: {
|
||
'icon-image': '',
|
||
visibility: 'none',
|
||
'text-field': '最新图斑：{newestCount}',//此属性为需要显示的字段
|
||
'text-size': 12,
|
||
'text-offset': [0, -1],
|
||
'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。
|
||
'text-anchor': 'top',
|
||
|
||
},
|
||
paint: {
|
||
// 绘制类属性
|
||
// 文本类属性（需要设置 text-field）样式才生效
|
||
'text-color': '#ffffff', // 文本的颜色
|
||
'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]
|
||
'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
|
||
|
||
},
|
||
})
|
||
|
||
// 监控图层
|
||
map.addLayer({
|
||
"id": "monitorLayer",
|
||
"type": "symbol",
|
||
"source": {
|
||
"type": "geojson",
|
||
"data": {
|
||
"type": "FeatureCollection",
|
||
"features": [{
|
||
"type": "Feature",
|
||
"geometry": {
|
||
"type": "Point",
|
||
"coordinates": [117.7917792737033, 35.13858050971585]
|
||
}
|
||
}, {
|
||
"type": "Feature",
|
||
"geometry": {
|
||
"type": "Point",
|
||
"coordinates": [117.72339712649222, 35.05450202665419]
|
||
}
|
||
}, {
|
||
"type": "Feature",
|
||
"geometry": {
|
||
"type": "Point",
|
||
"coordinates": [117.95926374172524, 35.08209724883]
|
||
}
|
||
}]
|
||
}
|
||
},
|
||
"layout": {
|
||
"visibility": "none",
|
||
"icon-image": "monitor-icon"
|
||
}
|
||
});
|
||
// 监控图层
|
||
map.addLayer({
|
||
"id": "monitorTwoLayer",
|
||
"type": "symbol",
|
||
"source": {
|
||
"type": "geojson",
|
||
// "data": shexiangtouJSON
|
||
"data": jiankongJson
|
||
},
|
||
"layout": {
|
||
"visibility": "none",
|
||
"icon-image": "monitor-icon"
|
||
}
|
||
});
|
||
// 无人机
|
||
map.addLayer({
|
||
"id": "UAVView",
|
||
"type": "symbol",
|
||
"source": {
|
||
"type": "geojson",
|
||
"data": {
|
||
"type": "FeatureCollection",
|
||
// "features": [{
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.130002, 35.264007]
|
||
// }
|
||
// }, {
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.01002, 35.104007]
|
||
// }
|
||
// }, {
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.030002, 35.204007]
|
||
// }
|
||
// }]
|
||
features: []
|
||
}
|
||
},
|
||
"layout": {
|
||
"visibility": "none",
|
||
"icon-image": "monitor-icon"
|
||
}
|
||
});
|
||
|
||
// 无人机图层
|
||
// map.addLayer({
|
||
// "id": "uavLayer1",
|
||
// "type": "symbol",
|
||
// "source": {
|
||
// "type": "geojson",
|
||
// "data": {
|
||
// "type": "FeatureCollection",
|
||
// "features": [{
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.130002, 35.264007]
|
||
// }
|
||
// },{
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.01002, 35.104007]
|
||
// }
|
||
// },{
|
||
// "type": "Feature",
|
||
// "geometry": {
|
||
// "type": "Point",
|
||
// "coordinates": [118.030002, 35.204007]
|
||
// }
|
||
// }]
|
||
// }
|
||
// },
|
||
// "layout": {
|
||
// "visibility":"none",
|
||
// "icon-image": "pulsing-dot"
|
||
// }
|
||
// });
|
||
|
||
|
||
// $.ajax({
|
||
// type: "GET",
|
||
// url: BASE_URL + "/api/DroneScreenDisplay/GetDroneLocationPointsFalse",
|
||
// dataType: "json",
|
||
// async:false,
|
||
// data:{},
|
||
// beforeSend: function(xhr) {},
|
||
// success: function(data){
|
||
// let UAVArray = [];
|
||
// data.result.forEach(function(item,index){
|
||
// let UAVObj = {
|
||
// marker: new mapboxgl.Marker(),
|
||
// UAVFly:function(lng,lat){
|
||
// this.marker.setLngLat([lng,lat]).addTo(map)
|
||
// }
|
||
// }
|
||
|
||
// UAVArray[index] = marker;
|
||
// })
|
||
// }
|
||
// });
|
||
|
||
|
||
// 最新上报图层
|
||
//最新上报
|
||
var newsReportData = [];
|
||
var newsReportDataGeoJson = [];
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/LoadDroneCase",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
async: false,
|
||
data: {},
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
newsReportData = data.result;
|
||
newsReportData.forEach(function (item, index) {
|
||
if (item.lng && item.lat) {
|
||
var reportCase = {
|
||
"id": item.id,
|
||
"type": "Feature",
|
||
"geometry": {
|
||
"type": "Point",
|
||
"coordinates": [item.lng, item.lat],
|
||
},
|
||
"properties": {
|
||
"id": item.id
|
||
},
|
||
}
|
||
// newsReportDataGeoJson.features.push(reportCase);
|
||
var uavimg = document.createElement("div");
|
||
uavimg.className = "POSIRIONImg";
|
||
var uavimgCon = document.createElement("div");
|
||
uavimgCon.className = "uavimgCon";
|
||
uavimgCon.append(uavimg);
|
||
var coordinate = [item.lng, item.lat];
|
||
// var UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate).addTo(map);
|
||
var UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
|
||
newsReportDataGeoJson.push(UAVmarker);
|
||
newsReportDataGeoJsonArr.push(UAVmarker)
|
||
}
|
||
if (index == newsReportData.length - 1) {
|
||
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
});
|
||
newsReportDataGeoJsonArr.forEach(item => {
|
||
// item.addTo(map);
|
||
})
|
||
// map.addLayer({
|
||
// "id": "newCaseLayer",
|
||
// "type": "symbol",
|
||
// "source": {
|
||
// "type":"geojson",
|
||
// "data":newsReportDataGeoJson
|
||
// },
|
||
// "layout": {
|
||
// "visibility":"none",
|
||
// "icon-image": "cat"
|
||
// }
|
||
// });
|
||
//历史图斑
|
||
function getPolygonCenter(pList) { //获取多边形中心点
|
||
var area = 0;
|
||
var x = 0;
|
||
var y = 0;
|
||
for (var i = 1; i <= pList.length; i++) {
|
||
var lat = pList[i % pList.length][0];
|
||
var lng = pList[i % pList.length][1];
|
||
var nextLat = pList[i - 1][0];
|
||
var nextLng = pList[i - 1][1];
|
||
var temp = (lat * nextLng - lng * nextLat) / 2;
|
||
area += temp;
|
||
x += (temp * (lat + nextLat)) / 3;
|
||
y += (temp * (lng + nextLng)) / 3;
|
||
}
|
||
x = x / area;
|
||
y = y / area;
|
||
return [x, y];
|
||
};
|
||
var historyCaseGeoJson = {};
|
||
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "http://175.27.168.120:8080/geoserver/hangfei/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hangfei%3Aanjianjilu&maxFeatures=1000000000&outputFormat=application%2Fjson",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
async: false,
|
||
data: {},
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
data.features.forEach(function (item, index) {
|
||
// data.features[index].geometry.type="Point";
|
||
// data.features[index].geometry.coordinates=getPolygonCenter(item.geometry.coordinates[0][0]);
|
||
var uavimg = document.createElement("div");
|
||
uavimg.className = "HISTORyImg";
|
||
var uavimgCon = document.createElement("div");
|
||
uavimgCon.className = "uavimgCon";
|
||
uavimgCon.append(uavimg);
|
||
var coordinate = getPolygonCenter(item.geometry.coordinates[0][0])
|
||
var UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
|
||
historyCaseGeoJsonArr.push(UAVmarker);
|
||
})
|
||
historyCaseGeoJson = data;
|
||
//console.log(data);
|
||
// getPolygonCenter(data.features.geometry.coordinates[0][0])
|
||
}
|
||
});
|
||
// map.addLayer({
|
||
// "id": "historyCaseLayer",
|
||
// "type": "symbol",
|
||
// "source": {
|
||
// "type": "geojson",
|
||
// "data": historyCaseGeoJson,
|
||
// },
|
||
// "layout": {
|
||
// "visibility":"none",
|
||
// "icon-image": "history-icon"
|
||
// }
|
||
// });
|
||
|
||
|
||
|
||
|
||
// map.addLayer({
|
||
// "id": "state-borders",
|
||
// "type": "line",
|
||
// "source": "states",
|
||
// "layout": {},
|
||
// "paint": {
|
||
// "line-color": "#627BC1",
|
||
// "line-width": 2
|
||
// }
|
||
// });
|
||
|
||
// map.addSource('wms-test-source', {
|
||
// 'type': 'raster',
|
||
// // use the tiles option to specify a WMS tile source URL
|
||
// // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
|
||
// 'tiles': [
|
||
// 'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian%3Ayingxiang&bbox=581713.2990911475%2C3882682.1443521073%2C610409.5371911475%2C3916536.5138721075&width=650&height=768&srs=EPSG%3A4509&format=application/openlayers'
|
||
// ],
|
||
// 'tileSize': 256
|
||
// });
|
||
// map.addLayer(
|
||
// {
|
||
// 'id': 'wms-test-layer',
|
||
// 'type': 'raster',
|
||
// 'source': 'wms-test-source',
|
||
// 'paint': {}
|
||
// },
|
||
// // 'aeroway-line'
|
||
// );
|
||
|
||
|
||
var popup = new mapboxgl.Popup({
|
||
closeButton: false,
|
||
closeOnClick: false,
|
||
|
||
});
|
||
|
||
map.on('mousemove', 'townshipLayer', (e) => {
|
||
// e.preventDefault();
|
||
console.log(e)
|
||
map.getCanvas().style.cursor = 'pointer';
|
||
// var coordinates = e.features[0].geometry.coordinates.slice();
|
||
// const description = e.features[0].properties.description;
|
||
var townshipInfo = townshipCaseCount.filter(item => {
|
||
return item.name == e.features[0].properties.XZQMC;
|
||
})
|
||
|
||
var str = "乡镇名称：" + e.features[0].properties.XZQMC + "<br> <br>图斑数量：" + townshipInfo[0].reportCount;
|
||
popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(map);
|
||
|
||
});
|
||
|
||
var hoveredStateId = null;
|
||
map.on("click", function (e) {
|
||
// console.log(e);
|
||
})
|
||
map.on("mousemove", "townshipLayer", function (e) {
|
||
if (e.features.length > 0) {
|
||
if (hoveredStateId) {
|
||
map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: false });
|
||
}
|
||
hoveredStateId = e.features[0].id;
|
||
map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: true });
|
||
}
|
||
});
|
||
|
||
// When the mouse leaves the state-fill layer, update the feature state of the
|
||
// previously hovered feature.
|
||
map.on("mouseleave", "townshipLayer", function () {
|
||
if (hoveredStateId) {
|
||
map.setFeatureState({ source: 'townshipSource', id: hoveredStateId }, { hover: false });
|
||
}
|
||
hoveredStateId = null;
|
||
});
|
||
|
||
|
||
|
||
map.on("click", "townshipLayer", (e) => {
|
||
//console.log(e.lngLat.lng,e.lngLat.lat);
|
||
})
|
||
|
||
map.on("click", "historyCaseLayer", (e) => {
|
||
|
||
var currentHistoryCaseId = e.features[0].properties.Id;
|
||
//console.log(currentHistoryCaseId);
|
||
|
||
})
|
||
|
||
|
||
map.on("mousemove", "state-fills", function (e) {
|
||
map.getCanvas().style.cursor = 'pointer';
|
||
|
||
|
||
var townshipInfo = townshipCaseCount.filter(item => {
|
||
return item.name == e.features[0].properties.name;
|
||
})
|
||
|
||
let jrajs = townshipInfo[0].todayCount || ''
|
||
let lsajs = townshipInfo[0].historyCount || ''
|
||
var str = "区域名称：" + e.features[0].properties.name + "<br> <br>图斑数量：" + townshipInfo[0].reportCount;
|
||
popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(map);
|
||
|
||
if (e.features.length > 0) {
|
||
if (hoveredStateId) {
|
||
map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
|
||
}
|
||
hoveredStateId = e.features[0].id;
|
||
map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: true });
|
||
}
|
||
});
|
||
|
||
// When the mouse leaves the state-fill layer, update the feature state of the
|
||
// previously hovered feature.
|
||
map.on("mouseleave", "state-fills", function () {
|
||
if (hoveredStateId) {
|
||
map.setFeatureState({ source: 'states', id: hoveredStateId }, { hover: false });
|
||
}
|
||
hoveredStateId = null;
|
||
popup.remove();
|
||
});
|
||
|
||
map.on("click", "newCaseLayer", (e) => {
|
||
// //console.log("helloVue",e.features[0]);
|
||
var currentHistoryCaseId = e.features[0].properties.id;
|
||
$.ajax({
|
||
type: "GET",
|
||
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
|
||
dataType: "json",
|
||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||
data: { id: currentHistoryCaseId },
|
||
async: false,
|
||
beforeSend: function (xhr) { },
|
||
success: function (data) {
|
||
if (data.code == 200) {
|
||
$('.caseinfoNo').text(data.result.info.case_no);
|
||
$('.caseinfoDesc').text(data.result.info.case_description);
|
||
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
|
||
$('.caseinfoType').text(data.result.info.typename);
|
||
$('.caseinfoMarker').text(data.result.info.remark);
|
||
$(".caseinfoAddress").text(data.result.info.address);
|
||
$(".caseinfoTime").text(data.result.info.createtime);
|
||
$(".caseinfoArea").text(data.result.info.area);
|
||
$(".caseinfoImages").empty();
|
||
for (var i = 0; i < data.result.pic_list.length; i++) {
|
||
var appendStr = "<img src='" + IMAGE_BASE_URL + "/" + data.result.pic_list[i] + "' class='caseInfoImg' style='width:230px;height:100px;margin-right:15px;'/>";
|
||
$(".caseinfoImages").append(appendStr);
|
||
}
|
||
}
|
||
$(".caseInfoImg").click(function () {
|
||
$(".imgContainers").empty();
|
||
$(".imgDetail").show()
|
||
$(".imgDetail").css({ "display": "flex" });
|
||
var imgPath = $(this).context.currentSrc
|
||
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
|
||
$(".imgContainers").append(appendStrPath);
|
||
})
|
||
}
|
||
});
|
||
$('.bgPop2,.pop2').show();
|
||
})
|
||
map.on("click", "monitorTwoLayer", (e) => {
|
||
// cameraindexcode 监控ID；channelno 设备通道；
|
||
console.log(e.features[0].properties)
|
||
$('.bgPop4,.pop4').show();
|
||
vm.iframeVisble = true
|
||
localStorage.setItem("monitorTwoLayerData", JSON.stringify(e.features[0].properties))
|
||
child.window.childFunction();
|
||
})
|
||
map.on('click', 'markerId', (e) => {
|
||
console.log(e.features[0].properties)
|
||
|
||
})
|
||
map.on("click", "UAVLayer", (e) => {
|
||
$('.bgPop5,.pop5').show();
|
||
})
|
||
});
|
||
|
||
|
||
var myWebSocket2 = null;
|
||
var lockReconnect2 = false
|
||
var myWebSocketTimer2 = null;
|
||
|
||
function websocketReconnect2() {
|
||
if (lockReconnect2) { // 是否已经执行重连
|
||
return;
|
||
};
|
||
lockReconnect2 = true;
|
||
// 没连接上会一直重连，设置延迟避免请求过多
|
||
var tt = null;
|
||
tt && clearTimeout(tt);
|
||
|
||
var _this = this;
|
||
tt = setTimeout(function () {
|
||
initWebSocket2();
|
||
lockReconnect2 = false;
|
||
// console.log("正在发起2次WebSocket重连")
|
||
}, 5000)
|
||
}
|
||
|
||
|
||
|
||
for (var i = 0; i < $(".center_top_con_but").length; i++) {
|
||
if ($(".center_top_con_but").eq(i).attr("data-isActive") == "true") {
|
||
$(".center_top_con_but").eq(i).css({ "color": "#FFF71E" });
|
||
}
|
||
}
|
||
|
||
$(".center_top_con_but").click(function () {
|
||
var layerName = $(this).attr("data-layerName");
|
||
var isActive = $(this).attr("data-isActive");
|
||
|
||
if (layerName == "uavLayer") {
|
||
if (isActive == 'true') {
|
||
for (var i = 0; i < window.UAVMarkerArray.length; i++) {
|
||
window.UAVMarkerArray[i].remove(map);
|
||
}
|
||
$(this).attr("data-isActive", "false");
|
||
$(this).css({ color: "#fff" });
|
||
$(this).find(".centerimg").show()
|
||
$(this).find(".centerimgActive").hide()
|
||
if (getUAVMarkersTimer) {
|
||
clearInterval(getUAVMarkersTimer);
|
||
getUAVMarkersTimer = null;
|
||
}
|
||
} else {
|
||
for (var i = 0; i < window.UAVMarkerArray.length; i++) {
|
||
window.UAVMarkerArray[i].addTo(map);
|
||
}
|
||
$(this).css({ "color": "#FFF71E" });
|
||
$(this).attr("data-isActive", "true");
|
||
$(this).find(".centerimg").hide()
|
||
$(this).find(".centerimgActive").show()
|
||
}
|
||
return;
|
||
}
|
||
if (layerName == "newCaseLayer") {
|
||
|
||
if (isActive == 'true') {
|
||
newestCountMarkerArray.forEach(item => {
|
||
item.remove(map);
|
||
})
|
||
$(this).attr("data-isActive", "false");
|
||
$(this).css({ color: "#fff" });
|
||
$(this).find(".centerimg").show()
|
||
$(this).find(".centerimgActive").hide()
|
||
|
||
|
||
} else {
|
||
if ($(".historyCaseLayer").attr("data-isActive") == "true") {
|
||
|
||
historyCountMarkerArray.forEach(item => {
|
||
item.remove(map);
|
||
})
|
||
$(".historyCaseLayer").attr("data-isActive", "false");
|
||
$(".historyCaseLayer").css({ color: "#fff" });
|
||
$(".historyCaseLayer").find(".centerimg").show()
|
||
$(".historyCaseLayer").find(".centerimgActive").hide()
|
||
}
|
||
loadNewestReportPoint();
|
||
|
||
newestCountMarkerArray.forEach(item => {
|
||
item.addTo(map);
|
||
})
|
||
$(this).css({ "color": "#FFF71E" });
|
||
$(this).attr("data-isActive", "true");
|
||
$(this).find(".centerimg").hide()
|
||
$(this).find(".centerimgActive").show()
|
||
}
|
||
return;
|
||
}
|
||
|
||
|
||
if (layerName == "historyCaseLayer") {
|
||
if (isActive == 'true') {
|
||
historyCountMarkerArray.forEach(item => {
|
||
item.remove(map);
|
||
})
|
||
$(this).attr("data-isActive", "false");
|
||
$(this).css({ color: "#fff" });
|
||
$(this).find(".centerimg").show()
|
||
$(this).find(".centerimgActive").hide()
|
||
} else {
|
||
loadNewestReportPoint();
|
||
if ($(".newCaseLayer").attr("data-isActive") == "true") {
|
||
newestCountMarkerArray.forEach(item => {
|
||
item.remove(map);
|
||
})
|
||
$(".newCaseLayer").attr("data-isActive", "false");
|
||
$(".newCaseLayer").css({ color: "#fff" });
|
||
$(".newCaseLayer").find(".centerimg").show()
|
||
$(".newCaseLayer").find(".centerimgActive").hide()
|
||
}
|
||
|
||
historyCountMarkerArray.forEach(item => {
|
||
item.addTo(map);
|
||
})
|
||
$(this).css({ "color": "#FFF71E" });
|
||
$(this).attr("data-isActive", "true");
|
||
$(this).find(".centerimg").hide()
|
||
$(this).find(".centerimgActive").show()
|
||
}
|
||
return;
|
||
}
|
||
|
||
var visibility = map.getLayoutProperty(layerName, "visibility");
|
||
if (visibility === "visible") {
|
||
map.setLayoutProperty(layerName, "visibility", "none");
|
||
$(this).css({ color: "#fff" });
|
||
$(this).find(".centerimg").show()
|
||
$(this).find(".centerimgActive").hide()
|
||
} else {
|
||
map.setLayoutProperty(layerName, "visibility", "visible");
|
||
$(this).css({ "color": "#FFF71E" });
|
||
$(this).find(".centerimg").hide()
|
||
$(this).find(".centerimgActive").show()
|
||
}
|
||
|
||
})
|
||
|
||
// })
|