add change layer style option

wangzhibo

2021-09-24 696254697bba0fa3f13af4f686eaf8b7f09e1c43

add change layer style option

 js/function.js

@@ -3,7 +3,6 @@

var userid = '2';


var Vec_annoTileLayer;
var Img_annoTileLayer;

@@ -37,11 +36,33 @@




function getDefaultDateTime() {
  var now = new Date;
  now.setMinutes(now.getMinutes() - 60);
  return now.getFullYear + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + now.getHours() + ':00: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)) + ":00:00";
}
console.log(mars3d.globel_variables);
mars3d.globel_variables = { geoserver_url_predix: 'http://58.246.27.194:7011/', userid: 2, queryDataType: 'hour' };
mars3d.globel_variables.queryDataTStart = getDefaultDateTime();
mars3d.globel_variables.queryDataTEnd = getDefaultDateTime();
mars3d.globel_variables.layer100600_conifg = { name: '街道', styleoptions: ['pm25', 'pm10'], selectedstyle: 'pm25' };
console.log(mars3d.globel_variables);

mars3d.reloadLayers = function (layerid){

  if (layerid ==100611) {
    addJiedaoLayer();
  }

};


function addTDTAnnoLayer() {
@@ -70,8 +91,8 @@
  layer_1001_guokong = new mars3d.layer.DivLayer({
    name: '国控点',
    pid: 99, //图层管理 中使用，父节点id
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co']
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co']
  });
  map.addLayer(layer_1001_guokong);

@@ -90,26 +111,26 @@
  layer_1001_guokong.bindPopup(function (event) {
    let item = event.graphic?.attr;
    var html =
    "站点名称：" +
    item["SiteName"] +
    "<br />分区：" +
    item["RegionName"] +
    "<br />AQI:" +
    item["AQI"] +
    "<br />PM25:" +
    item["PM25"] + "ug/m3"+
    "<br />SO2:" +
    item["SO2"] + "ug/m3"+
    "<br />O3:" +
    item["O31"] + "ug/m3"+
    "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\""+item["高校名称"]+"\")' >详细信息</a></p>";
  return html;
      "站点名称：" +
      item["SiteName"] +
      "<br />分区：" +
      item["RegionName"] +
      "<br />AQI:" +
      item["AQI"] +
      "<br />PM25:" +
      item["PM25"] + "ug/m3" +
      "<br />SO2:" +
      item["SO2"] + "ug/m3" +
      "<br />O3:" +
      item["O31"] + "ug/m3" +
      "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["高校名称"] + "\")' >详细信息</a></p>";
    return html;
  });
  


  // 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"];
    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;
@@ -126,11 +147,11 @@
            type: "divLightPoint",
            diffHeight: 600,
            material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, {
            color: "#ffff00",
            count: 3,
            speed: 20,
          }),
         },
              color: "#ffff00",
              count: 3,
              speed: 20,
            }),
          },
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
        },
        show: true,
@@ -153,12 +174,12 @@
    layers: "konglu_58:vis_weizhan_hour",
    crs: "EPSG:4326",
    parameters: {
      "Styles":"point_weizhan_pm25",
      "Styles": "point_weizhan_pm25",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/point_weizhan_pm25.sld"
    },
    center: {"lat":30.429987,"lng":121.590473,"alt":58635,"heading":359,"pitch":-40},
    center: { "lat": 30.429987, "lng": 121.590473, "alt": 58635, "heading": 359, "pitch": -40 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -175,8 +196,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -200,12 +221,12 @@
    layers: "konglu_58:vis_weizhan_hour",
    crs: "EPSG:4326",
    parameters: {
      "Styles":"point_weizhan_pm25",
      "Styles": "point_weizhan_pm25",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/point_weizhan_pm25.sld"
    },
    center: {"lat":30.429987,"lng":121.590473,"alt":58635,"heading":359,"pitch":-40},
    center: { "lat": 30.429987, "lng": 121.590473, "alt": 58635, "heading": 359, "pitch": -40 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -222,8 +243,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -248,12 +269,12 @@
    layers: "konglu_58:vis_roadsection_hour",
    crs: "EPSG:4326",
    parameters: {
      "Stayle":"polyline_road_pm25",
      "Stayle": "polyline_road_pm25",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polyline_road_pm25.sld"
    },
    center:{"lat":30.487351,"lng":121.613269,"alt":54033,"heading":359,"pitch":-40},
    center: { "lat": 30.487351, "lng": 121.613269, "alt": 54033, "heading": 359, "pitch": -40 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -270,8 +291,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -302,7 +323,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center: {"lat":30.756467,"lng":121.614552,"alt":73242,"heading":360,"pitch":-56},
    center: { "lat": 30.756467, "lng": 121.614552, "alt": 73242, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -319,8 +340,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -349,7 +370,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center: {"lat":30.577234,"lng":121.664644,"alt":84121,"heading":360,"pitch":-56},
    center: { "lat": 30.577234, "lng": 121.664644, "alt": 84121, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -366,8 +387,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -396,7 +417,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center: {"lat":30.687288,"lng":121.623785,"alt":88144,"heading":360,"pitch":-56},
    center: { "lat": 30.687288, "lng": 121.623785, "alt": 88144, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -413,8 +434,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -444,7 +465,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center:{"lat":30.393398,"lng":121.534777,"alt":91038,"heading":360,"pitch":-56},
    center: { "lat": 30.393398, "lng": 121.534777, "alt": 91038, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -461,8 +482,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -491,7 +512,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center: {"lat":30.839605,"lng":121.372945,"alt":52000,"heading":360,"pitch":-56},
    center: { "lat": 30.839605, "lng": 121.372945, "alt": 52000, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -508,8 +529,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -538,7 +559,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center: {"lat":30.880665,"lng":121.305298,"alt":69363,"heading":360,"pitch":-56},
    center: { "lat": 30.880665, "lng": 121.305298, "alt": 69363, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -555,8 +576,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -585,7 +606,7 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_co.sld"
    },
    center:{"lat":30.736361,"lng":121.566128,"alt":83811,"heading":360,"pitch":-56},
    center: { "lat": 30.736361, "lng": 121.566128, "alt": 83811, "heading": 360, "pitch": -56 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -602,8 +623,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -629,12 +650,12 @@
    layers: "konglu_58:vis_region_100610_hour",
    crs: "EPSG:4326",
    parameters: {
      "Stayle":"polyline_road_pm25",
      "Stayle": "polyline_road_pm25",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_pm25.sld"
    },
    center:{"lat":30.594533,"lng":121.581681,"alt":93405,"heading":359,"pitch":-61},
    center: { "lat": 30.594533, "lng": 121.581681, "alt": 93405, "heading": 359, "pitch": -61 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -651,8 +672,8 @@
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
    flyTo: true
  });

@@ -668,22 +689,27 @@

function addJiedaoLayer() {

  let tmpLyaer = map.getLayerById(100611);
  if (tmpLyaer) {
    map.removeLayer(tmpLyaer);
  }

  //方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
  layer_100611_jiedao = new mars3d.layer.WmsLayer({
    // id : 10,
    id: 100611,
    pid: 1006,
    name: "街道",
    name: mars3d.globel_variables.layer100600_conifg.name,
    type: "wms",
    url: "http://58.246.27.194:7011/geoserver/konglu_58/wms",
    layers: "konglu_58:vis_region_100611_hour",
    url: mars3d.globel_variables.geoserver_url_predix + "geoserver/konglu_58/wms",
    layers: "konglu_58:vis_region_100600_" + mars3d.globel_variables.queryDataType,
    crs: "EPSG:4326",
    parameters: {
      "Stayle":"polyline_road_pm25",
      "styles": "polygon_region_" + mars3d.globel_variables.layer100600_conifg.selectedstyle,
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/polygon_region_pm25.sld"
      "viewparams": "userid:" + mars3d.globel_variables.userid + ";datatime:" + mars3d.globel_variables.queryDataTStart
    },
    center: {"lat":30.466245,"lng":121.562803,"alt":107679,"heading":356,"pitch":-58},
    center: { "lat": 30.466245, "lng": 121.562803, "alt": 107679, "heading": 356, "pitch": -58 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
@@ -699,10 +725,17 @@
      }),
    },
    popup: "all",
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    flyTo: true
    show: true,
    selectedMapStyleOptions: mars3d.globel_variables.layer100600_conifg.selectedstyle,
    hasMapStyleOptions: mars3d.globel_variables.layer100600_conifg.styleoptions,
    flyTo: false,
    reloadLayers:function(new_style){
      console.log(new_style);
      mars3d.globel_variables.layer100600_conifg.selectedstyle = new_style;

      addJiedaoLayer();
    }

  });

  //单击事件
@@ -711,6 +744,7 @@
  });

  map.addLayer(layer_100611_jiedao);


}

@@ -751,21 +785,21 @@
    layers: "konglu_58:vis_grid5000_hour",
    crs: "EPSG:4326",
    parameters: {
      "Stayle":"vis_grid100_1000_5000_co",
      "Stayle": "vis_grid100_1000_5000_co",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/vis_grid100_1000_5000_co.sld"
    },
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],
  });
  map.addLayer(layer_grid_5000);

  layer_grid_5000.reloadLayers = function (){
    layer_grid_5000.options.layers ="konglu_58:vis_grid5000_day";
    layer_grid_5000.options.parameters.sld ="http://127.0.0.1:8080/geoserver/styles/"+layer_grid_5000.options.selectedMapStyleOptions+".sld";
    layer_grid_5000.options.parameters.viewparams="id1:0;id2:10";
  layer_grid_5000.reloadLayers = function () {
    layer_grid_5000.options.layers = "konglu_58:vis_grid5000_day";
    layer_grid_5000.options.parameters.sld = "http://127.0.0.1:8080/geoserver/styles/" + layer_grid_5000.options.selectedMapStyleOptions + ".sld";
    layer_grid_5000.options.parameters.viewparams = "id1:0;id2:10";
    console.log(layer_grid_5000);
    layer_grid_5000.reload();
  }
@@ -795,22 +829,22 @@
    layers: "konglu_58:vis_grid1000_hour",
    crs: "EPSG:4326",
    parameters: {
      "Stayle":"vis_grid100_1000_5000_co",
      "Stayle": "vis_grid100_1000_5000_co",
      "transparent": "true",
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/vis_grid100_1000_5000_co.sld"
    },
    show:false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co'],
    show: false,
    selectedMapStyleOptions: 'pm25',
    hasMapStyleOptions: ['pm25', 'pm10', 'no', 'no2', 'nox', 'co'],

  });
  map.addLayer(layer_grid_1000);

  layer_grid_1000.reloadLayers = function (){
    layer_grid_1000.options.layers ="konglu_58:vis_grid1000_day";
    layer_grid_1000.options.parameters.sld ="http://127.0.0.1:8080/geoserver/styles/"+layer_grid_1000.options.selectedMapStyleOptions+".sld";
    layer_grid_1000.options.parameters.viewparams="id1:0;id2:10";
  layer_grid_1000.reloadLayers = function () {
    layer_grid_1000.options.layers = "konglu_58:vis_grid1000_day";
    layer_grid_1000.options.parameters.sld = "http://127.0.0.1:8080/geoserver/styles/" + layer_grid_1000.options.selectedMapStyleOptions + ".sld";
    layer_grid_1000.options.parameters.viewparams = "id1:0;id2:10";
    console.log(layer_grid_1000);
    layer_grid_1000.reload();
  }
@@ -847,7 +881,7 @@
  addQuanLayer();
  addXinzhenquLayer();
  addJiedaoLayer();
  

  addWindLayer();
  addGrid5Layers();
  addGrid1Layers();

 widgets/manageLayers_style/view.js

@@ -273,16 +273,16 @@
  }
  if (layer.options.hasMapStyleOptions) {
    var view = $("#" + tNode.tId);
    var radio_html = '<div id="'+tNode.tId+'_style" style="color: white;">';
    var radio_html = '<div id="' + tNode.tId + '_style" style="color: white;">';

    let item = layer.options.hasMapStyleOptions;

    for (var i = 0, len = item.length; i < len; i++) {

      radio_html += '<span class="button level1 switch center_docu" ></span><label><input type="radio" name="' + tNode.tId + '_style" value="" '+(item[i]==layer.options.selectedMapStyleOptions?"checked":"")+'/>'+item[i].toUpperCase()+'</label></br>';
      radio_html += '<span class="button level1 switch center_docu" ></span><label><input type="radio" name="' + tNode.tId + '_style" value="'+item[i]+'" ' + (item[i] == layer.options.selectedMapStyleOptions ? "checked" : "") + '/>' + item[i].toUpperCase() + '</label></br>';

    }
    radio_html +='</div>';
    radio_html += '</div>';

    view.append(radio_html);

@@ -290,12 +290,10 @@
      $("#" + tNode.tId + "_style").hide();
    }

    $('input[type=radio][name='+ tNode.tId + '_style]').change(function() {
    $('input[type=radio][name=' + tNode.tId + '_style]').change(function () {
      var layer = layersObj[tNode.uuid];
        layer.options.selectedMapStyleOptions = this.value;
        mars3d.reloadLayers(layer.id);
      
      });
      layer.options.reloadLayers(tmpValue);
    });
  }



 widgetsTS/dataTime/widget.js

@@ -68,9 +68,13 @@
      if (window.top) {
        request = $.extend(request, haoutil.system.getRequest(window.top));
      }
      mars3d.globel_variables = { userid: request.userid || 2, queryDataType: 'hour' };
      console.log( mars3d.globel_variables);
      mars3d.globel_variables = { geoserver_url_predix:'http://58.246.27.194:7011/',userid: request.userid || 2, queryDataType: 'hour' };
      mars3d.globel_variables.queryDataTStart = this.defaultDateTime;
      mars3d.globel_variables.queryDataTEnd = this.defaultDateTime;
      mars3d.globel_variables.layer100600_conifg={name:'街道',styleoptions:['pm25','pm10'],selectedstyle:'pm25'};
      console.log( mars3d.globel_variables);

    }