add taxi layer change color

wangzhibo

2021-09-28 9e6ae70ce9382592bdcc33478b6e505a7682c711

add taxi layer change color

 data/getLayerListByUserid.json

@@ -20,7 +20,7 @@
            "geoname_prefix":"vis_weizhan_",
            "style_prefix":"point_weizhan_",
            "style_selected":"pm25",
            "styleoptions": ["pm25", "pm10", "no", "no2", "nox", "co"],
            "styleoptions": ["pm25", "pm10","no2", "co"],
            "show":false
        },
        {
@@ -30,8 +30,8 @@
            "type": "wms",
            "geoname_prefix":"vis_jiance_",
            "style_prefix":"point_jiance_",
            "style_selected":"pm25",
            "styleoptions": ["pm25", "pm10", "no", "no2", "nox", "co"],
            "style_selected":"tsp",
            "styleoptions": ["tsp"],
            "show":false
        },
        {
@@ -43,7 +43,7 @@
            "style_prefix":"",
            "style_selected":"pm25",
            "styleoptions": ["pm25", "pm10", "no", "no2", "nox", "co"],
            "show":false
            "show":true
        },
        {
            "id": 1005,

 js/function.js

@@ -45,6 +45,9 @@
mars3d.global_variables.queryDataTStart = getDefaultDateTime();
mars3d.global_variables.queryDataTStartGeo = getDefaultDateTimeGeo();
mars3d.global_variables.queryDataTEnd = getDefaultDateTimeEnd();
// for tmp hight light graphic and 
//mars3d.global_variables.tmpHighlightGraphic;
//mars3d.global_variables.tmpHighlightGraphicLayer;



@@ -52,6 +55,8 @@

  //addMaskShanghai();
  addTDTAnnoLayer();
  addHighlightLayerClearButton();
  addTmpHighlightGraphicLayer();

  //TODO
  $.getJSON("data/getLayerListByUserid.json", { userid: mars3d.global_variables.userid }, (result) => {
@@ -92,8 +97,8 @@
      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);
      for (var i = 0, len = data_list_1004.length; i < len; i++) {
        getTaxiPathFromServerbySN(data_list_1004[i], tmpTaxi);
      }
    }

@@ -104,7 +109,22 @@
function refreshWidgets() {

}
function addGraphictoHighlightLayer() {
  mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(mars3d.global_variables.tmpHighlightGraphic);

}

function addHighlightLayerClearButton() {
  let clearButton = new mars3d.control.ToolButton({
    title: "clearHighlightLayer",
    icon: "fa fa-crop",
    insertIndex: 1, //插入的位置顺序, 1是home按钮后面
    click: (event) => {
      mars3d.global_variables.tmpHighlightGraphicLayer.clear(true);
    },
  });
  map.addControl(clearButton);
}

function showDetail(layerid, itemCode) {
  haoutil.msg('单击了：' + layerid + ',' + itemCode);

 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,7 +49,6 @@
        axisY: true,
      }),
    },
    popup: "all",
    show: item.show,
    geoname_prefix: item.geoname_prefix,
    style_prefix: item.style_prefix,
@@ -49,55 +56,41 @@
    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, {
    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: "#ffff00",
      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, //图层管理 中使用，父节点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(function (event) {
  let layerid = event.layer.options.id;
    let item = event.graphic?.attr;
    //console.log(item);
    var html =
      "站点编号：" +
  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, //图层管理 中使用，父节点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);
@@ -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;
}

 js/function_1004.js

@@ -1,11 +1,14 @@
"use script"; //开发环境建议开启严格模式
//系统 功能入口

var taxi_data_list;
var data_list_1004;
var data_list_1004_paths = new Map();
var taxi_layer;


function addTaxiLayer(item) {

  var taxi_layer = new mars3d.layer.GraphicLayer({
  taxi_layer = new mars3d.layer.GraphicLayer({
    id: item.id,
    name: item.name,
    pid: item.pid, //图层管理 中使用，父节点id
@@ -13,7 +16,7 @@
    noCenter: true,
    style_selected:item.style_selected,
    style_options: item.styleoptions,
    show: true,
    show: item.show,
    onWidget: "widgetsTS/taxi_layer_setting/widget.js",
  });
  map.addLayer(taxi_layer);
@@ -49,17 +52,17 @@
    return html;
  });

  getTaxiListByUserId(taxi_layer);
  getTaxiListFromServerByUserId(taxi_layer);
}

function getTaxiListByUserId(tmpLayer) {
function getTaxiListFromServerByUserId(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;
    data_list_1004 = result.data.result;
    for (var i = 0, len = result.data.result.length; i < len; i++) {
      let item = result.data.result[i];
      addTaxiPathToLayer(item, tmpLayer);
      getTaxiPathFromServerbySN(item, tmpLayer);
    }
  });

@@ -70,10 +73,58 @@
  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.multiplier = 2.0;
  map.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

  var last_time_second = 0;


  map.on(mars3d.EventType.clockTick, function (event) {

    var current_date = new Date(Cesium.JulianDate.toDate(event._currentTime));

    if (current_date.getSeconds() != last_time_second) {
      last_time_second = current_date.getSeconds();
      changeTaxiLayerStyleAndAttr(getFormattedDateTime(current_date));

}
function addTaxiPathToLayer(item, target_layer) {

  });
}

function changeTaxiLayerStyleAndAttr(current_date) {

  var tmpattr;
  //current_date = "2021-07-01 00:00:32";
  taxi_layer.eachGraphic(function (item) {
    tmpattr = getTaxiAttrFromTimeListData(current_date, data_list_1004_paths.get(item.options.id));
    //console.log(tmpattr);
    if (tmpattr && tmpattr != null) {
      //item.options.attr = tmpattr;

      item.setOptions({
        attr: tmpattr,
        style: {
          label: {
            color: getLayerPointColorByQindexandValue(1004, item._layer.options.style_selected, tmpattr[item._layer.options.style_selected]),
          }
        }
      })
      //item.options.style.label.color = getLayerPointColorByQindexandValue(1004, item._layer.options.style_selected, tmpattr[item._layer.options.style_selected]);
      //console.log('color has been changed.' + item.options.id);
    }

  });
}
function getTaxiAttrFromTimeListData(datetime, datalist) {
  for (var i = 0; i < datalist.length; i++) {
    if (datalist[i]["datatime"] == datetime) {
      return datalist[i];
    }
  }
}

function getTaxiPathFromServerbySN(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,
@@ -81,6 +132,8 @@
  }, (result) => {

    if (result.data.result.length > 0) {
      // 保存临时数据，为后续替换颜色做准备。
      data_list_1004_paths.set(result.data.result[0].code, result.data.result);
      var tmpPositionProperty = new Cesium.SampledPositionProperty();
      for (var i = 0, len = result.data.result.length; i < len; i++) {
        let item = result.data.result[i];
@@ -89,9 +142,10 @@
      }

      let graphic = new mars3d.graphic.ModelEntity({
        id: result.data.result[0].code,
        attr: result.data.result[0],
        style: {
          url: "gltf/" + (item["code"]).substring(0, 2) + ".gltf",
          url: "gltf/" + (result.data.result[0]["code"]).substring(0, 2) + ".gltf",
          scale: 0.5,
          minimumPixelSize: 20,
          highlight: {
@@ -102,7 +156,7 @@
          },
          label: {
            //不需要文字时，去掉label配置即可
            text: item["code"],
            text: result.data.result[0]["code"],
            font_size: 16,
            // TODO need to be changed according to qindex color.
            color: "#ff00ff",
@@ -111,7 +165,7 @@
            pixelOffsetY: -20,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 50000,
            distanceDisplayCondition_near: 0,
            distanceDisplayCondition_near: 100,
          },
        },
      });
@@ -120,3 +174,20 @@
    }
  });
}

function getFormattedDateTime(date) {

  var year = date.getFullYear();//年
  var month = date.getMonth();//月
  var day = date.getDate();//日
  var hours = date.getHours();//时
  var mins = date.getMinutes();//分
  var seconds = date.getSeconds();//秒

  return date.getFullYear() + "-" +
    ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
    (day > 9 ? day : ("0" + day)) + " " +
    (hours > 9 ? hours : ("0" + hours)) + ":" +
    (mins > 9 ? mins : ("0" + mins)) + ":" +
    (seconds > 9 ? seconds : ("0" + seconds));
}

 js/function_wind.js

@@ -108,7 +108,16 @@
  Vec_annoTileLayer.pid = 50;
  map.addLayer(Vec_annoTileLayer);
}

function addTmpHighlightGraphicLayer() {
  mars3d.global_variables.tmpHighlightGraphicLayer = new mars3d.layer.GraphicLayer({
    name: "临时高亮图层",
    pid: 50, //图层管理 中使用，父节点id
    noCenter: true,
    popup: "all",
    show: true
  });
  map.addLayer(mars3d.global_variables.tmpHighlightGraphicLayer);
}
function addMaskShanghai() {
  //geojson 合肥边界线
  geoJsonLayer = new mars3d.layer.GeoJsonLayer({

 widgets/manageLayers_style/view.js

@@ -299,6 +299,8 @@
      }else if (layer.options.id =1001){
        layer.options.style_selected = this.value;
        layer.changeColor();
      }else if (layer.options.id =1004){
        layer.options.style_selected = this.value;
      }
      //TODO
    });