北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
ZhAkps
2024-02-06 e8ec0a53b3fddeaf0f70ef38abad9a2ad1207c93
src/components/leftMenu/sousuo2.vue
@@ -2,44 +2,22 @@
  <div id="sousuo" class="sousuo">
    <!-- 搜索框 -->
    <div class="ssk" v-show="ssk.show">
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        >{{ syssval }}</span
      >
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        @click="clearval"
        style="float: right; height: 100%; width: 20%"
        ><i class="el-icon-circle-close"></i
      ></span>
      <span
        v-show="syssval !== '请输入关键词搜索地图'"
        style="
      <span @click="ssjmxs" style="float: left; height: 100%; width: 80%; overflow: hidden"><i class="el-icon-search"
          style="padding: 0px 15px 0px 20px"></i>{{ syssval }}</span>
      <span v-show="syssval !== '请输入关键词搜索地图'" @click="clearval" style="float: right; height: 100%; width: 20%"><i
          class="el-icon-circle-close"></i></span>
      <span v-show="syssval !== '请输入关键词搜索地图'" style="
          float: right;
          height: 100%;
          width: 10%;
          position: absolute;
          top: -1px;
          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
        v-show="syssval == '请输入关键词搜索地图'"
        style="float: right; height: 100%; width: 10%"
      >
        <img
          src="@/assets/img/navigation/addf.png"
          style="width: 20px"
          @click.stop="showAddFavorite"
        />
      <span v-show="syssval == '请输入关键词搜索地图'" style="float: right; height: 100%; width: 10%">
        <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="showAddFavorite" />
      </span>
    </div>
    <!-- 搜索界面 -->
@@ -51,37 +29,17 @@
      </div>
      <!-- 搜索框 -->
      <div style="margin: 0.1rem 0">
        <el-input
          placeholder="输入关键字搜索地图"
          autofocus
          v-model="poi_text"
          @input="changeInput"
          clearable
        >
        <el-input placeholder="输入关键字搜索地图" autofocus v-model="poi_text" @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-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"
            @click="search"
          ></el-button>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <!-- 结果显示 -->
      <div v-if="total != 0">
        <div class="ssjg" v-show="ssjgxs">
          <div
            class="everyinfo"
            v-for="(item, index) in poiList"
            :key="index"
            @click="flyTo(item)"
          >
          <div class="everyinfo" v-for="(item, index) in poiList" :key="index" @click="flyTo(item)">
            <div style="margin: 0.05rem 0">
              <i class="el-icon-map-location"></i>{{ item.name }}
            </div>
@@ -90,9 +48,7 @@
              <span>电话:{{ item.telphone ? item.telphone : "暂无联系方式" }}</span> -->
              <!-- <span>区域:{{ item.area ? item.area : "暂无区域信息" }}</span> -->
              <!-- <br /> -->
              <span
                >地址:{{ item.address ? item.address : "暂无详细地址" }}</span
              >
              <span>地址:{{ item.address ? item.address : "暂无详细地址" }}</span>
            </div>
          </div>
        </div>
@@ -136,11 +92,18 @@
  height: 100%;
  top: 0;
  background-color: #f3f3f3;
  z-index: 99999;
  z-index: 99;
}
.el-select {
  width: 80px;
}
.el-scrollbar .hover {
  background: none;
}
/* 每条搜索结果 */
.everyinfo {
@@ -190,7 +153,7 @@
import axios from "axios";
import store from "@/utils/store2.js";
import common from "@/components/common";
import { createPointMarker, flyToPoint } from '@/utils/map2.js'
window.flyPoint = null;
window.flyLine = null;
let Allresults = [];
@@ -528,68 +491,91 @@
    flyTo(item) {
      this.ssjm = false;
      this.syssval = item.name;
      let that = this;
      //飞行定位
      flyToPoint([item.lng, item.lat])
      //创建点位
      let layer = createPointMarker([item.lng, item.lat], item);
      window.map.addLayer(layer)
      // let that = this;
      // let degrees = item.location.split(',');
      // let degrees = [item.location.lng, item.location.lat];
      let degrees = [item.lng, item.lat];
      window.flyPoint && Viewer.entities.remove(window.flyPoint);
      window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      sgworld.Navigate.flyToPointsInterest({
        destination: Cesium.Cartesian3.fromDegrees(
          degrees[0],
          degrees[1],
          1000
        ),
      });
      // let degrees = [item.lng, item.lat];
      // window.flyPoint && Viewer.entities.remove(window.flyPoint);
      // window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
      // sgworld.Navigate.flyToPointsInterest({
      //   destination: Cesium.Cartesian3.fromDegrees(
      //     degrees[0],
      //     degrees[1],
      //     1000
      //   ),
      // });
      // 添加点位
      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/mark1.png",
          heightReference: 1,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        properties: item,
      });
      // 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/mark1.png",
      //     heightReference: 1,
      //     disableDepthTestDistance: Number.POSITIVE_INFINITY,
      //   },
      //   properties: item,
      // });
      // 如果是地块,添加范围线
      if (item.type == "大兴用地") {
        axios
          .get(
            window.gisBaseUrl +
              "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
              degrees[0] +
              "&lat=" +
              degrees[1] +
              "&geom=true&requesttype=json"
          )
          .then((response) => {
            let center = { lon: 0, lat: 0 };
            let polygon = that.read(response.data.geometry);
            if (polygon.length > 0) {
              var geometry = [];
              let points = polygon[0].split(",");
              for (let i = 0; i < points.length; i++) {
                let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
                center.lon += parseFloat(point[0]) / points.length;
                center.lat += parseFloat(point[1]) / points.length;
                geometry.push({
                  x: parseFloat(point[0]),
                  y: parseFloat(point[1]),
                  z: 0,
                });
              }
              window.flyLine = sgworld.Creator.createPolyline(
                geometry,
                "#ff0000",
                1,
                0,
                "线"
              );
            }
          });
      }
      // if (item.type == "大兴用地") {
      //   axios
      //     .get(
      //       window.gisBaseUrl +
      //       "yzxncsApi/geowinmap_xncs/ds?r=0.9158559377752831&serviceproviderid=map.vectorserviceprovider&serviceid=queryfeature&featcls=225%25E8%258C%2583%25E5%259B%25B4%25E5%2588%2586%25E5%258C%25BA%25E8%25A7%2584%25E5%2588%2592.geojson&lng=" +
      //       degrees[0] +
      //       "&lat=" +
      //       degrees[1] +
      //       "&geom=true&requesttype=json"
      //     )
      //     .then((response) => {
      //       let center = { lon: 0, lat: 0 };
      //       let polygon = that.read(response.data.geometry);
      //       if (polygon.length > 0) {
      //         var geometry = [];
      //         let points = polygon[0].split(",");
      //         for (let i = 0; i < points.length; i++) {
      //           let point = points[i].replace(/^\s+|\s+$/g, "").split(" ");
      //           center.lon += parseFloat(point[0]) / points.length;
      //           center.lat += parseFloat(point[1]) / points.length;
      //           geometry.push({
      //             x: parseFloat(point[0]),
      //             y: parseFloat(point[1]),
      //             z: 0,
      //           });
      //         }
      //         window.flyLine = sgworld.Creator.createPolyline(
      //           geometry,
      //           "#ff0000",
      //           1,
      //           0,
      //           "线"
      //         );
      //       }
      //     });
      // }
    },
    AddFavorite() {
      let posi = sgworld.Viewer.camera.position;