SuperMap iClient for Leaflet 自定义控件创建及一些样式的总结

在上图左边区域为自定义控件，首先我们来看一下效果

我这个项目的话是基于Vue + SuperMap iClient for Leaflet 来实现的一些功能：

     // 自定義控件
    customControl () {
      L.Control.Legend = L.Control.extend({
        options: {
          position: 'topright' // 初始位置
        },
        initialize: function (options) {
          L.Util.extend(this.options, options)
        },
        onAdd: function (map) {
          // 创建一个class为info legend的div
          this._container = L.DomUtil.create('div', 'mapdiv')
          this._container.innerHTML = `
            <div class="header" style="">终端信息操作</div>
            <div class="body" style="">
               <div class="navBox">
                <div class="myDiv" style="text-align: center; font-size: 16px;">--------第一层功能--------</div>
                <ul style="display: block;">
                 <li style="font-size: 13px;">点我搜索啊：
                  <div class="demo">
                    <span class="tip"></span>
                    <input style="width: 150px; type="text" autocomplete="off" value="请输入要查找的设备号" onfocus="if(value=='请输入要查找的设备号') value=''" onblur="if(!value)value='请输入要查找的设备号'" name="keyword">
                    <button style='margin-right:4px' id='btnFirst' :plain="true">搜索</button>
                    <button id='btnReset' :plain="true">重置</button>
                    <el-input placeholder="企业名称"></el-input>
                  </div>
                 </li>
                </ul>
                <div class="myDiv" style="text-align: center; font-size: 15px;">--------第二层功能--------</div>
                <ul style="display: none;">
                  <li style="font-size: 13px;">请选择您的功能：
                  <div class="demo">
                    <label><input name="Fruit" type="radio" value="" />苹果 </label>
                    <label><input name="Fruit" type="radio" value="" />桃子 </label>
                    <label><input name="Fruit" type="radio" value="" />西瓜 </label>
                  </div>
                 </li>
                </ul>
                <div class="myDiv" style="text-align: center; font-size: 15px;">--------第三层功能--------</div>
                <ul style="display: none;">
                  <li style="font-size: 13px;">点我搜索啊：
                  <div class="demo">
                    <span class="tip"></span>
                    <input type="text" name="" />
                    <button>搜索</button>
                  </div>
                 </li>
                </ul>
              </div>
            </div>
            <div class="footer" style="">BOTTOM</div>
         `
          return this._container
        }
      })
      L.control.legend = function (opts) {
        return new L.Control.Legend(opts)
      }
      var legend = L.control.legend({
        position: 'topright'
      })
      // 添加图例
      legend.addTo(this.map)
      // 菜單聯動
       /* global $ :writable */
      /* eslint no-undef: "error" */
      $(document).ready(function () {
        $('.myDiv').on('click', function () {
          $(this)
            .next('ul')
            .slideToggle(300)
            .siblings('ul')
            .slideUp(500)
        })
      })
    }

this._container.innerHTML  通过这个方法给控件中写入自己的样式以及一些所做的需求

我个人依据需求把菜单做成 “手风琴” 的样式