web_show_function_ui_mars3d/public/cesium_example/example/js/PoiQueryButton.js

//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);
  }
}