北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
lixuliang
2024-01-23 7f5ed1e4c925d87d87551a8f86ad53a7b563935e
src/components/leftMenu/sousuo.vue
@@ -58,6 +58,14 @@
          @input="changeInput"
          clearable
        >
          <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"
            icon="el-icon-search"
@@ -80,8 +88,8 @@
            <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.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
@@ -90,7 +98,7 @@
        </div>
      </div>
      <div v-else>
        <div class="ssjg" v-show="ssjgxs">请输入关键词搜索地图</div>
        <div class="ssjg" v-show="ssjgxs">未搜索到结果</div>
      </div>
    </div>
  </div>
@@ -128,7 +136,10 @@
  height: 100%;
  top: 0;
  background-color: #f3f3f3;
  z-index: 3000;
  z-index: 99;
}
.el-select {
  width: 80px;
}
/* 每条搜索结果 */
@@ -172,14 +183,16 @@
  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 +206,40 @@
      showList: false,
      total: 0,
      poiList: [],
      select: "全部",
      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(() => {
@@ -262,79 +290,225 @@
        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,
              },
            }),
          ])
          .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);
                });
              }
              this.total = Allresults.length;
              this.poiList = Allresults;
              this.showList = true;
            },
            (response) => {
              console.log("error");
            }
          );
        switch (this.select) {
          case "全部":
            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);
                  //   });
                  // }
                  // 高德
                  if (data[1].data.status == 1) {
                    data[1].data.pois &&
                      data[1].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":
            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;
              });
            break;
          case "地块":
            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;
              });
            break;
        }
      }
    },
    getPosition(geo) {
@@ -348,8 +522,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],
@@ -358,16 +532,16 @@
        ),
      });
      // 添加点位
      flyPoint = Viewer.entities.add({
      window.flyPoint = Viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          scale: 1,
          // image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
          image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
          image: window.SmartEarthRootUrl + "/Workers/image/mark1.png",
          heightReference: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        properties: item,
      });
      // 如果是地块,添加范围线
      if (item.type == "大兴用地") {
@@ -396,7 +570,7 @@
                  z: 0,
                });
              }
              flyLine = sgworld.Creator.createPolyline(
              window.flyLine = sgworld.Creator.createPolyline(
                geometry,
                "#ff0000",
                1,