移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/leftMenu/sousuo.vue

@@ -5,7 +5,10 @@
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        ><i
          class="el-icon-search"
          style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
        ></i
        >{{ syssval }}</span
      >
      <span
@@ -25,13 +28,9 @@
          right: -3px;
        "
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="AddFavorite"
        />
        <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
      </span>
      <span
      <!-- <span
        v-show="syssval == '请输入关键词搜索地图'"
        style="float: right; height: 100%; width: 10%"
      >
@@ -40,17 +39,13 @@
          style="width: 20px"
          @click.stop="showAddFavorite"
        />
      </span>
      </span> -->
    </div>
    <!-- 搜索界面 -->
    <div class="ssjm" v-show="ssjm">
      <!-- 搜索界面顶部 -->
      <div class="menutop">
        <div class="menutitle">搜索</div>
        <div class="menuback" @click="cancless">关闭</div>
      </div>
    <div class="ssjm" v-if="ssjm">
      <!-- 搜索框 -->
      <div style="margin: 0.1rem 0">
      <div class="search-container">
        <div class="back" @click="cancless"></div>
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
@@ -58,11 +53,15 @@
          @input="changeInput"
          clearable
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </div>
      <!-- 结果显示 -->
@@ -74,47 +73,36 @@
            :key="index"
            @click="flyTo(item)"
          >
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
          <div class="poiName" style="margin: 0.05rem 0">
              <img src="@/assets/img/navigation/location.png" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div style="font-size: 0.12rem; color: black">
              <!-- <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span><br />
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
            <div class="addressBox">
              <span>{{ item.address ? item.address : "暂无详细地址" }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="ssjg" v-show="ssjgxs">请输入关键词搜索地图</div>
        <div class="ssjg" v-show="ssjgxs">未搜索到结果</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 搜索按钮的样式 */
.iszd {
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
}

/* 搜索框的样式 */
.ssk {
  position: absolute;
  /* text-align: center; */
  left: 2.5%;
  bottom: 0.2rem;
  top: 0.15rem;
  width: 95%;
  border: 1px solid white;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.2rem;
  border-radius: 0.14rem;
  color: black;
  font-size: 0.14rem;
}
@@ -127,28 +115,109 @@
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  z-index: 3000;
  z-index: 1099;
}
.search-container {
  /* background-color: #fff; */
  background-color: #fff;
  display: flex;
  height: 52px;
  align-items: center;
}
.back {
  background: url("~@/assets/img/search/back.png") center center no-repeat;
  background-size: 10px 17px;
  height: 40px;
  width: 50px;
}

/* 每条搜索结果 */
.everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
.el-input {
  width: 85%;
  background-color: #eee;
  border-radius: 13px;
}
.el-input /deep/ .el-input-group__append,
.el-input /deep/ .el-input-group__prepend {
  background-color: transparent;
  border: none;
}

.el-input /deep/ .el-input__inner {
  border: none;
  font-weight: 500;
  font-size: 0.14rem;
  color: #3e3d3d;
}
.el-select {
  width: 0.8rem;
  position: relative;
  font-size: 0.14rem;
}
.el-select:after {
  content: "";
  position: absolute;
  right: 0;
  height: 24px;
  border-left: 1px solid #dcdcdc;
  top: 50%;
  transform: translateY(-50%);
}
.el-input /deep/ .el-input-group__append {
  width: 50px;
  padding-right: 25px;
}
.el-input /deep/ .el-input-group__append .el-button {
  font-size: 0.14rem;
  color: #ffffff;
  background: #2477ff;
  border-radius: 13px;
  padding: 10px;
}

.el-scrollbar .hover {
  background: none;
}

/* 
  搜索结果 
*/
.ssjg {
  overflow-x: hidden;
  overflow-y: scroll;
  /* max-height: 4rem; */
  max-height: 80vh;
  max-height: calc(98vh - 50px);
  background: white;
  padding: 0.2rem;
  border-radius: 0.05rem;
}

.ssjg .everyinfo {
  color: #409eff;
  padding: 0.05rem;
  font-size: 0.16rem;
  border-bottom: 1px solid lightgray;
}
.ssjg .poiName {
  display: flex;
  align-items: center;
  height: 20px;
}
.ssjg .poiName img {
  width: 20px;
}
.ssjg .poiName span {
  margin-left: 7px;
  line-height: 20px;
}
.ssjg .addressBox {
  margin-left: 27px;
  margin-top: 5px;
  color: #000;
  font-weight: 500;
  font-size: 13px;
}
.ssjg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
@@ -172,14 +241,15 @@
  background: rgba(218, 218, 218, 0.1);
}
</style>

<script>
let timers = null;

import axios from "axios";
import store from "@/utils/store.js";
import common from "@/components/common";
let flyPoint;
let flyLine;

window.flyPoint = null;
window.flyLine = null;
let Allresults = [];

export default {
@@ -193,25 +263,40 @@
      showList: false,
      total: 0,
      poiList: [],
      select: "POI",
      options: [
        {
          label: "全部",
          value: "全部",
        },
        {
          label: "POI",
          value: "POI",
        },
        {
          label: "地块",
          value: "地块",
        },
      ],
    };
  },
  methods: {
    clearval() {
      this.syssval = "请输入关键词搜索地图";
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
      flyLine && sgworld.Creator.DeleteObject(flyLine);
      flyLine = undefined;
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyPoint = undefined;
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      window.flyLine = undefined;
      this.poi_text = "";
      this.ssjgxs = false;
    },
    changeInput() {
      if (this.poi_text === "") {
        this.ssjgxs = false;
        flyPoint && Viewer.entities.remove(flyPoint);
        flyPoint = undefined;
        flyLine && sgworld.Creator.DeleteObject(flyLine);
        flyLine = undefined;
        window.flyPoint && Viewer.entities.remove(window.flyPoint);
        window.flyPoint = undefined;
        window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
        window.flyLine = undefined;
      } else {
        clearTimeout(timers);
        timers = setTimeout(() => {
@@ -254,6 +339,100 @@
      rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
      return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
    },
    getGdPoi() {
      axios
        .get(common.poiserve, {
          params: {
            request: "GdPoi",
            keywords: this.poi_text,
            output: "json",
            coord: "cgcs2000",
            offset: 20,
            page: 1,
          },
        })
        .then((res) => {
          // 高德
          if (res.data.status == 1) {
            res.data.pois &&
              res.data.pois
                .filter((item) => {
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.pname.includes("北京") &&
                    item.name.includes(this.poi_text) &&
                    !reg.test(item.typecode)
                  );
                })
                .forEach((val) => {
                  let poiarr = val.location.split(",");
                  let poi = {
                    lon: parseFloat(poiarr[0]),
                    lat: parseFloat(poiarr[1]),
                  };
                  let obj = {
                    adcode: val.adcode,
                    address: val.address,
                    adname: val.area,
                    citycode: val.citycode,
                    cityname: val.cityname,
                    id: val.uid,
                    lat: poi.lat,
                    lng: poi.lon,
                    name: val.name,
                    pcode: val.pcode,
                    pname: val.province,
                    type: val.type,
                    typecode: val.typecode,
                  };
                  Allresults.push(obj);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    getData() {
      axios
        .post(common.poiserve2, {
          adcode: "110115",
          address: {
            name: "",
            type: "",
          },
          adname: "大兴区",
          cityname: "北京市",
          name: {
            name: this.poi_text,
            type: "",
          },
          page: 1,
          perPageCount: 20,
          pcode: "110000",
          pname: "",
          resType: "",
        })
        .then((res) => {
          if (res.status == 200) {
            res.data.data.res &&
              res.data.data.res
                .filter((item) => {
                  // 判断地块是否有汉字
                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
                  return (
                    item.name.includes(this.poi_text) && reg.test(item.typecode)
                  );
                })
                .forEach((val) => {
                  Allresults.push(val);
                });
          }
          this.total = Allresults.length;
          this.poiList = Allresults;
          this.showList = true;
        });
    },
    search() {
      if (this.poi_text === "") {
        this.poiList = [];
@@ -262,111 +441,140 @@
        this.ssjgxs = true;
        Allresults = [];
        this.poiList = [];
        axios
          .all([
            // 115接口（可查地块名）
            axios.post(common.poiserve2, {
              adcode: "110115",
              address: {
                name: "",
                type: "",
              },
              adname: "大兴区",
              cityname: "北京市",
              name: {
                name: this.poi_text,
                type: "",
              },
              page: 1,
              perPageCount: 20,
              pcode: "110000",
              pname: "",
              resType: "",
            }),
            // // 市级平台（百度：会查到外地）
            // axios.get(common.poiserve, {
            //   params: {
            //     request: "bdPoi",
            //     query: this.poi_text,
            //     output: "json",
            //     coord: "cgcs2000",
            //     page_num: 0,
            //     page_size: 20,
            //   },
            // }),
            //  市级平台（高德）
            axios.get(common.poiserve, {
              params: {
                request: "GdPoi",
                keywords: this.poi_text,
                output: "json",
                coord: "cgcs2000",
                offset: 20,
                page: 1,
              },
            }),
          ])
          .then(
            (data) => {
              // this.total = data.data.pois.length;
              // this.poiList =
              //   data.data && data.data.pois;
              //115接口
              if (data[0].status == 200) {
                data[0].data.data.res
                  .filter((item) => {
                    return item.name.includes(this.poi_text);
                  })
                  .forEach((val) => {
                    Allresults.push(val);
                  });
              }
              // 市级平台
              // // 百度
              // if (data[1].data.status == 0) {
              //   data[1].data.results.forEach((val) => {
              //     let obj = {
              //       address: val.address,
              //       adname: val.area,
              //       cityname: val.city,
              //       id: val.uid,
              //       lat: val.location.lat,
              //       lng: val.location.lng,
              //       name: val.name,
              //       pname: val.province,
              //     };
              //     Allresults.push(obj);
              //   });
              // }
              // 高德
              if (data[1].data.status == 1) {
                data[1].data.pois.forEach((val) => {
                  let poiarr = val.location.split(",");
                  let poi = {
                    lon: parseFloat(poiarr[0]),
                    lat: parseFloat(poiarr[1]),
                  };
                  let obj = {
                    address: val.address,
                    adname: val.area,
                    cityname: val.city,
                    id: val.uid,
                    lat: poi.lat,
                    lng: poi.lon,
                    name: val.name,
                    pname: val.province,
                  };
                  Allresults.push(obj);
                });
              }
              this.total = Allresults.length;
              this.poiList = Allresults;
              this.showList = true;
            },
            (response) => {
              console.log("error");
            }
          );
        switch (this.select) {
          case "全部":
            this.getGdPoi();
            this.getData();
            // axios
            //   .all([
            //     // 115接口（可查地块名）
            //     axios.post(common.poiserve2, {
            //       adcode: "110115",
            //       address: {
            //         name: "",
            //         type: "",
            //       },
            //       adname: "大兴区",
            //       cityname: "北京市",
            //       name: {
            //         name: this.poi_text,
            //         type: "",
            //       },
            //       page: 1,
            //       perPageCount: 20,
            //       pcode: "110000",
            //       pname: "",
            //       resType: "",
            //     }),
            //     // // 市级平台（百度：会查到外地）
            //     // axios.get(common.poiserve, {
            //     //   params: {
            //     //     request: "bdPoi",
            //     //     query: this.poi_text,
            //     //     output: "json",
            //     //     coord: "cgcs2000",
            //     //     page_num: 0,
            //     //     page_size: 20,
            //     //   },
            //     // }),
            //     //  市级平台（高德）
            //     axios.get(common.poiserve, {
            //       params: {
            //         request: "GdPoi",
            //         keywords: this.poi_text,
            //         output: "json",
            //         coord: "cgcs2000",
            //         offset: 20,
            //         page: 1,
            //       },
            //     }),
            //   ])
            //   .then(
            //     (data) => {
            //       // this.total = data.data.pois.length;
            //       // this.poiList =
            //       //   data.data && data.data.pois;
            //       //115接口
            //       if (data[0].status == 200) {
            //         data[0].data.data.res &&
            //           data[0].data.data.res
            //             .filter((item) => {
            //               return item.name.includes(this.poi_text);
            //             })
            //             .forEach((val) => {
            //               Allresults.push(val);
            //             });
            //       }
            //       // 市级平台
            //       // // 百度
            //       // if (data[1].data.status == 0) {
            //       //   data[1].data.results.forEach((val) => {
            //       //     let obj = {
            //       //       address: val.address,
            //       //       adname: val.area,
            //       //       cityname: val.city,
            //       //       id: val.uid,
            //       //       lat: val.location.lat,
            //       //       lng: val.location.lng,
            //       //       name: val.name,
            //       //       pname: val.province,
            //       //     };
            //       //     Allresults.push(obj);
            //       //   });
            //       // }
            //       // 高德

            //       console.log(data, "数据");
            //       if (data[0].data.status == 1) {
            //         data[0].data.pois &&
            //           data[0].data.pois
            //             .filter((item) => {
            //               return (
            //                 item.pname.includes("北京") &&
            //                 item.name.includes(this.poi_text)
            //               );
            //             })
            //             .forEach((val) => {
            //               let poiarr = val.location.split(",");
            //               let poi = {
            //                 lon: parseFloat(poiarr[0]),
            //                 lat: parseFloat(poiarr[1]),
            //               };
            //               let obj = {
            //                 adcode: val.adcode,
            //                 address: val.address,
            //                 adname: val.area,
            //                 citycode: val.citycode,
            //                 cityname: val.cityname,
            //                 id: val.uid,
            //                 lat: poi.lat,
            //                 lng: poi.lon,
            //                 name: val.name,
            //                 pcode: val.pcode,
            //                 pname: val.province,
            //                 type: val.type,
            //                 typecode: val.typecode,
            //               };
            //               Allresults.push(obj);
            //             });
            //       }
            //       this.total = Allresults.length;
            //       this.poiList = Allresults;
            //       this.showList = true;
            //       console.log(Allresults);
            //     },
            //     (response) => {
            //       console.log("error");
            //     }
            //   );
            break;
          case "POI":
            this.getGdPoi();
            break;
          case "地块":
            this.getData();
            break;
        }
      }
    },
    getPosition(geo) {
@@ -380,8 +588,8 @@
      // let degrees = item.location.split(',');
      // let degrees = [item.location.lng, item.location.lat];
      let degrees = [item.lng, item.lat];
      flyPoint && Viewer.entities.remove(flyPoint);
      flyLine && sgworld.Creator.DeleteObject(flyLine);
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      sgworld.Navigate.flyToPointsInterest({
        destination: Cesium.Cartesian3.fromDegrees(
          degrees[0],
@@ -390,7 +598,7 @@
        ),
      });
      // 添加点位
      flyPoint = Viewer.entities.add({
      window.flyPoint = Viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
@@ -399,7 +607,7 @@
          heightReference: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        properties:item
        properties: item,
      });
      // 如果是地块，添加范围线
      if (item.type == "大兴用地") {
@@ -428,7 +636,7 @@
                  z: 0,
                });
              }
              flyLine = sgworld.Creator.createPolyline(
              window.flyLine = sgworld.Creator.createPolyline(
                geometry,
                "#ff0000",
                1,