add weather widget

wangzhibo

2021-09-30 1afdd3e3a60a0e05648196e27497cfaddb360004

add weather widget

 widgetsTS/weather/view.css

New file
@@ -0,0 +1,13 @@
.append_weather {
    position: absolute;
    top: 10px;
    left:450px;
    z-index: 999;
    padding:0px;
    color: #ffffff;
    width:150px;
    height: 50px;
    background-color: rgba(63, 72, 84, 0.7);
    border: none;
    border-radius: 6px;
}

 widgetsTS/weather/view.html

New file
@@ -0,0 +1,74 @@
<div id="weather_simple" class="input-group input-group-lg append_weather">
  <span style="width: 100px;padding-left:5px;" class="fa input-group-addon dropdown-toggle" data-toggle="dropdown"><img
      id="weather_icon" src="./img/qweather/100.svg" width="30" height="30">
    <span>&nbsp;&nbsp;</span>
    <span id="weather_text" style="width: 50px;"></span>
    <span>&nbsp;&nbsp;</span>
    <span id="weather_temp" style="width: 50px;"></span>°C
  </span>

  <ul class="dropdown-menu">
    <div class="c-city-weather-current__bg">
      <table class="table c-city-weather-current__basic" style="color: white;">
          <tbody>
          <tr>
              <td>
                  <div class="now-basic-container">
                      <img src="./img/qweather/wind--night.png">
                      <div class="basic-item">
                              <div class="basic-item__value"><span id="weather_windScale">0</span>级</div>
                          <div class="basic-item__type"><span id="weather_windDir">东南风</span></div>
                      </div>
                  </div>
              </td>
              <td>
                  <div class="now-basic-container">
                      <img src="./img/qweather/uv--night.png" >
                      <div class="basic-item">
                              <div class="basic-item__value"><span id="weather_feelsLike">0</span>°C</div>
                          <div class="basic-item__type">体感温度</div>
                      </div>
                  </div>
              </td>
              <td>
                  <div class="now-basic-container">
                      <img src="./img/qweather/hum--night.png" >
                      <div class="basic-item">
                          <div class="basic-item__value"><span id="weather_humidity">0</span>%</div>
                          <div class="basic-item__type">相对湿度</div>
                      </div>
                  </div>
              </td>
              <td class="hidden-740">
                  <div class="now-basic-container">
                      <img src="./img/qweather/pressure--night.png" >
                      <div class="basic-item">
                          <div class="basic-item__value"><span id="weather_pressure">0</span>hPa</div>
                          <div class="basic-item__type">大气压</div>
                      </div>
                  </div>
              </td>
              <td class="hidden-740">
                  <div class="now-basic-container">
                      <img src="./img/qweather/pcpn--night.png" >
                      <div class="basic-item">
                          <div class="basic-item__value"><span id="weather_precip">0.0</span>mm</div>
                          <div class="basic-item__type">降水量</div>
                      </div>
                  </div>
              </td>
              <td class="hidden-740">
                  <div class="now-basic-container">
                      <img src="./img/qweather/vis--night.png" >
                      <div class="basic-item">
                          <div class="basic-item__value"><span id="weather_vis">0</span>KM</div>
                          <div class="basic-item__type">能见度</div>
                      </div>
                  </div>
              </td>
          </tr>
          </tbody>
      </table>
  </div>
  </ul>
</div>

 widgetsTS/weather/widget.js

New file
@@ -0,0 +1,99 @@
'use script'; //开发环境建议开启严格模式

(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
    get resources() {
      return ['view.css']
    }
    //页面配置， append是添加DOM节点到html中的方式
    get view() {
      return {
        type: 'append',
        url: 'view.html',
        parent: "#centerDiv"
      }
    }

    //初始化[仅执行1次]
    create() {
      this.config = this.config?.params || {}; //传入过来的参数
    }
    //每个窗口创建完成后调用
    winCreateOK(viewopt, html) {
      if (viewopt.type != "append") {
        return;
      }
      this.reloadData();
    }

    reloadData() {
      $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_weather_" + mars3d.global_variables.queryDataType + "&datatime=" + mars3d.global_variables.queryDataTStart + "&siteid=" + mars3d.global_variables.weathercitycode, (result) => {
        if (result.data.result.length > 0 ){
          var current_weather = result.data.result[0];
        //var current_weather = { "temp": "25", "feelsLike": "29", "icon": "150", "text": "晴", "wind360": "90", "windDir": "东风", "windScale": "0", "windSpeed": "0", "humidity": "88", "precip": "0.0", "pressure": "1009", "vis": "16", "cloud": "3", "dew": "23" };
        $("#weather_temp").html(current_weather.temp);
        $("#weather_text").html(current_weather.text);
        $("#weather_icon").attr('src', './img/qweather/' + current_weather.icon + '.svg');
        $("#weather_windScale").html(current_weather.windScale);
        $("#weather_windDir").html(current_weather.windDir);
        $("#weather_feelsLike").html(current_weather.feelsLike);
        $("#weather_humidity").html(current_weather.humidity);
        $("#weather_pressure").html(current_weather.pressure);
        $("#weather_precip").html(current_weather.precip);
        $("#weather_vis").html(current_weather.vis);
        $("#weather_dew").html(current_weather.dew);

        mars3d.global_variables.wind360 = current_weather.wind360;
        mars3d.global_variables.windSpeed = current_weather.windSpeed==0?1:current_weather.windSpeed;

        var wind = this.map.getLayerById(2001);
        wind.data = this.createWindData();
        }
        
      });
    }

    createWindData() {
      var arrU = [];
      var arrV = [];
      // 风向是以y轴正方向为零度顺时针转，0度表示北风。90度表示东风。
      // u表示经度方向上的风，u为正，表示西风，从西边吹来的风。
      // v表示纬度方向上的风，v为正，表示南风，从南边吹来的风。
      var u = mars3d.WindUtil.getU(mars3d.global_variables.windSpeed, mars3d.global_variables.wind360);
      var v = mars3d.WindUtil.getV(mars3d.global_variables.windSpeed, mars3d.global_variables.wind360);
      for (let i = 0; i < 9; i++) {
        arrU.push(u);
        arrV.push(v);
      }
      return {
        xmin: 120,
        xmax: 122,
        ymax: 32,
        ymin: 30,
        rows: 3,
        cols: 3,
        udata: arrU, //横向风速
        vdata: arrV, //纵向风速
      };
    }



    //激活插件
    activate() {

    }

    //释放插件
    disable() {
      //toastr.info('释放插件_example_append')
    }
  }

  //注册到widget管理器中。
  mars3d.widget.bindClass(MyWidget)

  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d)