text: //poi查询按钮 控件
  class PoiQueryButton extends mars3d.control.BaseControl {
    get parentContainer() {
      return document.getElementsByClassName("cesium-viewer-toolbar")[0];
    }
  
    /**
     * 创建_container控件容器对象的方法，
     * 只会调用一次
     * @return {void}  无
     * @private
     */
    _mountedHook() {
      // 初始化页面
      this.initQueryUI();
  
      //查询控制器
      this.queryPoi = new mars3d.query.GaodePOI();
  
      //创建矢量数据图层
      this.graphicLayer = new mars3d.layer.GraphicLayer();
      this._map.addLayer(this.graphicLayer);
  
      //鼠标单击后的信息面板弹窗
      this.graphicLayer.bindPopup(function (event) {
        let item = event.graphic.attr;
        if (!item) {
          return;
        }
        var inHtml = `<div class="mars-popup-titile"><a href="https://www.amap.com/detail/${item.id}"  target="_black" style="color: #ffffff; ">${item.name}</a></div><div class="mars-popup-content" >`;
  
        var phone = $.trim(item.tel);
        if (phone != "") {
          inHtml += "<div><label>电话</label>" + phone + "</div>";
        }
  
        var dz = $.trim(item.address);
        if (dz != "") {
          inHtml += "<div><label>地址</label>" + dz + "</div>";
        }
  
        if (item.type) {
          var fl = $.trim(item.type);
          if (fl != "") {
            inHtml += "<div><label>类别</label>" + fl + "</div>";
          }
        }
        inHtml += "</div>";
  
        return inHtml;
      });
    }
  
    clear() {
      var ulList = this.poiButtonResult.querySelector(".searchResults");
      var gaodesousuo = this.poiButtonResult.querySelector(".gaodesousuo");
      if (ulList) {
        ulList.remove();
      }
      if (this.resultNextPages) {
        this.resultNextPages.remove();
      }
      if (gaodesousuo) {
        gaodesousuo.remove();
      }
      if (this.graphicLayer) {
        this.graphicLayer.clear();
      }
    }
  
    //初始化所有相关UI
    initQueryUI() {
      //高度值获取
      this._container = mars3d.DomUtil.create("div", "cesium-button cesium-toolbar-button");
      this._container.style.display = "inline-block";
      this._container.setAttribute("title", this.options.title || "POI查询");
  
      mars3d.DomUtil.createSvg(
        33,
        33,
        "M29.772,26.433l-7.126-7.126c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127L29.772,26.433zM7.203,13.885c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486c-0.007,3.58-2.905,6.476-6.484,6.484C10.106,20.361,7.209,17.465,7.203,13.885z",
        this._container
      );
  
      //鼠标移入移出
      let cacheTarget;
      this._container.addEventListener("mouseover", (e) => {
        //缓存，提高效率
        if (cacheTarget == this.uuid) {
          return;
        }
        cacheTarget = this.uuid;
  
        // console.log("mouseover");
        if (this.toolSearch.style.display !== "block") {
          this.toolSearchNoShow("block");
          this.toolActive();
          mars3d.DomUtil.addClass(this._container, "queryPoiButton");
  
          this._container.style.height = this.parentContainer.offsetHeight + 40 + "px";
          this.poiButtonResult.style.height = this.parentContainer.offsetHeight - 10 + "px";
        }
      });
      this._container.addEventListener("mouseout", (e) => {
        cacheTarget = null;
        // console.log("mouseout");
        var queryVal = this.toolSearch.querySelector(".searchInput").value;
        if (queryVal.length == 0) {
          this.clear();
          this.toolSearchNoShow("none");
          mars3d.DomUtil.removeClass(this._container, "queryPoiButton");
          this._container.style.height = "";
        }
      });
  
      // input面板，在queryPoiButton下面
      this.toolSearch = mars3d.DomUtil.create("div", "toolSearch");
      this._container.appendChild(this.toolSearch);
  
      // 搜寻结果，在mars3dContainer面板下面
      this.poiButtonResult = mars3d.DomUtil.create("div", "poiButtonResult");
      this._container.appendChild(this.poiButtonResult);
      this.toolSearchNoShow("none");
  
      // 创建input输入框
      var textInput = mars3d.DomUtil.create("input", "searchInput");
      textInput.type = "search";
      textInput.setAttribute("placeholder", "请输入地址...");
      this.toolSearch.appendChild(textInput);
  
      // input的单击事件
      var deleteInput = mars3d.DomUtil.create("div", "deleteInput");
      this.toolSearch.appendChild(deleteInput);
  
      this.addElementP(deleteInput, "×", () => {
        this.toolSearch.querySelector(".searchInput").value = "";
        this.clear();
        this.toolSearchNoShow("none");
        mars3d.DomUtil.removeClass(this._container, "queryPoiButton");
        this._container.style.height = "";
        cacheTarget = null;
      });
  
      // 绑定change事件
      var timetik;
  
      textInput.addEventListener("input", () => {
        this.clear();
        clearTimeout(timetik);
        timetik = setTimeout(() => {
          var queryVal = this.toolSearch.querySelector(".searchInput").value;
          if (queryVal.length !== 0) {
            deleteInput.style.display = "block";
            this.autoTip(queryVal);
          }
        }, 250);
      });
  
      //绑定回车键
      textInput.addEventListener("keydown", (event) => {
        if (event.keyCode == "13") {
          clearTimeout(timetik);
          // 让change事件执行完成之后，在执行以下操作
          timetik = setTimeout(() => {
            this.clear();
            this.showPages = 1;
            this.strartQueryPOI();
          }, 250);
        }
      });
    }
    toolActive() {
      this.toolSearch.style.display = "block";
      let searchInput = this.toolSearch.querySelector(".searchInput");
      searchInput.focus();
      if (document.activeElement.tagName == "INPUT" && searchInput.value == "") {
        return;
      }
      this.clear();
      this.showPages = 1;
      this.strartQueryPOI();
    }
  
    // 根据输入框内容，查询显示列表
    strartQueryPOI() {
      var text = this.toolSearch.querySelector(".searchInput").value;
      if (text.trim().length == 0) {
        haoutil.msg("请输入搜索关键字！");
        return;
      }
      //输入经纬度数字时
      if (this.isLonLat(text)) {
        this.centerAtLonLat(text);
        return;
      }
      this.queryTextByServer(text);
    }
  
    queryTextByServer(text) {
      this.queryPoi.queryText({
        text: text,
        count: 10,
        page: this.showPages - 1,
        success: (result) => {
          // console.log("文字搜索", result);
          var pois = result.list;
          if (pois.length > 0) {
            result.list.forEach((item, index) => {
              if (!item.x || !item.y) {
                return;
              }
              // 在地图上将搜寻的结果展现为矢量数据
              var graphic = new mars3d.graphic.PointEntity({
                id: item.id,
                position: [item.x, item.y],
                style: {
                  name: item.name,
                  pixelSize: 10,
                  color: "#3388ff",
                  outline: true,
                  outlineColor: "#ffffff",
                  outlineWidth: 2,
                  scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
                  clampToGround: true, //贴地
                  visibleDepth: false, //是否被遮挡
  
                  highlight: {
                    type: mars3d.EventType.click,
                    color: "#ff0000",
                  },
  
                  label: {
                    text: item.name,
                    font_size: 20,
                    color: "rgb(240,255,255)",
                    outline: true,
                    outlineWidth: 2,
                    outlineColor: Cesium.Color.BLACK,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    pixelOffsetY: -10, //偏移量
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
                    clampToGround: true, //贴地
                    visibleDepth: false, //是否被遮挡
                  },
                },
                attr: item,
              });
              this.graphicLayer.addGraphic(graphic);
            });
            this.graphicLayer.flyTo();
            console.log(result);
            this.showDifferentPagesResult(result);
          }
        },
      });
    }
  
    flyTo(item) {
      var graphic = this.graphicLayer.getGraphicById(item.id);
      if (graphic == null) {
        window.toastr.warning(item.name + " 无经纬度坐标信息！");
        return;
      }
  
      graphic.openHighlight();
  
      graphic.flyTo({
        radius: 2000,
        complete: () => {
          graphic.openPopup();
        },
      });
    }
  
    //构造查询结果的面板Html
    showDifferentPagesResult(result) {
      this.poiButtonResult.innerHTML = "";
  
      // 页面上显示结果li列表
      var resultDiv = document.createElement("div");
      resultDiv.className = "searchResults";
  
      var suggestionsList = document.createElement("ul");
      resultDiv.appendChild(suggestionsList);
  
      this.poiButtonResult.appendChild(resultDiv);
  
      result.list.forEach((item, index) => {
        var name = item.name;
        if (!item.x || !item.y) {
          return;
        }
  
        var number;
        if (this.showPages > 1) {
          number = (this.showPages - 1) * 10 + index + 1;
        } else {
          number = index + 1;
        }
        var suggestions = document.createElement("li");
        var resultList = document.createTextNode(number + ". " + name);
  
        suggestionsList.appendChild(suggestions);
        suggestions.appendChild(resultList);
        suggestions.addEventListener("click", () => {
          this.flyTo(item);
        });
      });
      var allPages = Math.ceil(result.allcount / 10); // 全部的页数 10 = result.count
      this.resultNextPages = document.createElement("div");
      this.resultNextPages.className = "resultNextPages";
      this.poiButtonResult.appendChild(this.resultNextPages);
  
      // 共加载条数
      this.addElementP(this.resultNextPages, "共加载了" + result.allcount + "条", null);
  
      // 展示的页数
      this.addElementP(this.resultNextPages, this.showPages + "/" + allPages + "页", null);
  
      // 首页
      this.addElementP(this.resultNextPages, "首页", () => {
        this.showPages = 1;
        this.pagesClickToPages(this.resultNextPages);
      });
  
      // 上一页
      this.addElementP(this.resultNextPages, "<", () => {
        if (this.showPages == 1) {
          haoutil.msg("当前已是第一页！");
          return;
        }
        this.showPages--;
        this.pagesClickToPages(this.resultNextPages);
      });
  
      // 下一页
      this.addElementP(this.resultNextPages, ">", () => {
        if (this.showPages >= allPages) {
          haoutil.msg("当前已是最后一页！");
          return;
        }
        this.showPages++;
        this.pagesClickToPages(this.resultNextPages); //查询结果
      });
    }
  
    // 添加p元素
    addElementP(parentElement, chilidWord, callback) {
      var allResult = document.createElement("p");
      var allResultWord = document.createTextNode(chilidWord);
      parentElement.appendChild(allResult); //添加p元素
  
      allResult.appendChild(allResultWord); // 给p元素添加内容
  
      allResult.addEventListener("click", callback);
    }
    // 点击上、下一页，清空当前页
    pagesClickToPages(allPages) {
      if (allPages) {
        this.addElementP(this.poiButtonResult, this.showPages + "/" + allPages + "页");
      }
      if (this.graphicLayer) {
        this.graphicLayer.clear();
      }
      this.strartQueryPOI();
    }
  
    autoTip(text) {
      this.queryPoi.autoTip({
        text: text,
        success: (result) => {
          var pois = result.list;
          let gaodesousuo = this.poiButtonResult.querySelector(".gaodesousuo");
          if (gaodesousuo) {
            gaodesousuo.remove();
          }
          var resultDiv = document.createElement("div");
          resultDiv.className = "searchResults gaodesousuo";
  
          var suggestionsList = document.createElement("ul");
          resultDiv.appendChild(suggestionsList);
  
          this.poiButtonResult.appendChild(resultDiv);
  
          if (pois.length > 0) {
            result.list.forEach((item) => {
              var name = item.name;
  
              var suggestions = document.createElement("li");
              var resultList = document.createTextNode(name);
              var fa_search = document.createElement("span");
              fa_search.className = "fa fa-search";
              suggestions.appendChild(fa_search);
  
              suggestionsList.appendChild(suggestions);
              suggestions.appendChild(resultList);
              suggestions.addEventListener("click", () => {
                this.toolSearch.querySelector(".searchInput").value = name;
  
                this.showPages = 1;
                this.queryTextByServer(name);
              });
            });
          } else {
            resultDiv.style.display = "none";
          }
        },
      });
    }
  
    toolSearchNoShow(val) {
      this.toolSearch.style.display = val;
      this.poiButtonResult.style.display = val;
    }
  
    //===================坐标定位处理========================
    isLonLat(text) {
      var reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/; /*定义验证表达式*/
      return reg.test(text); /*进行验证*/
    }
    centerAtLonLat(text) {
      var arr = text.split(",");
      if (arr.length != 2) {
        return;
      }
  
      var jd = Number(arr[0]);
      var wd = Number(arr[1]);
      if (isNaN(jd) || isNaN(wd)) {
        return;
      }
  
      this.map.setCameraView({ x: jd, y: wd, minz: 2500 });
  
      //添加实体
      var graphic = new mars3d.graphic.PointEntity({
        position: Cesium.Cartesian3.fromDegrees(jd, wd),
        style: {
          color: "#3388ff",
          pixelSize: 10,
          outline: true,
          outlineColor: "#ffffff",
          outlineWidth: 2,
          scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
          clampToGround: true, //贴地
          visibleDepth: false, //是否被遮挡
        },
      });
      this.graphicLayer.addGraphic(graphic);
  
      graphic.bindPopup(`<div class="mars-popup-titile">坐标定位</div>
                <div class="mars-popup-content" >
                  <div><label>经度</label> ${jd}</div>
                  <div><label>纬度</label>${wd}</div>
                </div>`);
  
      setTimeout(() => {
        graphic.openPopup();
      }, 3000);
    }
  }
  