From b201e765bfd36efe9b035687b83718c0a6a1c0dd Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期一, 27 九月 2021 08:33:36 +0800
Subject: [PATCH] add guokongdian change color
---
js/function.js | 278 ++++++++++++++++++++++++++++++++++---------------------
data/getLayerListByUserid.json | 4
widgetsTS/dataTime/widget.js | 5
widgets/manageLayers_style/view.js | 4
4 files changed, 180 insertions(+), 111 deletions(-)
diff --git a/data/getLayerListByUserid.json b/data/getLayerListByUserid.json
index cba9e94..a04539d 100644
--- a/data/getLayerListByUserid.json
+++ b/data/getLayerListByUserid.json
@@ -7,8 +7,8 @@
"type": "graphic",
"geoname_prefix":"",
"style_prefix":"",
- "styleoptions": ["pm25", "pm10", "no", "no2", "nox", "co"],
- "show":false
+ "styleoptions": ["pm25", "pm10", "no2", "co"],
+ "show":true
},
{
diff --git a/js/function.js b/js/function.js
index 807054a..6bb5031 100644
--- a/js/function.js
+++ b/js/function.js
@@ -2,6 +2,8 @@
//绯荤粺 鍔熻兘鍏ュ彛
function getDefaultDateTime() {
+
+ return "2021-07-01 00:00:00";
var date = new Date;
date.setHours(date.getHours() - 2);
var year = date.getFullYear();//骞�
@@ -13,6 +15,20 @@
(day > 9 ? day : ("0" + day)) + " " +
(hours > 9 ? hours : ("0" + hours)) + ":00:00";
}
+function getDefaultDateTimeEnd() {
+
+ return "2021-07-01 00:15:00";
+ var date = new Date;
+ date.setHours(date.getHours() - 2);
+ var year = date.getFullYear();//骞�
+ var month = date.getMonth();//鏈�
+ var day = date.getDate();//鏃�
+ var hours = date.getHours();//鏃�
+ return year + "-" +
+ ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
+ (day > 9 ? day : ("0" + day)) + " " +
+ (hours > 9 ? hours : ("0" + hours)) + ":15:00";
+}
function getDefaultDateTimeGeo() {
var date = new Date;
date.setHours(date.getHours() - 2);
@@ -20,16 +36,22 @@
var month = date.getMonth();//鏈�
var day = date.getDate();//鏃�
var hours = date.getHours();//鏃�
- return year +
- ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) +
- (day > 9 ? day : ("0" + day)) +
+ return year +
+ ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) +
+ (day > 9 ? day : ("0" + day)) +
(hours > 9 ? hours : ("0" + hours)) + "0000";
}
mars3d.global_variables = { geoserver_url_predix: 'http://58.246.27.194:7011/', nodejs_url_predix: 'http://58.246.27.194:7012/', userid: 2, queryDataType: 'hour' };
mars3d.global_variables.queryDataTStart = getDefaultDateTime();
mars3d.global_variables.queryDataTStartGeo = getDefaultDateTimeGeo();
-mars3d.global_variables.queryDataTEnd = getDefaultDateTime();
+mars3d.global_variables.queryDataTEnd = getDefaultDateTimeEnd();
+
+var guokong_color_list = ['#0EE839', '#FEFE23', '#FD9D00', '#F70F0D', '#8A0B73', '#88041E'];
+var guokong_color_nodata = '#C0C0C0';
+var guokong_qindex_list = { 'pm25': [35, 75, 115, 150, 250], 'pm10': [50, 150, 250, 350, 420], 'no2': [100, 200, 700, 1200, 2340], 'co': [5, 10, 35, 60, 90] };
+var guokong_data_list;
+var taxi_data_list;
function initLayersByUserid() {
@@ -56,7 +78,7 @@
}
function addWMSLayer(item) {
-
+
var wmsLyer = new mars3d.layer.WmsLayer({
id: item.id,
pid: item.pid,
@@ -73,6 +95,7 @@
},
center: { "lat": 30.487351, "lng": 121.613269, "alt": 54033, "heading": 359, "pitch": -40 },
noCenter: true,
+ maxLength: 35000,
getFeatureInfoParameters: {
feature_count: 10
},
@@ -94,14 +117,14 @@
style_options: item.styleoptions,
flyTo: false
});
-
+
//鍗曞嚮浜嬩欢
wmsLyer.on(mars3d.EventType.click, function (event) {
console.log("鍗曞嚮浜嗙煝閲忔暟鎹紝鍏�" + event.features.length + "鏉�", event);
});
-
+
map.addLayer(wmsLyer);
-
+
}
function addMaskShanghai() {
@@ -131,7 +154,9 @@
id: item.id,
pid: item.pid, //鍥惧眰绠＄悊 涓娇鐢紝鐖惰妭鐐筰d
name: item.name,
- style_options: item.styleoptions
+ style_selected: 'pm25',
+ style_options: item.styleoptions,
+ show: item.show
});
map.addLayer(guokongLayer);
@@ -144,95 +169,110 @@
guokongLayer.bindPopup(function (event) {
let item = event.graphic?.attr;
+ //console.log(item);
var html =
- "绔欑偣鍚嶇О锛�" +
- item["SiteName"] +
- "<br />鍒嗗尯锛�" +
- item["RegionName"] +
- "<br />AQI:" +
- item["AQI"] +
- "<br />PM25:" +
+ "绔欑偣缂栧彿锛�" +
+ item["code"] +
+ "<br />绔欑偣鍚嶇О锛�" +
+ item["name"] +
+ "<br />鏁版嵁鏃堕棿锛�" +
+ item["datatime"] +
+ "<br />PM2.5:" +
item["PM25"] + "ug/m3" +
+ "<br />PM10:" +
+ item["PM10"] + "ug/m3" +
+ "<br />NO2:" +
+ item["NO2"] + "ug/m3" +
+ "<br />CO:" +
+ item["CO"] + "ug/m3" +
"<br />SO2:" +
item["SO2"] + "ug/m3" +
- "<br />O3:" +
- item["O31"] + "ug/m3" +
- "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["SiteName"] + "\")' >璇︾粏淇℃伅</a></p>";
+ "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' >璇︾粏淇℃伅</a></p>";
return html;
});
- guokongLayer.reloadGuokongDian = function (){
- guokongLayer.removeALL // 绫讳技
- $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_list_hour&datatime=2021-09-06%2012:00:00&qindex=pm25", (result) => {
- var pointColorArr = ["#f33349", "#fff000", "#33347f"];
- for (var i = 0, len = result.data.result.length; i < len; i++) {
- var item = result.data.result[i];
- var jd = result.data.result[i].Longitude;
- var wd = result.data.result[i].Latitude;
- var clr = pointColorArr[i % pointColorArr.length];
- var graphic = new mars3d.graphic.DivLightPoint({
- position: Cesium.Cartesian3.fromDegrees(jd, wd),
- style: {
- color: clr,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- highlight: {
- type: "divLightPoint",
- diffHeight: 600,
- material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, {
- color: "#ffff00",
- count: 3,
- speed: 20,
- }),
- },
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //鎸夎璺濊窛绂绘樉绀�
- },
- show: true,
- attr: item,
- });
- guokongLayer.addGraphic(graphic);
- }
- });
+ guokongLayer.changeColor = function () {
- };
+ guokongLayer.clear(true);
+
+ addResutToLayer(this, guokong_data_list);
+
+ }
// add 鍥芥帶鐐�
- $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_list_hour&datatime=2021-09-06%2012:00:00&qindex=pm25", (result) => {
- var pointColorArr = ["#f33349", "#fff000", "#33347f"];
- for (var i = 0, len = result.data.result.length; i < len; i++) {
- var item = result.data.result[i];
- var jd = result.data.result[i].Longitude;
- var wd = result.data.result[i].Latitude;
- var clr = pointColorArr[i % pointColorArr.length];
- var graphic = new mars3d.graphic.DivLightPoint({
- position: Cesium.Cartesian3.fromDegrees(jd, wd),
- style: {
- color: clr,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- highlight: {
- type: "divLightPoint",
- diffHeight: 600,
- material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, {
- color: "#ffff00",
- count: 3,
- speed: 20,
- }),
- },
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //鎸夎璺濊窛绂绘樉绀�
- },
- show: true,
- attr: item,
- });
- guokongLayer.addGraphic(graphic);
- }
+ addGuokongPointToLayer(guokongLayer);
+
+}
+
+function addGuokongPointToLayer(tmplayer) {
+
+ $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1001_list&datatype=" + mars3d.global_variables.queryDataType + "&datatime=" + mars3d.global_variables.queryDataTStart + "&qindex=pm25&pageno=1&pagesize=1000", (result) => {
+
+ guokong_data_list = result.data.result;
+
+ addResutToLayer(tmplayer, result.data.result);
+
});
}
+function addResutToLayer(tmplayer, items) {
+
+ for (var i = 0, len = items.length; i < len; i++) {
+ var item = items[i];
+ var jd = item.lon;
+ var wd = item.lat;
+ var clr = getGuokongPointColor(tmplayer.options.style_selected, item[(tmplayer.options.style_selected).toUpperCase()]);
+ var graphic = new mars3d.graphic.DivLightPoint({
+ position: Cesium.Cartesian3.fromDegrees(jd, wd),
+ style: {
+ color: clr,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ highlight: {
+ type: "divLightPoint",
+ diffHeight: 600,
+ material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, {
+ color: clr,
+ count: 3,
+ speed: 20,
+ }),
+ },
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //鎸夎璺濊窛绂绘樉绀�
+ },
+ show: true,
+ attr: item,
+ });
+ tmplayer.addGraphic(graphic);
+ }
+
+
+}
+
+
+function getGuokongPointColor(qindex, value) {
+
+ if (!value || value == null || value == 'null') {
+ return guokong_color_nodata;
+ }
+ for (var key in guokong_qindex_list) {
+ if (key == qindex) {
+ for (let i = guokong_qindex_list[key].length; i > -1; i--) {
+ if (value > guokong_qindex_list[key][i]) {
+ return guokong_color_list[i + 1];
+ }
+ }
+ }
+ }
+}
+
+function getIndexByValue() {
+
+}
function addWindLayer(item) {
-
+
$.getJSON("data/getWindParametersByTime.json", { datatype: mars3d.global_variables.queryDataType, datatime: mars3d.global_variables.queryDataTStart }, (result) => {
console.log(result);
-
+
var layer_wind = new mars3d.layer.CanvasWindLayer({
id: item.id,
pid: item.pid,
@@ -247,21 +287,21 @@
});
layer_wind.show = item.show;
map.addLayer(layer_wind);
-
+
layer_wind.data = convertWindData(result.data);
});
}
-
+
function convertWindData(arr) {
-
+
var arrU = [];
var arrV = [];
-
+
var xmin = arr[0].x;
var xmax = arr[0].x;
var ymin = arr[0].y;
var ymax = arr[0].y;
-
+
// 椋庡悜鏄互y杞存鏂瑰悜涓洪浂搴﹂『鏃堕拡杞紝0搴﹁〃绀哄寳椋庛��90搴﹁〃绀轰笢椋庛��
// u琛ㄧず缁忓害鏂瑰悜涓婄殑椋庯紝u涓烘锛岃〃绀鸿タ椋庯紝浠庤タ杈瑰惞鏉ョ殑椋庛��
// v琛ㄧず绾害鏂瑰悜涓婄殑椋庯紝v涓烘锛岃〃绀哄崡椋庯紝浠庡崡杈瑰惞鏉ョ殑椋庛��
@@ -279,17 +319,17 @@
if (ymax < item.y) {
ymax = item.y;
}
-
+
var u = mars3d.WindUtil.getU(item.speed, item.dir);
arrU.push(u);
-
+
var v = mars3d.WindUtil.getV(item.speed, item.dir);
arrV.push(v);
}
-
+
var rows = getKeyNumCount(arr, "y"); //璁＄畻 琛屾暟
var cols = getKeyNumCount(arr, "x"); //璁＄畻 鍒楁暟
-
+
return {
xmin: xmin,
xmax: xmax,
@@ -301,13 +341,13 @@
vdata: arrV, //绾靛悜椋庨��
};
}
-
+
function getKeyNumCount(arr, key) {
var obj = {};
arr.forEach((item) => {
obj[item[key]] = true;
});
-
+
var count = 0;
for (let col in obj) {
count++;
@@ -317,20 +357,12 @@
function addTaxiLayer(item) {
-
- map.clock.shouldAnimate = true;
-
- map.clock.startTime = Cesium.JulianDate.fromDate(new Date("2021-07-01 10:00:00"));
- map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2021-07-01 10:00:00"));
- map.clock.stopTime = Cesium.JulianDate.fromDate(new Date("2021-07-01 10:15:00"));
- map.clock.multiplier = 5.0;
- map.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
-
var taxi_layer = new mars3d.layer.GraphicLayer({
id: item.id,
name: item.name,
pid: item.pid, //鍥惧眰绠＄悊 涓娇鐢紝鐖惰妭鐐筰d
center: { "lat": 30.62156, "lng": 121.44918, "alt": 48716, "heading": 359, "pitch": -40 },
+ noCenter: true,
noCenter: true,
show: true,
onWidget: "widgetsTS/taxi_layer_setting/widget.js",
@@ -368,19 +400,36 @@
return html;
});
- $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1004_list_by_userid&userid=2", (result) => {
+ getTaxiListByUserId(taxi_layer);
+}
+
+function getTaxiListByUserId(tmpLayer) {
+
+ setTaxiLayerMapClock();
+ $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_list_by_userid&userid=" + mars3d.global_variables.userid, (result) => {
+ taxi_data_list = result.data.result;
for (var i = 0, len = result.data.result.length; i < len; i++) {
let item = result.data.result[i];
- addItemToLayer(item, taxi_layer);
+ addTaxiPathToLayer(item, tmpLayer);
}
});
}
-function addItemToLayer(item, target_layer) {
- $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1004_single_path&siteid=" + item["code"], {
- datatime1: "2021-07-01 10:00:00",
- datatime2: "2021-07-01 10:15:00"
+function setTaxiLayerMapClock() {
+ map.clock.shouldAnimate = true;
+ map.clock.startTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTStart));
+ map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTStart));
+ map.clock.stopTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTEnd));
+ map.clock.multiplier = 5.0;
+ map.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
+}
+function addTaxiPathToLayer(item, target_layer) {
+
+
+ $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_single_path&siteid=" + item["code"], {
+ datatime1: mars3d.global_variables.queryDataTStart,
+ datatime2: mars3d.global_variables.queryDataTEnd
}, (result) => {
if (result.data.result.length > 0) {
@@ -431,12 +480,25 @@
var layers = map.getLayers({ layers: true });
layers.forEach((layer) => {
- console.log(layer.name+":"+layer.type);
+ console.log(layer.name + ":" + layer.type);
if ([layer.type] == 'wms') {
layer.options.layers = "konglu_58:" + layer.options.geoname_prefix + mars3d.global_variables.queryDataType;
layer.options.parameters.viewparams = "userid:" + mars3d.global_variables.userid + ";datatime:" + mars3d.global_variables.queryDataTStartGeo;
layer.reload();
+ } else if ([layer.id] == 1001) {
+
+ var tmpguokong = map.getLayerById(1001);
+ tmpguokong.clear(true);
+ addGuokongPointToLayer(tmpguokong);
+ //graphiclayer.eachGraphic
+ } else if ([layer.id] == 1004) {
+ var tmpTaxi = map.getLayerById(1004);
+ tmpTaxi.clear(true);
+ setTaxiLayerMapClock();
+ for (var i = 0, len = taxi_data_list.length; i < len; i++) {
+ addTaxiPathToLayer(taxi_data_list[i], tmpTaxi);
+ }
}
});
diff --git a/widgets/manageLayers_style/view.js b/widgets/manageLayers_style/view.js
index d1b5f46..6b39a94 100644
--- a/widgets/manageLayers_style/view.js
+++ b/widgets/manageLayers_style/view.js
@@ -295,6 +295,10 @@
if (layer.options.type =='wms'){
layer.options.parameters.styles = layer.options.style_prefix+this.value;
layer.reload();
+ }else if (layer.options.id =1001){
+ layer.options.style_selected = this.value;
+ layer.changeColor();
+
}
//TODO
});
diff --git a/widgetsTS/dataTime/widget.js b/widgetsTS/dataTime/widget.js
index 5e94605..dffa523 100644
--- a/widgetsTS/dataTime/widget.js
+++ b/widgetsTS/dataTime/widget.js
@@ -100,6 +100,8 @@
tmpDatetime.replace(' ','');
tmpDatetime.replace(':','');
+ mars3d.global_variables.queryDataTStart = $('#appDate').val() + " 00:00:00";
+ mars3d.global_variables.queryDataTEnd = $('#appDate').val()+ " 00:15:00";
mars3d.global_variables.queryDataTStartGeo = tmpDatetime;
reLoadLayers();
@@ -128,7 +130,8 @@
tmpDatetime.replace(' ','');
tmpDatetime.replace(':','');
-
+ mars3d.global_variables.queryDataTStart = $('#appDateHour').val();
+ mars3d.global_variables.queryDataTEnd = $('#appDateHour').val().substring(0,14)+"15:00";
mars3d.global_variables.queryDataTStartGeo = tmpDatetime;
reLoadLayers();
--
Gitblit v1.9.1