feat: 地图搜索

src/components/MMCFlightControlCenter/api/index.js

 export { default as Control_API } from './modules/uav_control';
 export { default as flightTaskAPI } from './modules/flightTask';
-export { default as AirLine } from './modules/air-line';
+export { default as AirLine } from './modules/air-line';
\ No newline at end of file
+export { default as Map } from './modules/map';
\ No newline at end of file

src/components/MMCFlightControlCenter/api/modules/map.js

+import axios from "axios";
+
+const key = "ced06243e56f41f5b7180f08731026da";
+const appKey = "30c6030f6e144f08b51f7781699276c3";
+
+export default class Map {
+  static Regeo(params) {
+    return new Promise((resolve, reject) => {
+      // 开发者模式
+      axios
+        .get("https://api.tianditu.gov.cn/geocoder", {
+          params: {
+            tk: key,
+            postStr: JSON.stringify(params),
+            type: "geocode",
+          },
+        })
+        .then((res) => {
+          if (
+            res.data &&
+            res.data.result &&
+            res.data.result.formatted_address
+          ) {
+            resolve(res.data.result.formatted_address);
+          } else {
+            reject(null);
+          }
+        })
+        .catch((e) => reject(e));
+    });
+  }
+
+  static AiRegeo(params) {
+    return new Promise((resolve, reject) => {
+      // 开发者模式
+      axios
+        .get("https://api.tianditu.gov.cn/geocoder", {
+          params: {
+            tk: key,
+            postStr: JSON.stringify(params),
+            type: "geocode",
+          },
+        })
+        .then((res) => {
+          if (res.data && res.data.result) {
+            resolve(res.data.result);
+          } else {
+            reject(null);
+          }
+        })
+        .catch((e) => reject(e));
+    });
+  }
+  //天地图编码查询
+  static Geo(params) {
+    let promise = axios
+      .get("https://api.tianditu.gov.cn/v2/search", {
+        params: {
+          tk: key,
+          postStr: JSON.stringify(params),
+          type: "query",
+        },
+      })
+      .then((res) => {
+        res.data.data = {
+          rows: [],
+        };
+        if (res.data.count > 0) {
+          res.data.data.rows = res.data.pois;
+        } else {
+          res.data.data.rows = [];
+        }
+
+        return res;
+      });
+    return promise;
+  }
+
+  static Driv(params) {
+    let promise = axios.get(
+      "http://32.128.12.138:21009/service/lbs/coder/geocoding2",
+      {
+        params: {
+          appKey,
+          city: "全国",
+          page_size: 20,
+          ...params,
+        },
+      }
+    );
+    return promise;
+  }
+}

src/components/MMCFlightControlCenter/components/mapSearch/index.vue

+<template>
+  <div class="cpt-select">
+    <div class="select_box" :class="isFind ? 'active' : ''">
+      <el-tooltip class="item" effect="light" content="搜索" placement="top-start">
+        <span class="iconfont icon-sousuo cf" @click.stop="isFind = !isFind"></span>
+      </el-tooltip>
+      <el-autocomplete
+        v-if="isFind"
+        popper-class="search"
+        :popper-append-to-body="false"
+        class="autocomplete"
+        v-model="destination.name"
+        :fetch-suggestions="handle_query_address_async"
+        placeholder="请输入目标位置"
+        :trigger-on-focus="false"
+        @select="handle_select_address"
+        clearable
+      >
+        <template slot-scope="{ item }">
+          <div>
+            <span style="font-size: 14px; color: #fff">
+              {{
+              item.name
+              }}
+            </span>
+            <span style="font-size: 12px; color: #999; margin-left: 12px">{{ item.address }}</span>
+          </div>
+        </template>
+      </el-autocomplete>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Map } from "../../api";
+import { Utils } from "../../lib/cesium";
+import { mapState } from "vuex";
+import pngLocation from "./assets/images/location.png";
+
+let handler = null;
+let data_srouce = null;
+let location_icon = null;
+export default {
+  components: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isFind: false,
+      input: "",
+      destination: {
+        name: "",
+        lng: 0,
+        lat: 0,
+      },
+    };
+  },
+  computed: {
+    ...mapState("MMCFlightControlCenter", ["cesiumViewer"]),
+  },
+  mounted() {
+    // 控制重要元素下拉菜单隐藏
+    document.addEventListener("click", (e) => {
+      const iconEl = document.querySelector(".cpt-select"); // 这里是要隐藏的弹窗 类名
+      if (iconEl && !iconEl.contains(e.target)) {
+        // contains 方法 就是查看包含关系
+        // contains 方法 本身含义：用于判断字符串中是否包含指定的字符或字符串
+        // 返回值 :如果包含指定的字符或字符串返回 true，否则返回 false。
+        this.isFind = false;
+      }
+    });
+  },
+  destroyed() {
+  },
+  methods: {
+    handle_query_address_async(address, cb) {
+      Map.Geo({
+        keyWord: address,
+        level: 12,
+        // specify: "156320900",
+        mapBound: "-180,-90,180,90",
+        queryType: 1,
+        start: 0,
+        count: 10,
+      })
+        .then((res) => {
+          cb(res.data.data.rows);
+        })
+        .catch((e) => cb([]));
+    },
+    handle_select_address(item) {
+      if (item) {
+        let location = item.lonlat.split(",");
+        this.destination.name = item.name;
+        this.destination.lng = Number(location[0]);
+        this.destination.lat = Number(location[1]);
+
+        let viewer = this.cesiumViewer;
+        let potiion = Utils.transformWGS842Cartesian({
+          lng: this.destination.lng,
+          lat: this.destination.lat,
+          alt: 1000,
+        });
+        viewer.camera.flyTo({
+          destination: potiion,
+        });
+        this.init_location_icon(potiion);
+      }
+    },
+    init_location_icon(position) {
+      let viewer = this.cesiumViewer;
+
+      if (location_icon) {
+        // location_icon.position = position;
+        viewer.entities.remove(location_icon);
+        location_icon = null;
+      }
+      // else {
+      location_icon = viewer.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(
+          Number(this.destination.lng),
+          Number(this.destination.lat)
+        ),
+        billboard: {
+          width: 36,
+          height: 36,
+          image: pngLocation,
+          // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          // verticalOrigin: Cesium.VerticalOrigin.Bottom,
+          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0),
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+      viewer.camera.moveEnd.addEventListener(() => {
+        console.log(this.destination.lng);
+        location_icon.potiion = Cesium.Cartesian3.fromDegrees(
+          Number(this.destination.lng),
+          Number(this.destination.lat)
+        );
+      });
+      // }
+    },
+    destroy_location_icon() {
+      if (!location_icon) {
+        return location_icon;
+      }
+      let viewer = this.cesiumViewer;
+      viewer.entities.remove(location_icon);
+      location_icon = null;
+    },
+  },
+  
+};
+</script>
+
+<style lang="scss" scoped>
+.cpt-select::v-deep {
+  text-align: right;
+
+  .el-autocomplete-suggestion li:hover {
+    background-color: #a1b9ee;
+  }
+  color: #fff;
+  .select_box {
+    display: flex;
+    align-content: center;
+    position: relative;
+    width: 48px;
+    height: 48px;
+    color: #fff;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 48px;
+    cursor: pointer;
+
+    &.active {
+      width: 412px;
+      text-align: left;
+      box-sizing: border-box;
+      color: #5baad4;
+      padding-left: 10px;
+      padding-right: 10px;
+      height: 50.4px;
+      background: rgba(22, 29, 45, 0.58);
+      border: 1px solid #70daf9;
+    }
+
+    .autocomplete {
+      flex: 1;
+    }
+  }
+}
+
+.icon-sousuo {
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+
+  &::before {
+    font-size: 24px;
+    content: "\e6d5";
+    color: #fff;
+  }
+}
+
+.el-input__inner::v-deep {
+  padding-right: 30px;
+  width: 359px !important;
+  font-family: MicrosoftYaHei;
+  font-size: 16px;
+  color: #5baad4;
+  letter-spacing: 0;
+  text-align: left;
+  font-weight: 400;
+  background: transparent !important;
+  border: 0;
+}
+
+.el-form-item::v-deep {
+}
+
+input::v-deep {
+  font-family: MicrosoftYaHei;
+  font-size: 16px;
+  color: #5baad4 !important;
+  letter-spacing: 0;
+  text-align: center;
+  font-weight: 400;
+}
+
+::v-deep {
+  .el-scrollbar {
+    .el-autocomplete-suggestion li:hover {
+      background-color: #34466e !important;
+    }
+  }
+}
+.search {
+  .el-scrollbar {
+    .el-autocomplete-suggestion li:hover {
+      background-color: #34466e !important;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/index.vue

 <template>
   <div class="mmc-filght-control-center mmc">
     <!-- cesium地图层 -->
-    <cesiumLayout v-if="!cesiumViewer"></cesiumLayout>
+    <CesiumLayout v-if="!cesiumViewer"></CesiumLayout>
     <!-- 地图切换组件 -->
-    <mapImageSwitch></mapImageSwitch>
+    <MapImageSwitch></MapImageSwitch>
+    <MapSearch class="map-search"></MapSearch>
     <!-- 无人机应用 -->
-    <uavApplications v-if="scene === 0"></uavApplications>
+    <UavApplications v-if="scene === 0"></UavApplications>
     <!-- 机库 -->
-    <hangar v-else></hangar>
+    <Hangar v-else></Hangar>
   </div>
 </template>
 
 <script>
-import cesiumLayout from "./components/cesiumLayer";
-import mapImageSwitch from "./components/mapImageSwitch";
-import uavApplications from "./components/uavApplications";
-import hangar from "./components/hangar";
+import CesiumLayout from "./components/cesiumLayer";
+import MapImageSwitch from "./components/mapImageSwitch";
+import UavApplications from "./components/uavApplications";
+import Hangar from "./components/hangar";
 import Vue from "vue";
 import SymbolIcon from "../symbol-icon";
+import MapSearch from './components/mapSearch';
 
 export default {
   name: "MMCFlightControlCenter",
   components: {
-    cesiumLayout,
-    mapImageSwitch,
-    uavApplications,
-    hangar,
+    CesiumLayout,
+    MapImageSwitch,
+    UavApplications,
+    Hangar,
+    MapSearch
   },
   props: {
     devMode: {
@@ -187,6 +190,12 @@ export default {
   height: 100%;
   width: 100%;
 }
+
+.map-search {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
 </style>
 
 <style lang="scss">