/*
|
* @Description:
|
* @Version: 1.0
|
* @Author: yangsx
|
* @Date: 2019-12-09 19:01:40
|
* @LastEditors: yangsx
|
* @LastEditTime: 2019-12-14 14:44:57
|
*/
|
define([
|
"dojo",
|
"dojo/_base/declare",
|
"dojo/_base/lang",
|
"base/BaseWidget",
|
"dojo/text!widgets/supervisoryMap/template.html",
|
"base/AppEvent",
|
"base/ConfigData",
|
"widgets/supervisoryMap/config",
|
"dojo/dom",
|
"dojo/dom-construct",
|
"dojo/dom-attr",
|
"dojo/dom-style",
|
"dojo/on",
|
"esri/layers/ArcGISDynamicMapServiceLayer",
|
"esri/layers/ArcGISTiledMapServiceLayer",
|
"esri/layers/FeatureLayer",
|
"controls/tab/TabControl",
|
"esri/dijit/SymbolStyler",
|
"esri/styles/basic",
|
"dojo/_base/array",
|
"esri/InfoTemplate",
|
"esri/tasks/query",
|
"esri/tasks/QueryTask",
|
"esri/Color",
|
"esri/toolbars/edit",
|
"esri/graphic",
|
"esri/geometry/Point",
|
"esri/geometry/Polyline",
|
"esri/geometry/Polygon",
|
"esri/geometry/Extent",
|
"esri/tasks/FeatureSet",
|
"esri/renderers/HeatmapRenderer",
|
"esri/symbols/SimpleLineSymbol",
|
"esri/symbols/SimpleFillSymbol",
|
"esri/symbols/PictureMarkerSymbol",
|
"esri/symbols/SimpleMarkerSymbol",
|
"esri/SpatialReference",
|
"esri/tasks/GeometryService",
|
"esri/tasks/ProjectParameters",
|
"esri/layers/GraphicsLayer",
|
"esri/layers/LabelLayer",
|
"esri/symbols/TextSymbol",
|
"esri/renderers/SimpleRenderer",
|
"esri/renderers/ClassBreaksRenderer",
|
"esri/tasks/Geoprocessor",
|
"esri/tasks/DataFile",
|
"esri/geometry/webMercatorUtils",
|
"esri/symbols/Font",
|
"esri/geometry/ScreenPoint",
|
"esri/layers/ImageParameters",
|
"esri/geometry/geometryEngine",
|
"esri/dijit/PopupTemplate",
|
"widgets/supervisoryMap/FlareClusterLayer_v3",
|
"dojo/domReady!"
|
], function (
|
dojo,
|
declare,
|
lang,
|
BaseWidget,
|
template,
|
AppEvent,
|
ConfigData,
|
config,
|
dom,
|
domConstruct,
|
domAttr,
|
domStyle,
|
on,
|
ArcGISDynamicMapServiceLayer,
|
ArcGISTiledMapServiceLayer,
|
FeatureLayer,
|
TabControl,
|
SymbolStyler,
|
basic,
|
arrayUtils,
|
InfoTemplate,
|
Query,
|
QueryTask,
|
Color,
|
Edit,
|
Graphic,
|
Point,
|
Polyline,
|
Polygon,
|
Extent,
|
FeatureSet,
|
HeatmapRenderer,
|
SimpleLineSymbol,
|
SimpleFillSymbol,
|
PictureMarkerSymbol,
|
SimpleMarkerSymbol,
|
SpatialReference,
|
GeometryService,
|
ProjectParameters,
|
GraphicsLayer,
|
LabelLayer,
|
TextSymbol,
|
SimpleRenderer,
|
ClassBreaksRenderer,
|
Geoprocessor,
|
DataFile,
|
webMercatorUtils,
|
Font,
|
ScreenPoint,
|
ImageParameters,
|
geometryEngine,
|
PopupTemplate,
|
FlareClusterLayer
|
) {
|
var Widget = declare([BaseWidget], {
|
widgetName: "AlertSecurity",
|
label: "地图模式",
|
templateString: template,
|
_map: null,
|
objThis: null,
|
_siteLayer: new GraphicsLayer(),
|
layuiLayer: null,
|
layuiLadate: null,
|
tabIndex: 0,
|
heatmapfeatureLayer: null,//liu热力图
|
// 保留添加实体图层的变量
|
addEntitys: null,
|
entitysData: [],
|
|
// 巡逻区域或者巡逻路线的描述
|
routeOrRegionDescribe: null,
|
|
// 用来记录巡逻区域或者巡逻路线的下标的
|
patrolIndex: 0,
|
|
// 拖拽
|
isDown: false,
|
x: 0,
|
y: 0,
|
offset: null,
|
moveThis: null,
|
// 电子围栏需要新增的Id
|
newElectronicFenceId: null,
|
|
// 新增路线时，派发人员，人员名称，以及人员id
|
peopleRealName: null,
|
pepleRealId: null,
|
|
//存放聚合实体
|
clusterLayer: null,
|
constructor: function (options, srcRefNode) {
|
this._map = options.map;
|
objThis = this;
|
|
this.addEntitys = new GraphicsLayer({
|
id: 'addEntitys'
|
});
|
|
// 添加点面线的图层
|
this.addPolygonEntitys = new GraphicsLayer({
|
id: 'addPolygonEntitys'
|
});
|
// 添加所有图层的地方
|
this.entityPolygonAll = new GraphicsLayer({
|
id: 'entityPolygonAll'
|
});
|
|
|
this._map.addLayer(this.addEntitys);
|
|
|
this._map.addLayer(this.addPolygonEntitys);
|
this._map.addLayer(this.entityPolygonAll);
|
|
},
|
|
startup: function () {
|
|
objThis._map.addLayer(objThis._siteLayer);
|
|
|
|
|
},
|
|
getQueryStringByKey: function (key) {
|
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
|
},
|
entityData: [],
|
open: function () {
|
var that = this;
|
$.ajax({
|
url: "https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll",
|
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);
|
}
|
})
|
|
},
|
heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图
|
|
var layerDefinition = {
|
"geometryType": "esriGeometryPoint",
|
"fields": [{
|
"num": "num",
|
editable: true,
|
nullable: true,
|
"type": "esriFieldTypeInteger",
|
"alias": "数量"
|
}]
|
};
|
var featureCollection = {
|
layerDefinition: layerDefinition,
|
featureSet: null
|
};
|
//创建 FeatureLayer 图层
|
var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
|
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
|
outFields: ["*"],
|
opacity: .8
|
});
|
//设置渲染方式
|
|
return featureLayer;
|
},
|
|
checkBoxSelect: function (self) {
|
var that = this;
|
var heatmapRenderer = null;
|
// // return
|
// 选中
|
// if ($(self).prop('checked') == true) {
|
// if (1) {
|
heatmapRenderer = new HeatmapRenderer({
|
colorStops: [
|
{ ratio: 0.45, color: "rgba(000,000,255,0)" },
|
{ ratio: 0.55, color: "rgb(000,255,255)" },
|
{ ratio: 0.65, color: "rgb(000,255,000)" },
|
{ ratio: 0.75, color: "rgb(234,126,15)" },
|
{ ratio: 1.00, color: "rgb(255,000,000)" },
|
],
|
blurRadius: 42,
|
maxPixelIntensity: 184,
|
minPixelIntensity: 0
|
});
|
this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
|
// 取消选中
|
var point = null;
|
for (var i = 0; i < that.entityData.length; i++) {
|
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();
|
// }
|
},
|
|
close: function () {
|
|
},
|
// 获取当前时间，以及昨天现在的时间
|
getTime: function getTime() {
|
var timestamp = Date.parse(new Date());
|
|
// 当前时间
|
var currentTime = new Date(timestamp);
|
// 年
|
var currentY = currentTime.getFullYear();
|
// 月
|
var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
|
// 日
|
var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
|
// 时
|
var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
|
// 分
|
var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
|
// 明天
|
var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
|
// 年
|
var tomorrowY = tomorrowTime.getFullYear();
|
// 月
|
var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
|
// 日
|
var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
|
// 时
|
var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
|
// 分
|
var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
|
return {
|
current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
|
tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
|
month: currentM + currentD
|
};
|
},
|
|
// 创建实体图层
|
createEntitys: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
|
|
var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 33, 48);
|
symbol.name = name;
|
var pt = new Point(lgtd, lttd, new esri.SpatialReference({
|
wkid: 4326
|
}));
|
pt.entityData = item;
|
var graphic = new esri.Graphic(pt, symbol);
|
entitys.add(graphic);
|
|
|
entityContent.push(item);
|
},
|
|
addPoint: function (entitys, lgtd, lttd, img) {
|
var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
|
var pt = new Point(lgtd, lttd, new SpatialReference({
|
wkid: 4326
|
}));
|
var graphic = new esri.Graphic(pt, symbol);
|
entitys.add(graphic);
|
},
|
|
addPoints: function (entitys, lgtd, lttd, img) {
|
var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
|
var pt = new Point(lgtd, lttd, new SpatialReference({
|
wkid: 4326
|
}));
|
var graphic = new esri.Graphic(pt, symbol);
|
entitys.add(graphic);
|
},
|
|
clickHand: function (e) {//top点击事件，导航
|
console.log(e);
|
},
|
|
|
//聚合图层事件
|
flareClusterLayer: function (datas) { //top聚合事件，导航
|
|
var that = this;
|
|
var preClustered = false;
|
var displaySingleFlaresAtCount = 20;
|
var areaDisplayMode = "";
|
// var allData = JSON.parse(DATA);
|
// DataManager.setData(allData);
|
|
//init the layer, more options are available and explained in the cluster layer constructor
|
that.clusterLayer = new FlareClusterLayer({
|
id: "flare-cluster-layer",
|
spatialReference: new esri.SpatialReference({
|
"wkid": 4326
|
}),
|
subTypeFlareProperty: "facilityType",
|
singleFlareTooltipProperty: "name",
|
displaySubTypeFlares: true,
|
displaySingleFlaresAtCount: displaySingleFlaresAtCount,
|
flareShowMode: "mouse",
|
preClustered: preClustered,
|
clusterRatio: 120,
|
clusterAreaDisplay: areaDisplayMode,
|
clusteringBegin: function (e) {
|
console.log(e, "clustering begin");
|
},
|
clusteringComplete: function () {
|
console.log("clustering complete");
|
}
|
});
|
|
//set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
|
var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
|
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
|
var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
|
var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
|
var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
|
var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
|
renderer.addBreak(0, 19, smSymbol);
|
renderer.addBreak(20, 150, mdSymbol);
|
renderer.addBreak(151, 1000, lgSymbol);
|
renderer.addBreak(1001, Infinity, xlSymbol);
|
|
that.clusterLayer.setRenderer(renderer); //use standard setRenderer.
|
|
//set up a popup template
|
var template = new PopupTemplate({
|
title: "{name}",
|
fieldInfos: [{
|
fieldName: "facilityType",
|
label: "Facility Type",
|
visible: true
|
},
|
{
|
fieldName: "postcode",
|
label: "Post Code",
|
visible: true
|
},
|
{
|
fieldName: "isOpen",
|
label: "Opening Hours",
|
visible: true
|
}
|
]
|
});
|
|
//clusterLayer.infoTemplate = template;
|
that._map.infoWindow.titleInBody = false;
|
|
that._map.addLayer(that.clusterLayer);
|
|
//var data = DataManager.getData();
|
that.clusterLayer.addData(datas);
|
|
},
|
clearLayer: function () {
|
var that = this;
|
that._map.removeLayer(that.clusterLayer);
|
that.clusterLayer = null;
|
}
|
});
|
return Widget;
|
});
|
