From 5760d935c8fddec721bcb6e814e72bc7e11dc1dd Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Sun, 22 May 2022 22:29:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=88=20=E7=BC=96=E5=86=99=E9=AB=98?=
 =?UTF-8?q?=E5=BE=B7=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kicc-ui/src/components/AMap/src/Amap.vue | 247 +++++++----------------
 kicc-ui/src/components/AMap/src/data.ts  |  26 +--
 2 files changed, 81 insertions(+), 192 deletions(-)

diff --git a/kicc-ui/src/components/AMap/src/Amap.vue b/kicc-ui/src/components/AMap/src/Amap.vue
index 80ed01ad..568dd9b3 100644
--- a/kicc-ui/src/components/AMap/src/Amap.vue
+++ b/kicc-ui/src/components/AMap/src/Amap.vue
@@ -1,226 +1,121 @@
 <template>
-  <div id="mapview" ref="mapview" v-loading="mapSet.loading"/>
+  <div id="mapview" ref="mapview" v-loading="mapState.loading"/>
 </template>
-<script setup lang="ts">
-import AMapLoader from '@amap/amap-jsapi-loader';
-import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-import { mapList, mapList1 } from './data';
-import hospital from '/@/assets/images/hospital.svg';
-import medicalKit from '/@/assets/images/medical-kit.svg';
-import redFlag from '/@/assets/images/redFlag.svg';
-
-type resultType = {
-  info: Array<undefined>;
-};
-
-let MarkerCluster;
-let map;
-
-const instance = getCurrentInstance();
-
-const mapSet = reactive({
-  loading: true
-});
-
-// 地图创建完成(动画关闭)
-const complete = (): void => {
-  if (map) {
-    map.on('complete', () => {
-      mapSet.loading = false;
+<script lang="ts" setup>
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+  import { largeHospitalMapList } from './data';
+  import hospital from '/@/assets/images/hospital.svg';
+  import medicalKit from '/@/assets/images/medical-kit.svg';
+  import redFlag from '/@/assets/images/redFlag.svg';
+
+  let map;
+  let largeHospitalMarkerCluster;
+  let smallHospitalMarkerCluster;
+  let specimenMarkerCluster;
+
+  const instance = getCurrentInstance();
+  const mapState = reactive({
+    loading: true
+  });
+  /** 地图创建完成(动画关闭) */
+  const complete = (): void => {
+    map && map.on('complete', () => {
+      mapState.loading = false;
     });
-  }
-};
-
-onBeforeMount(() => {
-  if (!instance) return;
-  const MapConfigure = {
-    amapKey: 'f278d021a80dcf81f071aee5bff08804',
-    options: {
-      resizeEnable: true,
-      center: [116.39,40.1],
-      zoom: 12
-    }
   };
-  let { options } = MapConfigure;
 
-  AMapLoader.load({
-    key: MapConfigure.amapKey,
-    version: '2.0',
-    plugins: ['AMap.MarkerCluster','AMap.Driving']
-  }).then(AMap => {
-      // 创建地图实例
-      map = new AMap.Map(instance.refs.mapview, options);
+  onBeforeMount(() => {
+    if (!instance) return;
+    const mapConfig = {
+      amapKey: 'f278d021a80dcf81f071aee5bff08804',
+      options: {
+        pitch:60,
+        viewMode:'3D',
+        resizeEnable: true,
+        center: [112.919043,28.288623],
+        zoom: 16,
+        keyboardEnable: true
+      }
+    };
 
+    AMapLoader.load({
+      key: mapConfig.amapKey,
+      version: '2.0',
+      plugins: ['AMap.MarkerCluster']
+    }).then(AMap => {
+      // 创建地图实例
+      map = new AMap.Map(instance.refs.mapview, mapConfig.options);
       //地图中添加地图操作ToolBar插件
-      map.plugin(['AMap.ToolBar', 'AMap.MapType'], () => {
+      map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => {
+        // 地图操作工具条插件
         map.addControl(new AMap.ToolBar());
-        //地图类型切换
+        // 组合了旋转,倾斜,复位,缩放插件
+        map.addControl(new AMap.ControlBar());
+        // 比例尺插件
+        const scale = new AMap.Scale();
+        scale.show();
+        map.addControl(scale);
+        // 地图类型切换插件
         map.addControl(
           new AMap.MapType({
-            defaultType: 0
+            defaultType: 1,
+            showRoad: true
           })
         );
       });
 
-    const marker1 = new AMap.Marker({
-      position: new AMap.LngLat(116.39,39.9),
-      offset: new AMap.Pixel(-10, -10),
-      content: `<img width="30px" height="30px" src="${hospital}">`,
-      label: {
-        direction: 'bottom',
-        //设置文本标注偏移量
-        offset: new AMap.Pixel(0, 0),
-        //设置文本标注内容
-        content: '<div>发单点</div>'
-      }
-    });
-
-    const marker2 = new AMap.Marker({
-      position: new AMap.LngLat(116.39,40),
-      offset: new AMap.Pixel(-10, -10),
-      content: `<img width="30px" height="30px" src="${medicalKit}">`,
-      label: {
-        direction: 'bottom',
-        //设置文本标注偏移量
-        offset: new AMap.Pixel(0, 0),
-        //设置文本标注内容
-        content: '<div>收样员</div>'
-      }
-    });
-
-    const marker3 = new AMap.Marker({
-      position: new AMap.LngLat(116.39,40.1),
-      offset: new AMap.Pixel(-10, -10),
-      content: `<img width="30px" height="30px" src="${redFlag}">`,
-      label: {
-        direction: 'bottom',
-        //设置文本标注偏移量
-        offset: new AMap.Pixel(0, 0),
-        //设置文本标注内容
-        content: '<div>医检机构</div>'
-      }
-    });
-
-    map.add([marker1, marker2, marker3]);
-
-      MarkerCluster = new AMap.MarkerCluster(map, [], {
+      largeHospitalMarkerCluster = new AMap.MarkerCluster(map, [], {
         // 聚合网格像素大小
         gridSize: 80,
         maxZoom: 14,
         renderMarker(ctx) {
           let { marker, data } = ctx;
           if (Array.isArray(data) && data[0]) {
-            const { driver, plateNumber, orientation } = data[0];
-            const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
+            const { title, orientation } = data[0];
+            const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${redFlag}'/>`;
             marker.setContent(content);
             marker.setLabel({
               direction: 'bottom',
               //设置文本标注偏移量
               offset: new AMap.Pixel(-4, 0),
               //设置文本标注内容
-              content: `<div> ${plateNumber}(${driver})</div>`
+              content: `<div>${title}</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
             marker.on('click', ({ lnglat }) => {
-              map.setZoom(13); //设置地图层级
+              //设置地图层级
+              map.setZoom(16);
               map.setCenter(lnglat);
             });
           }
         }
       });
 
-      const MarkerCluster1 = new AMap.MarkerCluster(map, [], {
-      // 聚合网格像素大小
-      gridSize: 80,
-      maxZoom: 14,
-      renderMarker(ctx) {
-        let { marker, data } = ctx;
-        if (Array.isArray(data) && data[0]) {
-          const { driver, plateNumber, orientation } = data[0];
-          const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${medicalKit}'/>`;
-          marker.setContent(content);
-          marker.setLabel({
-            direction: 'bottom',
-            //设置文本标注偏移量
-            offset: new AMap.Pixel(-4, 0),
-            //设置文本标注内容
-            content: `<div> ${plateNumber}(${driver})</div>`
-          });
-          marker.setOffset(new AMap.Pixel(-18, -10));
-          marker.on('click', ({ lnglat }) => {
-            map.setZoom(13); //设置地图层级
-            map.setCenter(lnglat);
-          });
-        }
-      }
-    });
-
-
-      const points = mapList.map((v: any) => ({
+      const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
         ...v
       }));
 
-    const points1 = mapList1.map((v: any) => ({
-      lnglat: [v.lng, v.lat],
-      ...v
-    }));
-      if (MarkerCluster) MarkerCluster.setData(points);
-      MarkerCluster1.setData(points1);
-
-    var driving = new AMap.Driving({
-      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
-      policy: AMap.DrivingPolicy.LEAST_TIME,
-      // map 指定将路线规划方案绘制到对应的AMap.Map对象上
-      map: map,
-      // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
-      panel: 'panel'
-    });
-
-    var points3 = [
-      { keyword: '北京市地震局（公交站）',city:'北京' },
-      { keyword: '亦庄文化园（地铁站）',city:'北京' }
-    ];
-
-    // 搜索完成后，将自动绘制路线到地图上
-    driving.search(points3);
+      if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints);
 
       complete();
     }).catch(() => {
-      mapSet.loading = false;
+      mapState.loading = false;
       throw '地图加载失败，请重新加载';
     });
-});
 
-onUnmounted(() => {
-  if (map) {
-    // 销毁地图实例
-    map.destroy() && map.clearEvents('click');
-  }
-});
-</script>
-<style lang="less" scoped>
+  });
 
-.custom-content-marker {
-  position: relative;
-  width: 25px;
-  height: 34px;
-  .close-btn {
-    position: absolute;
-    top: -6px;
-    right: -8px;
-    width: 15px;
-    height: 15px;
-    font-size: 12px;
-    background: #ccc;
-    border-radius: 50%;
-    color: #fff;
-    text-align: center;
-    line-height: 15px;
-    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
-  }
-}
+  onUnmounted(() => {
+    if (map) {
+      // 销毁地图实例
+      map.destroy() && map.clearEvents('click');
+    }
+  });
 
+</script>
+<style lang="less" scoped>
 #mapview {
   height: calc(100vh - 86px);
 }
diff --git a/kicc-ui/src/components/AMap/src/data.ts b/kicc-ui/src/components/AMap/src/data.ts
index 70ee9b00..a8587805 100644
--- a/kicc-ui/src/components/AMap/src/data.ts
+++ b/kicc-ui/src/components/AMap/src/data.ts
@@ -1,25 +1,19 @@
+/**
+ * @program: kicc-ui
+ * @description: 地图静态数据
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/5/22
+ */
 
 type mapType = {
-  plateNumber: string;
-  driver: string;
+  title: string;
   orientation: number;
   lng: number;
   lat: number;
-  'orientation|1-360'?: number;
-  'lng|113-114.1-10'?: number;
-  'lat|34-35.1-10'?: number;
 };
 
-export const mapList: mapType[] = [
-  {plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 114.893657, lat: 35.289},
-  {plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 114.71, lat: 34.5394614},
-  {plateNumber: '豫A90026H', driver: '马洋', orientation: 0, lng: 114.72888, lat: 35.4585},
-  {plateNumber: '豫A20644R', driver: '孙洋', orientation: 0, lng: 114.1722778, lat: 35.340310104},
-  {plateNumber: '豫A97973Y', driver: '朱丽', orientation: 0, lng: 113.72223, lat: 35.68455},
-  {plateNumber: '豫A76379B', driver: '蒋强', orientation: 0, lng: 114.379, lat: 34.36825}
+export const largeHospitalMapList: mapType[] = [
+  {title: '上级医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
+  {title: '上级医院:测试2', orientation: 0, lng: 114.71, lat: 34.5394614}
 ];
 
-export const mapList1: mapType[] = [
-  {plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 119.893657, lat: 35.289},
-  {plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 111.71, lat: 34.5394614}
-];