From f27799628498508c296d2c5d95ef66e2be2ca4dd Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 20 Apr 2021 15:28:00 +0800
Subject: [PATCH] 地图详情搭建，小窗跟随 input传值
---
public/map/widgets/supervisoryMap/SupervisoryMap.js | 125 +++++++++++++++++++++++++++++++++++------
1 files changed, 105 insertions(+), 20 deletions(-)
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index da07b11..4192bdc 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -126,7 +126,7 @@
layuiLayer: null,
layuiLadate: null,
tabIndex: 0,
-
+ heatmapfeatureLayer: null,//liu热力图
// 保留添加实体图层的变量
addEntitys: null,
entitysData: [],
@@ -190,7 +190,7 @@
getQueryStringByKey: function (key) {
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
},
-
+ entityData: [],
open: function () {
var that = this;
$.ajax({
@@ -198,18 +198,101 @@
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 () {
},
@@ -284,14 +367,16 @@
clickHand: function (e) {//top点击事件，导航
console.log(e);
- },
+ },
+
+
//聚合图层事件
flareClusterLayer: function (datas) { //top聚合事件，导航
var that = this;
var preClustered = false;
- var displaySingleFlaresAtCount = 10;
+ var displaySingleFlaresAtCount = 20;
var areaDisplayMode = "";
// var allData = JSON.parse(DATA);
// DataManager.setData(allData);
@@ -308,7 +393,7 @@
displaySingleFlaresAtCount: displaySingleFlaresAtCount,
flareShowMode: "mouse",
preClustered: preClustered,
- clusterRatio: 75,
+ clusterRatio: 120,
clusterAreaDisplay: areaDisplayMode,
clusteringBegin: function (e) {
console.log(e, "clustering begin");
@@ -336,20 +421,20 @@
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
- }
+ fieldName: "facilityType",
+ label: "Facility Type",
+ visible: true
+ },
+ {
+ fieldName: "postcode",
+ label: "Post Code",
+ visible: true
+ },
+ {
+ fieldName: "isOpen",
+ label: "Opening Hours",
+ visible: true
+ }
]
});
--
Gitblit v1.9.3