From 35e4f9a2f3820790070fc253b16e3ea3a1689a22 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 20 Apr 2021 17:41:22 +0800
Subject: [PATCH] 添加左侧热力图控件
---
public/map/widgets/supervisoryMap/SupervisoryMap.js | 532 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 502 insertions(+), 30 deletions(-)
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index 4192bdc..33328be 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -191,6 +191,456 @@
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
},
entityData: [],
+ //左侧控制栏
+ analysisAddEntitys: null,
+ constructor: function (options, srcRefNode) {
+ this._map = options.map;
+ objThis = this;
+
+
+ this.analysisAddEntitys = new GraphicsLayer({ id: 'analysisAddEntitys' });
+ // this.addOneEntitys = new GraphicsLayer({ id: 'addOneEntitys' });
+ // this.addTwoEntitys = new GraphicsLayer({ id: 'addTwoEntitys' });
+ // this.addThreeEntitys = new GraphicsLayer({ id: 'addThreeEntitys' });
+
+ this._map.addLayer(this.analysisAddEntitys);
+ this._map.addLayer(this.addOneEntitys);
+ },
+ startup: function () {
+ objThis._map.addLayer(objThis._siteLayer);
+ var that = this;
+ that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'),'');
+ // 顶部tab得切换事件
+ $('.analysis-and-judgment-tab li').click(function () {
+ // if (that.tabIndex == $(this).index()) return;
+ // if ($(this).index() == 1) { return };
+ // if ($(this).index() == 2) { return };
+
+ if (that.entitysData.length > 0) {
+ that.analysisAddEntitys.clear();
+ that.entitysData = [];
+ }
+
+ if (that.heatmapfeatureLayer_1.graphics.length > 0) {
+ that.heatmapfeatureLayer_1.clear();
+ that.heatmapfeatureLayer_1.setRenderer();
+ $('.analysis-category input').prop('checked', false);
+ }
+
+
+ $(this).addClass('on').siblings().removeClass('on');
+ var ind = $(this).index();
+ $($('.analysis-container > div')[ind]).stop().show().siblings().stop().hide();
+ var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ if (ind == 0) {
+ that.getArea($('#policeArea'));
+ that.getPoliceTableAnalysis($($('.analysis-container > div')[ind]).find('.tbody tbody'),
+ $('#analysis_select_time_start').val() + ':00',
+ $('#analysis_select_time_end').val() + ':00', overText, levelText)
+ } else if (ind == 1) {
+ that.getOwnerType($('#ownerCategory'));
+ that.getOwnerDj($('#ownerLevel'), '');
+ that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
+ } else if (ind == 2) {
+ that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
+ }
+
+ that.tabIndex = $(this).index();
+ })
+
+ // 时间查询
+ $('#policeSelectTime').off('click').click(function () {
+
+ var times = $(this).prevAll();
+
+ layui.use('layer', function () {
+
+ var layer = layui.layer;
+ // 开始时间
+ var startTime = $(times[2]).val();
+ // 结束时间
+ var endTime = $(times[0]).val();
+
+ if (startTime == '') {
+
+ layer.msg('请选择开始时间！', {
+ icon: 5,
+ time: 2000 //2秒关闭（如果不配置，默认是3秒）
+ });
+ return;
+
+ } else {
+
+ if (endTime == '') {
+ layer.msg('请选择结束时间！', {
+ icon: 5,
+ time: 2000 //2秒关闭（如果不配置，默认是3秒）
+ });
+ return;
+ } else {
+
+ var text = $('#policeCategory div:eq(0)').text().trim();
+
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), startTime, endTime, text == '全部' ? '' : text, levelText);
+
+ }
+
+ }
+
+ })
+
+
+
+
+ })
+
+ // 警情列表中的点击事件
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-list');
+ var url = './popup/html/police-details.html?obj=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/police-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '警情详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['500px', '400px'],
+ offset: 'auto',
+ skin: 'police-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 业主列表中的点击事件
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-list');
+ var url = './popup/html/owner-details.html?id=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/owner-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '业主详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['500px', '340px'],
+ offset: 'auto',
+ skin: 'owner-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 设备列表中的点击事件
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-listid');
+ var url = './popup/html/equipment-details.html?obj=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/equipment-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '警情详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['520px', '320px'],
+ offset: 'auto',
+ skin: 'equipment-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 警情列表中得热力图是否选中事件
+ $('#policeHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 业主信息列表中得热力图是否选中事件
+ $('#ownerHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 设备信息列表的热力图是否选中事件
+ $('#equipmentHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 警情信息中类别移入事件
+ $('#policeCategory').mouseenter(function () {
+ if ($('#policeCategory .select-list').is(':hidden')) {
+ $('#policeCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 警情信息中得类别移出事件
+ $('#policeCategory').mouseleave(function () {
+ if (!$('#policeCategory .select-list').is(':hidden')) {
+ $('#policeCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 警情信息中行政区移入事件
+ $('#policeArea').mouseenter(function () {
+ if ($('#policeArea .select-list').is(':hidden')) {
+ $('#policeArea .select-list').stop().slideDown(0);
+ }
+ })
+ // 警情信息中得行政区移出事件
+ $('#policeArea').mouseleave(function () {
+ if (!$('#policeArea .select-list').is(':hidden')) {
+ $('#policeArea .select-list').stop().slideUp(0);
+ }
+ })
+ // 业主信息中类别移入事件
+ $('#ownerCategory').mouseenter(function () {
+ if ($('#ownerCategory .select-list').is(':hidden')) {
+ $('#ownerCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 业主信息中得类别移出事件
+ $('#ownerCategory').mouseleave(function () {
+ if (!$('#ownerCategory .select-list').is(':hidden')) {
+ $('#ownerCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 业主信息中的等级移入事件
+ $('#ownerLevel').mouseenter(function () {
+ if ($('#ownerLevel .select-list').is(':hidden')) {
+ $('#ownerLevel .select-list').stop().slideDown(0);
+ }
+ })
+ // 业主信息中的等级移出事件
+ $('#ownerLevel').mouseleave(function () {
+ if (!$('#ownerLevel .select-list').is(':hidden')) {
+ $('#ownerLevel .select-list').stop().slideUp(0);
+ }
+ })
+ // 设备信息中类别移入事件
+ $('#equipmentCategory').mouseenter(function () {
+ if ($('#equipmentCategory .select-list').is(':hidden')) {
+ $('#equipmentCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 设备信息中得类别移出事件
+ $('#equipmentCategory').mouseleave(function () {
+ if (!$('#equipmentCategory .select-list').is(':hidden')) {
+ $('#equipmentCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 警情信息类，业主信息类，设备信息类别，具体项的点击事件
+ $('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
+ // console.log(event.currentTarget.innerHTML,'innerhtml')
+ var text = $(this).text().trim();
+ // console.log(text,'text()')
+ // console.log(that.tabIndex,'tabIndex')
+
+ $(this).parent().parent().prev().html(text + '<i></i>');
+ $(this).parent().parent().stop().slideUp(0);
+
+ if ($(this).attr('areaid')) {
+ $(this).parent().parent().prev().attr('areaid', $(this).attr('areaid'));
+ } else if ($(this).attr('ownerid')) {
+ $(this).parent().parent().prev().attr('ownerid', $(this).attr('ownerid'));
+ }
+
+
+ if (that.tabIndex == 1) {
+
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
+
+ if ($(this).attr('areaid')) {
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
+ } else {
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
+ }
+
+
+ } else if (that.tabIndex == 2) {
+ var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
+ var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();
+
+ var parentId = $(this).parent().parent().parent().attr('id');
+ if (parentId == 'ownerCategory') {
+ that.getOwnerDj($('#ownerLevel'), categoryText);
+ that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
+ } else {
+ that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
+ }
+
+ } else if (that.tabIndex == 0) {
+ that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
+ }
+
+ })
+ },
+ getArea: function (dom) {
+ dom.children('.select-list').children('ul').empty();
+ dom.children('.select-list').children('ul').append($("<li areaid='all'>全部</li>"));
+ var that = this;
+ $.ajax({
+ url: 'https://web.byisf.com/api/blade-system/region/select?code=3601',
+ type: 'GET',
+ dataType: 'JSON',
+ success: function (data) {
+ var res = data.data;
+ for (var i = 0; i < res.length; i++) {
+ dom.children('.select-list').children('ul').append($("<li areaid=" + res[i].code + ">" + res[i].name + "</li>"));
+ }
+ }
+ })
+ },
+ getPoliceTableAnalysis: function (dom, beginTime, endTime, waringType, addvcd) {
+ dom.empty();
+ var that = this;
+ $.ajax({
+ url: "https://web.byisf.com/api/blade-jfpts/alarm/alarm/page?current=1&size=99999&waringType=&beginTime=" + beginTime + "&endTime=" + endTime + "&province=36&city=3601&district=" + addvcd,
+ type: 'get',
+ dataType: 'JSON',
+ success: function (data) {
+ var result = data.data.records;
+ var str = '';
+ that.entitysData = [];
+ that.analysisAddEntitys.clear();
+ for (var a, time, t, e, y, h, i = 0; i < result.length; i++) {
+
+ if (result[i].waringType == "紧急求救") {
+ result[i].waringType = "一键求助"
+ }
+
+ that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
+ lgtd: result[i].jd,
+ lttd: result[i].wd,
+ id: result[i].id
+ }, result[i].jd, result[i].wd, './images/police-situation.png');
+
+ t = result[i].alarmTime.substr(0, 10);
+ e = result[i].alarmTime.substr(11);
+ time = t + ' ' + e;
+ y = result[i].alarmTime.substr(5, 5);
+ h = result[i].alarmTime.substr(11, 5);
+ a = Number(i) + 1;
+ str += '<tr term-list=' + result[i].id + '>';
+ str += '<td>' + a + '</td>';
+ str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
+ str += '<td title=' + result[i].alarmPeople + '>' + result[i].alarmPeople + '</td>';
+ str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
+ str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
+ str += '</tr>';
+ dom.append(str);
+ str = '';
+
+
+ }
+
+ for (var i = 0; i < 1000; i++) {
+ var dd = Math.random();
+ var cc = Math.random();
+ }
+ }
+ })
+ },
+ // 获取设备信息列表
+ getEquipmentTable: function (dom, deviceType) {
+ dom.empty();
+ var that = this;
+ // console.log(dom, deviceType);
+ // dom.append(deviceType);
+ $.ajax({
+ url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
+ type: 'GET',
+ dataType: 'JSON',
+ success: function (data) {
+ var result = data.data;
+ var str = '';
+ that.entitysData = [];
+ that.analysisAddEntitys.clear();
+ for (var a, i = 0; i < result.length; i++) {
+
+
+ that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
+ lgtd: result[i].jd,
+ lttd: result[i].wd,
+ id: result[i].id
+ }, result[i].jd, result[i].wd, './images/ceshi.png');
+
+ a = Number(i) + 1;
+ str += "<tr term-listid=" + result[i].id + ">";
+ str += '<td>' + a + '</td>';
+ str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
+ str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
+ str += '<td>' + result[i].deviceNumber + '</td>';
+ str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
+ str += '</tr>';
+ dom.append(str);
+ str = '';
+ }
+
+
+ }
+ })
+ },
+ // 创建实体图层
+ createEntitysAnalysis: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
+
+ var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 16, 16);
+ symbol.name = name;
+ var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 }));
+ pt.entityData = item;
+ var graphic = new esri.Graphic(pt, symbol);
+ entitys.add(graphic);
+
+
+ entityContent.push(item);
+ },
+ //左侧控制栏↑
+
open: function () {
var that = this;
$.ajax({
@@ -198,41 +648,63 @@
type: 'get',
dataType: 'JSON',
success: function (res) {
-
var datas = res.data;
-
-
var heatmapRenderer = null;
that.entityData = [];
-
-
-
for (var i = 0; i < datas.length; i++) {
datas[i].x = Number(datas[i].jd);
datas[i].y = Number(datas[i].wd);
- // that.entityData[i].lgtd = Number(datas[i].jd);
- // that.entityData[i].lttd = Number(datas[i].wd);
that.entityData.push({
lgtd: Number(datas[i].jd),
lttd: Number(datas[i].wd)
})
}
- // console.log(that.entityData, 444444444444444444444)
- // console.log(datas,444444444444444444444)
that.flareClusterLayer(datas);
-
that.heatmapfeatureLayer = that.heatmFeaLayers();
-
- // console.log(that.heatmapfeatureLayer);
-
that._map.addLayer(that.heatmapfeatureLayer);
-
- that.checkBoxSelect();
-
- // console.log(that.heatmapfeatureLayer);
+ // that.checkBoxSelect();//左侧控制热力图重复
}
})
+ var that = this;
+ var intTime = () => {
+ var time = this.getTime();
+ $("#tabcontainer").css("width", "360px");
+ $('#mapcontentClass').addClass('client-max-map'); //追加样式
+ AppEvent.dispatchAppEvent(AppEvent.APPLICATION_RESIZE, {});
+ that.tabIndex = 0;
+ $('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
+ $($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();
+
+ that.heatmapfeatureLayer_1 = that.heatmFeaLayers();
+
+ that._map.addLayer(that.heatmapfeatureLayer_1);
+ $('#analysis_select_time_start').val(time.tomorrow);
+ $('#analysis_select_time_end').val(time.current);
+
+ layui.use('laydate', function () {
+ that.layuiLadate = layui.laydate;
+ //执行一个laydate实例 开始
+ that.layuiLadate.render({
+ elem: '#analysis_select_time_start', //指定元素
+ type: "datetime",
+ format: 'yyyy-MM-dd HH:mm',
+ trigger: 'click'
+ });
+ // 结束
+ that.layuiLadate.render({
+ elem: '#analysis_select_time_end', //指定元素
+ type: "datetime",
+ format: 'yyyy-MM-dd HH:mm',
+ trigger: 'click'
+ });
+ });
+ that.getArea($('#policeArea'));
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), time.tomorrow, time.current, '', '');
+ that.clickHand();
+
+ }
+ intTime();
},
heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图
@@ -261,13 +733,13 @@
return featureLayer;
},
- checkBoxSelect: function (self) {
+ checkBoxSelect: function (self) {//选择热力图
var that = this;
var heatmapRenderer = null;
// // return
// 选中
- // if ($(self).prop('checked') == true) {
- // if (1) {
+ if ($(self).prop('checked') == true) {
+ // if (1) {
heatmapRenderer = new HeatmapRenderer({
colorStops: [
{ ratio: 0.45, color: "rgba(000,000,255,0)" },
@@ -277,7 +749,7 @@
{ ratio: 1.00, color: "rgb(255,000,000)" },
],
blurRadius: 42,
- maxPixelIntensity: 184,
+ maxPixelIntensity: 100,
minPixelIntensity: 0
});
this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
@@ -287,10 +759,10 @@
point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
this.heatmapfeatureLayer.add(new esri.Graphic(point));
}
- // } else {
- // this.heatmapfeatureLayer.clear();
- // this.heatmapfeatureLayer.setRenderer();
- // }
+ } else {
+ this.heatmapfeatureLayer.clear();
+ this.heatmapfeatureLayer.setRenderer();
+ }
},
close: function () {
@@ -366,10 +838,10 @@
},
clickHand: function (e) {//top点击事件，导航
- console.log(e);
+ // console.log(e);
},
-
-
+
+
//聚合图层事件
flareClusterLayer: function (datas) { //top聚合事件，导航
@@ -396,7 +868,7 @@
clusterRatio: 120,
clusterAreaDisplay: areaDisplayMode,
clusteringBegin: function (e) {
- console.log(e, "clustering begin");
+ // console.log("clustering begin");
},
clusteringComplete: function () {
console.log("clustering complete");
--
Gitblit v1.9.3