内置控件

目前平台内部已内置了一些常用控件，并在Map、图层、矢量数据 3类不同层次的对象中去使用

Popup鼠标单击信息窗

在graphic矢量数据对象上操作

// Popup相关
graphic.hasPopup() // 是否存在Popup绑定
graphic.bindPopup(content, options) // 绑定鼠标单击对象后的弹窗。
graphic.unbindPopup()  // 解除绑定的鼠标单击对象后的弹窗。
graphic.openPopup(position) // 打开Popup弹窗
graphic.closePopup()// 关闭弹窗

案例

// graphic
const htmlManager = (graphic) => {
  const   html = `<div class="marsTiltPanel marsTiltPanel-theme-blue">
          <div class="marsTiltPanel-wrap">
              <div class="area">
                  <div class="arrow-lt"></div>
                  <div class="b-t"></div>
                  <div class="b-r"></div>
                  <div class="b-b"></div>
                  <div class="b-l"></div>
                  <div class="arrow-rb"></div>
                  <div class="label-wrap">
                      <div class="title">岳西水厂</div>
                      <div class="label-content">
                          <div class="data-li">
                              <div class="data-label">实时流量：</div>
                              <div class="data-value"><span class="label-num">98</span><span class="label-unit">m³/s</span>
                              </div>
                          </div>
                          <div class="data-li">
                              <div class="data-label">水池液位：</div>
                              <div class="data-value"><span class="label-num">13.14</span><span class="label-unit">m</span>
                              </div>
                          </div>
                          <div class="data-li">
                              <div class="data-label">水泵状态：</div>
                              <div class="data-value">
                                <span id="btn-status1" class="label-tag data-value-status-1" title="中间状态">1号</span>
                                <span id="btn-status2" class="label-tag data-value-status-0" title="关闭状态">2号</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
          </div>
          <div class="arrow" ></div>
      </div>`
  // 使用弹框控件
  graphic.bindPopup(html, {
    template: false,
    offsetX: 150,
    offsetY: -20
  }).openPopup();
}

Tooltip鼠标移入信息窗

// Tooltip相关
graphic.hasTooltip() // 是否存在Tooltip绑定
graphic.bindTooltip(content, options) // 绑定鼠标移入对象后的弹窗。
graphic.unbindTooltip()  // 解除绑定的鼠标移入对象后的弹窗。
graphic.openTooltip(position) // 打开Tooltip弹窗
graphic.closeTooltip()// 关闭Tooltip弹窗

案例

const htmlManager = (graphic) => {
  const html = `<table style="width:280px;">
    <tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">graphic.bindTooltip</th></tr>
    <tr><td >说明：</td><td >Tooltip鼠标移入信息弹窗1 </td></tr>
    <tr><td >方式：</td><td >可以绑定任意html </td></tr>
    <tr><td >备注：</td><td >我是graphic上绑定的Tooltip</td></tr>
  </table>`;

  graphic.bindTooltip(html, { direction: "top" }).openTooltip()
};

右键菜单

// 右键菜单相关
graphic.hasContextMenu() // 是否有绑定的右键菜单
graphic.getContextMenu() // 获取绑定的右键菜单数组
graphic.bindContextMenu(content, options) // 绑定地图的默认右键菜单
graphic.unbindContextMenu() // 解除绑定的右键菜单
graphic.openContextMenu(position, options) // 打开右键菜单
graphic.closeContextMenu() // 关闭右键菜单