add wind layer setting

wangzhibo

2021-09-08 2522535f370a61dab0cc0165d427756488d33313

add wind layer setting

 widgetsTS/logoAndMenu/view.html

@@ -27,8 +27,8 @@

        <ul id="menu4Child" class="menu4-ul">
            <li class="widget-btn"
                onclick="window.open//(&apos;http://www.marsgis.cn/ui/index2.html#!./page/system/menu/index.html&apos;)">
                <i class="fa fa-gear"></i>&#x7CFB;&#x7EDF;&#x7BA1;&#x7406;
                onclick="javascript:activateWidget('widgetsTS/windsetting/widget.js');javascript:$('#menu4Child').toggle()">
                <i class="fa fa-gear"></i>风场参数设置
            </li>
            <li class="widget-btn" onclick="window.open//(&apos;http://www.marsgis.cn&apos;)"><i
                    class="fa fa-home"></i>&#x5173;&#x4E8E;&#x6211;&#x4EEC;</li>

 widgetsTS/windsetting/view.html

New file
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>

<head>
  <title>风向图</title>
  <script type="text/javascript" src="../../lib/include-lib.js" libpath="../../lib/"
    include="jquery,jquery.minicolors,font-awesome,bootstrap,bootstrap-slider,layer,haoutil,turf,mars3d,mars3d-wind"></script>

  <link href="../../css/style.css" rel="stylesheet" />
</head>

<body class="dark">

  <!-- 面板 -->
  <div class="infoview">
    <table class="mars-table">
      <tr>
        <td class="nametd">粒子个数：</td>
        <td>
          <input id="txt_count" title="粒子个数" />
        </td>
      </tr>
      <tr>
        <td class="nametd">存活时间：</td>
        <td>
          <input id="txt_age" title="存活时间" />
        </td>
      </tr>

      <tr>
        <td class="nametd">移动速率：</td>
        <td>
          <input id="txt_speed" title="移动速率" />
        </td>
      </tr>

      <tr>
        <td class="nametd">线宽度：</td>
        <td>
          <input id="txt_linewidth" title="线宽度" />
        </td>
      </tr>
      <tr>
        <td class="nametd">线颜色：</td>
        <td>
          <input type="text" id="txtColor" class="form-control" style="width: 100px" value="#ffffff" />
        </td>
      </tr>
    </table>
  </div>

  <script type="text/javascript">
    "use script";

    //对应widget.js中MyWidget实例化后的对象
    var thisWidget

    //当前页面业务
    function initWidgetView(_thisWidget) {
      thisWidget = _thisWidget;

     
      $("#txt_count")
        .slider({ min: 100, max: 10000, step: 1, value: 1000 })
        .on("change", (e) => {
          thisWidget.setParticlesNumber(e.value.newValue);
        });
      $("#txt_age")
        .slider({ min: 10, max: 300, step: 1, value: 60 })
        .on("change", (e) => {
          thisWidget.setMaxAge(e.value.newValue);
        });
      $("#txt_speed")
        .slider({ min: 1, max: 100, step: 1, value: 60 })
        .on("change", (e) => {
          thisWidget.setSpeedRate(e.value.newValue);
        });
      $("#txt_linewidth")
        .slider({ min: 1, max: 10, step: 0.5, value: 1 })
        .on("change", (e) => {
          thisWidget.setLineWidth(e.value.newValue);
        });

      $("#txtColor").minicolors({
        position: "bottom left",
        control: "saturation",
        change: function (hex) {
          thisWidget.setColor(hex);
        },
      });


    }





  </script>
</body>

</html>

 widgetsTS/windsetting/widget.js

New file
@@ -0,0 +1,60 @@
'use script' //开发环境建议开启严格模式
  ;
(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置，2个弹窗的情形
    get view() {
      return {
        type: "window",
        url: "view.html",

        windowOptions: {
          width: 400,
          height: 400,
          left: 5,
          top: 120
        },
      };
    }
    //初始化[仅执行1次]
    create() {
      this.wind_layer = this.map.getLayerById(2001);
    }

    //每个窗口创建完成后调用
    winCreateOK(opt, result) {

    }
    //打开激活
    activate() {

    }
    //关闭释放
    disable() { }

    setParticlesNumber(vaule){
      this.wind_layer.particlesNumber = vaule;
    }
    setMaxAge(vaule){
      this.wind_layer.maxAge = vaule;
    }
    setSpeedRate(vaule){
      this.wind_layer.speedRate = vaule;
    }
    setLineWidth(vaule){
      this.wind_layer.lineWidth = vaule;
    }
    setColor(vaule){
      this.wind_layer.color = vaule;
    }
    


  }

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

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