From 9e6ae70ce9382592bdcc33478b6e505a7682c711 Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期二, 28 九月 2021 16:30:44 +0800
Subject: [PATCH] add taxi layer change color
---
js/function_1001.js | 197 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 140 insertions(+), 57 deletions(-)
diff --git a/js/function_1001.js b/js/function_1001.js
index 5d12bc6..1b07f7b 100644
--- a/js/function_1001.js
+++ b/js/function_1001.js
@@ -3,9 +3,17 @@
var allLayer_color_nodata = '#C0C0C0';
-var guokong_color_list = ['#0EE839', '#FEFE23', '#FD9D00', '#F70F0D', '#8A0B73', '#88041E'];
-var guokong_qindex_color_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 color_list_1001 = ['#0EE839', '#FEFE23', '#FD9D00', '#F70F0D', '#8A0B73', '#88041E'];
+var color_list_1002 = ['#0EE839', '#FEFE23', '#F70F0D'];
+var color_list_1003 = ['#0dd4f7', '#078901', '#FFFF00', '#fe7c23', '#F70F0D', '#88041E'];
+var color_list_1004_and_other = ['#0dd4f7', '#23fe9f', '#078901', '#d4fe23', '#FFFF00', '#febf23', '#fe7c23', '#F70F0D', '#8A0B73', '#88041E'];
+
+var qindex_range_list_1001 = { '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 qindex_range_list_1002 = { 'tsp': [0.2, 0.5] };
+var qindex_range_list_1003 = { 'pm25': [10, 20, 50, 80, 100], 'pm10': [20, 50, 80, 150, 200], 'no2': [25, 50, 100, 150, 300], 'co': [0.5, 0.6, 0.8, 1, 1.5] };
+var qindex_range_list_1004_and_other = { 'pm25': [15, 35, 50, 75, 150, 250, 350, 500, 700], 'pm10': [20, 50, 100, 150, 200, 300, 500, 800, 1000], 'no': [10, 30, 60, 100, 200, 500, 1000, 2000, 3500], 'no2': [20, 80, 110, 150, 200, 250, 300, 400, 500], 'nox': [80, 110, 130, 150, 200, 500, 1000, 2000, 5000], 'co': [0.2, 0.4, 0.6, 0.8, 1, 1.5, 2.5, 4, 6] };
+// for change color locally.
+var data_list_1001;
function addWMSLayer(item) {
@@ -41,63 +49,48 @@
axisY: true,
}),
},
- popup: "all",
show: item.show,
geoname_prefix: item.geoname_prefix,
style_prefix: item.style_prefix,
- style_selected:item.style_selected,
+ style_selected: item.style_selected,
style_options: item.styleoptions,
flyTo: false
});
+ wmsLyer.bindPopup(bindPopupFunction);
//鍗曞嚮浜嬩欢
wmsLyer.on(mars3d.EventType.click, function (event) {
console.log("鍗曞嚮浜嗙煝閲忔暟鎹紝鍏�" + event.features.length + "鏉�", event);
- console.log(event.layer.options.style_selected);
-
-
- console.log(event.graphic);
- /*
- event.graphic.style.diffHeight =
-
- diffHeight: 300,
- material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
- image: "img/textures/fence.png",
- color: "#ffff00",
- speed: 10, //閫熷害锛屽缓璁彇鍊艰寖鍥�1-100
- axisY: true,
- }),
- */
+ var id = event.layer.options.id;
+ var qindex = event.layer.options.style_selected;
+ event.graphic.style.diffHeight = qindex == 'co' ? 10 * event.graphic.attr[qindex] : event.graphic.attr[qindex];
+ //console.log(id, qindex, event.graphic.attr[qindex]);
+ //console.log(getLayerPointColorByQindexandValue(id, qindex, event.graphic.attr[qindex]));
+ //console.log(Cesium.Color.fromCssColorString(getLayerPointColorByQindexandValue(id, qindex, event.graphic.attr[qindex])))
+ //event.graphic.style.material.uniforms.color = getLayerPointColorByQindexandValue(id, qindex, event.graphic.attr[qindex]);
+ //event.graphic.style.material.uniforms.color = getLayerPointColorByQindexandValue(id, qindex, event.graphic.attr[qindex]);
+ event.graphic.style.material = new mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+ image: "img/textures/fence.png",
+ color: getLayerPointColorByQindexandValue(id, qindex, event.graphic.attr[qindex]),
+ speed: 10, //閫熷害锛屽缓璁彇鍊艰寖鍥�1-100
+ axisY: true,
+ })
+ mars3d.global_variables.tmpHighlightGraphic = event.graphic;
});
map.addLayer(wmsLyer);
}
-function addGuokongLayerDIV(item) {
+function bindPopupFunction(event) {
- var guokongLayer = new mars3d.layer.DivLayer({
- id: item.id,
- pid: item.pid, //鍥惧眰绠＄悊 涓娇鐢紝鐖惰妭鐐筰d
- name: item.name,
- style_selected: item.style_selected,
- style_options: item.styleoptions,
- show: item.show
- });
- map.addLayer(guokongLayer);
-
- guokongLayer.on(mars3d.EventType.click, function (event) {
- console.log("鐩戝惉layer锛屽崟鍑讳簡鐭㈤噺瀵硅薄", event);
- console.log(event.graphic?.attr)
- var item = event.graphic?.attr;
- //haoutil.msg('鍗曞嚮浜嗭細' + item['楂樻牎鍚嶇О'])
- });
-
- guokongLayer.bindPopup(function (event) {
- let item = event.graphic?.attr;
- //console.log(item);
- var html =
- "绔欑偣缂栧彿锛�" +
+ let layerid = event.layer.options.id;
+ let item = event.graphic?.attr;
+ if (!item) {
+ return "";
+ }
+ if (layerid == 1001) {
+ return "绔欑偣缂栧彿锛�" +
item["code"] +
"<br />绔欑偣鍚嶇О锛�" +
item["name"] +
@@ -113,16 +106,93 @@
item["CO"] + "ug/m3" +
"<br />SO2:" +
item["SO2"] + "ug/m3" +
- "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' >璇︾粏淇℃伅</a></p>";
- return html;
+ "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' >璇︾粏淇℃伅</a><a href='#' onclick='javascript:addGraphictoHighlightLayer()' >淇濇寔楂樹寒鏄剧ず</a></p>";
+ } else if (layerid == 1002) {
+ return "绔欑偣缂栧彿锛�" +
+ 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 /><br /><p><a href='#' onclick='javascript:showDetail(1002,\"" + item["code"] + "\")' >璇︾粏淇℃伅</a><a href='#' onclick='javascript:addGraphictoHighlightLayer()' >淇濇寔楂樹寒鏄剧ず</a></p>";
+
+ } else if (layerid == 1003) {
+ return "绔欑偣缂栧彿锛�" +
+ 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 /><br /><p><a href='#' onclick='javascript:showDetail(1003,\"" + item["code"] + "\")' >璇︾粏淇℃伅</a><a href='#' onclick='javascript:addGraphictoHighlightLayer()' >淇濇寔楂樹寒鏄剧ず</a></p>";
+
+ } else {
+
+ return "绔欑偣缂栧彿锛�" +
+ 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 /><br /><p><a href='#' onclick='javascript:showDetail(" + layerid + ",\"" + item["code"] + "\")' >璇︾粏淇℃伅</a><a href='#' onclick='javascript:addGraphictoHighlightLayer()' >淇濇寔楂樹寒鏄剧ず</a></p>";
+ }
+
+
+}
+
+function addGuokongLayerDIV(item) {
+
+ var guokongLayer = new mars3d.layer.DivLayer({
+ id: item.id,
+ pid: item.pid, //鍥惧眰绠＄悊 涓娇鐢紝鐖惰妭鐐筰d
+ name: item.name,
+ style_selected: item.style_selected,
+ style_options: item.styleoptions,
+ show: item.show,
+ });
+ map.addLayer(guokongLayer);
+
+ guokongLayer.on(mars3d.EventType.click, function (event) {
+ console.log("鐩戝惉layer锛屽崟鍑讳簡鐭㈤噺瀵硅薄", event);
+ console.log(event.graphic?.attr)
+ var item = event.graphic?.attr;
+ //haoutil.msg('鍗曞嚮浜嗭細' + item['楂樻牎鍚嶇О'])
});
+ guokongLayer.bindPopup(bindPopupFunction);
+
guokongLayer.changeColor = function () {
-
guokongLayer.clear(true);
-
- addGuokongPointResutToLayer(this, guokong_data_list);
-
+ addGuokongPointResutToLayer(this, data_list_1001);
}
// add 鍥芥帶鐐�
getGuokongPointFromServer(guokongLayer);
@@ -132,7 +202,7 @@
function getGuokongPointFromServer(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;
+ data_list_1001 = result.data.result;
addGuokongPointResutToLayer(tmplayer, result.data.result);
});
@@ -143,7 +213,7 @@
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 clr = getLayerPointColorByQindexandValue(tmplayer.options.id, tmplayer.options.style_selected, item[(tmplayer.options.style_selected).toUpperCase()]);
var graphic = new mars3d.graphic.DivLightPoint({
position: Cesium.Cartesian3.fromDegrees(jd, wd),
style: {
@@ -169,18 +239,31 @@
}
-function getGuokongPointColor(qindex, value) {
+function getLayerPointColorByQindexandValue(layerid, qindex, value) {
if (!value || value == null || value == 'null') {
return allLayer_color_nodata;
}
- for (var key in guokong_qindex_color_list) {
- if (key == qindex) {
- for (let i = guokong_qindex_color_list[key].length; i > -1; i--) {
- if (value > guokong_qindex_color_list[key][i]) {
- return guokong_color_list[i + 1];
+ if (layerid == 1001) {
+ return getColorByListandValue(qindex_range_list_1001, color_list_1001, qindex, value);
+ } else if (layerid == 1002) {
+ return getColorByListandValue(qindex_range_list_1002, color_list_1002, qindex, value);
+ } else if (layerid == 1003) {
+ return getColorByListandValue(qindex_range_list_1003, color_list_1003, qindex, value);
+ } else {
+ return getColorByListandValue(qindex_range_list_1004_and_other, color_list_1004_and_other, qindex, value);
+ }
+}
+
+function getColorByListandValue(rangList, colorList, tmpQindex, tmpValue) {
+ for (var key in rangList) {
+ if (key == tmpQindex) {
+ for (let i = rangList[key].length; i > -1; i--) {
+ if (tmpValue > rangList[key][i]) {
+ return colorList[i + 1];
}
}
}
}
+ return allLayer_color_nodata;
}
\ No newline at end of file
--
Gitblit v1.9.1