add guokongdian change color

wangzhibo

2021-09-27 b201e765bfd36efe9b035687b83718c0a6a1c0dd

add guokongdian change color

 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

        },
        {

 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, //图层管理 中使用，父节点id
    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, //图层管理 中使用，父节点id
    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);
      }
    }

  });

 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
    });

 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();