From 4d195bd9d86c1f811390381c75e218a0ef58ea04 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Sun, 22 May 2022 19:45:41 +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/assets/images/medical-kit.svg |   2 +
 kicc-ui/src/assets/images/redFlag.svg     |   2 +
 kicc-ui/src/components/AMap/src/Amap.vue  | 139 +++++++++++++++++++---
 kicc-ui/src/components/AMap/src/data.ts   |   5 +
 4 files changed, 131 insertions(+), 17 deletions(-)
 create mode 100644 kicc-ui/src/assets/images/medical-kit.svg
 create mode 100644 kicc-ui/src/assets/images/redFlag.svg

diff --git a/kicc-ui/src/assets/images/medical-kit.svg b/kicc-ui/src/assets/images/medical-kit.svg
new file mode 100644
index 00000000..d73bcb00
--- /dev/null
+++ b/kicc-ui/src/assets/images/medical-kit.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1653034723386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2599" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M296.848255 225.077795v-54.138929c0-69.214246 56.201911-125.595235 125.461183-125.595236l180.22842-0.006139c69.177407 0 124.702914 57.018507 124.702914 125.826501v53.913803h-71.769437v-53.915849c0-29.522325-23.059136-54.048879-52.9345-54.048879l-180.224328-0.008186c-29.472183 0-54.01204 24.366918-54.012039 53.836031l0.004093 54.136883h-71.456306zM1014.365591 350.67917c0-49.392845-40.32637-89.712052-89.712051-89.712052H99.350554c-49.438894 0-89.717168 40.32637-89.717169 89.712052v538.272311c0 49.380565 40.278275 89.712052 89.712052 89.712052h825.308103c49.385682 0 89.712052-40.322277 89.712051-89.707959V350.67917z m-143.538873 592.186114V906.893073h50.865379c11.442587 0 20.904057-9.465563 20.904058-20.898941v-50.866403h35.928208v52.434105c0 30.365527-24.888804 55.30345-55.298333 55.30345h-52.399312z m-717.653436-646.060008v35.928209l-50.866403 0.002047c-11.437471 0-20.904057 9.505472-20.904057 20.940896v50.826494H45.47052v-52.388056c0-30.369621 24.90313-55.309589 55.312659-55.30959h52.390103z m181.225119 500.633138l-0.008186 0.008186c-45.4828-45.437774-73.557149-108.236927-73.561243-177.632298 0-69.344206 28.083559-132.146428 73.561243-177.583179 45.442891-45.484846 108.246137-73.615477 177.586249-73.609338 69.395371 0 132.194524 28.120398 177.629228 73.609338 45.486893 45.438798 73.566359 108.23181 73.566359 177.583179 0 69.394348-28.078443 132.189407-73.566359 177.632298-45.434704 45.4828-108.233857 73.558172-177.629228 73.566359-69.345229-0.001023-132.143359-28.083559-177.578063-73.574545z m536.428317-500.633138h52.399312c30.40953 0 55.298333 24.939969 55.298333 55.30959v52.388056h-35.928208v-50.826494c0-11.435424-9.46147-20.940896-20.904058-20.940896l-50.865379-0.002047v-35.928209z m-717.653436 646.060008H100.782156c-30.40953 0-55.312659-24.937922-55.312659-55.30345v-52.434105h35.933325v50.866403c0 11.433377 9.466587 20.898941 20.904057 20.898941h50.866403v35.972211z" fill="#7FAB29" p-id="2600"></path><path d="M453.665523 444.874317h116.66793v116.617788h116.625975v116.634161h-116.625975v116.631091H453.665523V678.126266h-116.625974V561.492105h116.625974z" fill="#7FAB29" p-id="2601"></path></svg>
\ No newline at end of file
diff --git a/kicc-ui/src/assets/images/redFlag.svg b/kicc-ui/src/assets/images/redFlag.svg
new file mode 100644
index 00000000..2a63b2a0
--- /dev/null
+++ b/kicc-ui/src/assets/images/redFlag.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1653034101968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4191" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M854.016 140.288V583.68s-182.272 80.384-318.976 0-364.544 0-364.544 0V140.288s182.272-80.384 341.504 0c107.008 53.76 342.016 0 342.016 0z" fill="#EFB4BF" p-id="4192"></path><path d="M885.248 103.936c-7.168-5.632-16.896-7.68-26.112-5.632-64 14.848-248.32 45.056-329.728 2.56-131.584-69.12-274.944-36.352-340.992-14.848V38.4c0-16.896-13.824-30.72-30.72-30.72s-30.72 13.824-30.72 30.72V988.16c0 16.896 13.824 30.72 30.72 30.72s30.72-13.824 30.72-30.72v-362.496c50.176-15.872 226.816-64 334.336 2.048 52.224 32.256 110.08 43.008 163.328 43.008 101.376 0 187.392-38.912 193.024-41.472 10.752-5.12 17.92-16.384 17.92-28.16V128c0-9.216-4.608-18.432-11.776-24.064z m-49.664 477.184c-47.616 17.408-179.712 56.32-281.088-5.632-52.736-32.256-115.712-43.008-176.128-43.008-72.704 0-141.824 15.36-183.808 27.648V149.504c48.128-17.92 185.344-57.344 306.176 6.144 92.16 48.128 259.584 24.576 334.848 10.752v414.72z" fill="#C9062C" p-id="4193"></path></svg>
\ No newline at end of file
diff --git a/kicc-ui/src/components/AMap/src/Amap.vue b/kicc-ui/src/components/AMap/src/Amap.vue
index 275d1190..80ed01ad 100644
--- a/kicc-ui/src/components/AMap/src/Amap.vue
+++ b/kicc-ui/src/components/AMap/src/Amap.vue
@@ -4,25 +4,17 @@
 <script setup lang="ts">
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-import { mapList } from './data';
+import { mapList, mapList1 } from './data';
 import hospital from '/@/assets/images/hospital.svg';
-
-export interface MapConfigureInter {
-  on: Fn;
-  destroy: Fn;
-  clearEvents: Fn;
-  addControl: Fn;
-  setCenter: Fn;
-  setZoom: Fn;
-  plugin: Fn;
-}
+import medicalKit from '/@/assets/images/medical-kit.svg';
+import redFlag from '/@/assets/images/redFlag.svg';
 
 type resultType = {
   info: Array<undefined>;
 };
 
 let MarkerCluster;
-let map: MapConfigureInter;
+let map;
 
 const instance = getCurrentInstance();
 
@@ -42,10 +34,10 @@ const complete = (): void => {
 onBeforeMount(() => {
   if (!instance) return;
   const MapConfigure = {
-    amapKey: '97b3248d1553172e81f168cf94ea667e',
+    amapKey: 'f278d021a80dcf81f071aee5bff08804',
     options: {
       resizeEnable: true,
-      center: [113.6401, 34.72468],
+      center: [116.39,40.1],
       zoom: 12
     }
   };
@@ -54,7 +46,7 @@ onBeforeMount(() => {
   AMapLoader.load({
     key: MapConfigure.amapKey,
     version: '2.0',
-    plugins: ['AMap.MarkerCluster']
+    plugins: ['AMap.MarkerCluster','AMap.Driving']
   }).then(AMap => {
       // 创建地图实例
       map = new AMap.Map(instance.refs.mapview, options);
@@ -70,6 +62,47 @@ onBeforeMount(() => {
         );
       });
 
+    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, [], {
         // 聚合网格像素大小
         gridSize: 80,
@@ -78,7 +111,7 @@ onBeforeMount(() => {
           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 content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
             marker.setContent(content);
             marker.setLabel({
               direction: 'bottom',
@@ -95,12 +128,63 @@ onBeforeMount(() => {
           }
         }
       });
-      // 获取模拟车辆信息
+
+      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) => ({
         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);
+
       complete();
     }).catch(() => {
       mapSet.loading = false;
@@ -116,6 +200,27 @@ onUnmounted(() => {
 });
 </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);
+  }
+}
+
 #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 589c3d0f..70ee9b00 100644
--- a/kicc-ui/src/components/AMap/src/data.ts
+++ b/kicc-ui/src/components/AMap/src/data.ts
@@ -18,3 +18,8 @@ export const mapList: mapType[] = [
   {plateNumber: '豫A97973Y', driver: '朱丽', orientation: 0, lng: 113.72223, lat: 35.68455},
   {plateNumber: '豫A76379B', driver: '蒋强', orientation: 0, lng: 114.379, lat: 34.36825}
 ];
+
+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}
+];