| | |
| | | "use script"; //开发环境建议开启严格模式 |
| | | //系统 功能入口 |
| | | |
| | | var guokong_color_list = ['#0EE839', '#FEFE23', '#FD9D00', '#F70F0D', '#8A0B73', '#88041E']; |
| | | var guokong_color_nodata = '#C0C0C0'; |
| | | 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 allLayer_color_nodata = '#C0C0C0'; |
| | | 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 addGuokongLayerDIV(item) { |
| | | function addWMSLayer(item) { |
| | | |
| | | var guokongLayer = new mars3d.layer.DivLayer({ |
| | | var wmsLyer = new mars3d.layer.WmsLayer({ |
| | | id: item.id, |
| | | pid: item.pid, //图层管理 中使用,父节点id |
| | | pid: item.pid, |
| | | name: item.name, |
| | | type: "wms", |
| | | url: mars3d.global_variables.geoserver_url_predix + "/geoserver/konglu_58/wms", |
| | | layers: "konglu_58:" + item.geoname_prefix + mars3d.global_variables.queryDataType, |
| | | crs: "EPSG:4326", |
| | | parameters: { |
| | | "styles": item.style_prefix + item.style_selected, |
| | | "transparent": "true", |
| | | "format": "image/png", |
| | | "viewparams": "userid:" + mars3d.global_variables.userid + ";datatime:" + mars3d.global_variables.queryDataTStartGeo |
| | | }, |
| | | center: { "lat": 30.487351, "lng": 121.613269, "alt": 54033, "heading": 359, "pitch": -40 }, |
| | | noCenter: true, |
| | | maxLength: 35000, |
| | | getFeatureInfoParameters: { |
| | | feature_count: 10 |
| | | }, |
| | | //单击高亮及其样式 |
| | | highlight: { |
| | | type: "wallP", |
| | | diffHeight: 300, |
| | | material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, { |
| | | image: "img/textures/fence.png", |
| | | color: "#ffff00", |
| | | speed: 10, //速度,建议取值范围1-100 |
| | | axisY: true, |
| | | }), |
| | | }, |
| | | show: item.show, |
| | | geoname_prefix: item.geoname_prefix, |
| | | style_prefix: item.style_prefix, |
| | | style_selected: item.style_selected, |
| | | style_options: item.styleoptions, |
| | | show: item.show |
| | | flyTo: false |
| | | }); |
| | | map.addLayer(guokongLayer); |
| | | wmsLyer.bindPopup(bindPopupFunction); |
| | | |
| | | guokongLayer.on(mars3d.EventType.click, function (event) { |
| | | console.log("监听layer,单击了矢量对象", event); |
| | | console.log(event.graphic?.attr) |
| | | var item = event.graphic?.attr; |
| | | //haoutil.msg('单击了:' + item['高校名称']) |
| | | //单击事件 |
| | | wmsLyer.on(mars3d.EventType.click, function (event) { |
| | | console.log("单击了矢量数据,共" + event.features.length + "条", event); |
| | | 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; |
| | | }); |
| | | |
| | | guokongLayer.bindPopup(function (event) { |
| | | let item = event.graphic?.attr; |
| | | //console.log(item); |
| | | var html = |
| | | "站点编号:" + |
| | | map.addLayer(wmsLyer); |
| | | |
| | | } |
| | | |
| | | function bindPopupFunction(event) { |
| | | |
| | | let layerid = event.layer.options.id; |
| | | let item = event.graphic?.attr; |
| | | if (!item) { |
| | | return ""; |
| | | } |
| | | if (layerid == 1001) { |
| | | return "站点编号:" + |
| | | item["code"] + |
| | | "<br />站点名称:" + |
| | | item["name"] + |
| | |
| | | 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, //图层管理 中使用,父节点id |
| | | 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); |
| | |
| | | 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); |
| | | }); |
| | | |
| | |
| | | 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: { |
| | |
| | | |
| | | } |
| | | |
| | | |
| | | function getGuokongPointColor(qindex, value) { |
| | | function getLayerPointColorByQindexandValue(layerid, qindex, value) { |
| | | |
| | | if (!value || value == null || value == 'null') { |
| | | return guokong_color_nodata; |
| | | 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; |
| | | } |