update 地图绘制

index.html

@@ -12,8 +12,8 @@
             securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
         }
     </script>
-    <script type="text/javascript"
+    <!--    <script type="text/javascript"-->
-            src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving"></script>
+    <!--            src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving,AMap.ToolBar,AMap.Driving,AMap.GeoJSON,AMap.MarkerCluster"></script>-->
     <script type="text/javascript" src="./public/amap.js"></script>
 </head>
 <style>

src/assets/less/index.less

@@ -4,6 +4,7 @@
   font-size: 16px;
   display: flex;
   justify-content: right;
+
   span {
     padding: 0 2%;
     cursor: pointer;
@@ -30,18 +31,22 @@
     color: #a3a4a4;
   }
 }
+
 *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
+
 *::-webkit-scrollbar-button {
   width: 0;
   height: 0;
   display: none;
 }
+
 *::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+
 *::-webkit-scrollbar-thumb {
   border: 4px solid rgba(0, 0, 0, 0);
   height: 6px;
@@ -49,32 +54,39 @@
   background-clip: padding-box;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
 /*
   antd表格样式
 */
 .ant-table-thead > tr > th {
   border-bottom: 1px solid #1e73c2 !important;
 }
+
 .ant-table-body {
   background-color: #00152b;
 }
+
 .ant-modal-header {
   border-bottom: none !important;
 }
+
 .ant-table-tbody > tr > td {
   border-bottom: 1px solid #1e73c2 !important;
   background-color: #00152b;
   color: #ffffff;
 }
+
 .ant-table-tbody > tr.ant-table-row:hover > td,
 .ant-table-tbody > tr > td.ant-table-cell-row-hover,
 .ant-table-thead > tr > th {
   background-color: #00152b !important;
   color: #ffffff !important;
 }
+
 .ant-table-cell-scrollbar {
   box-shadow: none !important;
 }
+
 /*
   表格滚动条
 */
@@ -85,3 +97,10 @@
   background-clip: padding-box;
   background-color: rgba(30, 115, 194, 0.3);
 }
+
+.helicopter {
+  width: 60px;
+  height: 60px;
+  background: url("../img/helicopter.png") no-repeat;
+  background-size: 100% 100%;
+}

src/assets/mapUtils/map.ts

@@ -1,16 +1,19 @@
 import china from '/@/assets/lngLat/china.ts';
 import chinaInner from '/@/assets/lngLat/chinaInner.ts';
 import { typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
+import { helicopter, mapbg } from '/@/components/chinaMap/chinaHooks.ts';
 
 export const defaultOption = {
     center: [106.3, 37.87], //地图中心点
     zoom: 4.3, //地图显示的缩放级别
     mapStyle: 'darkblue', //地图样式
 };
-export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON'];
+export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster'];
 export const Map = {
     map: null,
-    overlayGroup: null,
+    overlayGroup: null, // 地图中marker
+    aircraftGroup: null, //直升机marker
+    cluster: null,
     initMap({ el, option }) {
         const { zoom, center, mapStyle } = { ...defaultOption, ...option };
         //基本地图加载
@@ -60,10 +63,8 @@ export const Map = {
     },
     // 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
     createOverlay(result) {
-        if (this.overlayGroup) {
+        this.clearAircraft();
-            this.map.remove(this.overlayGroup);
+        this.clearOverlay();
-            this.overlayGroup = null;
-        }
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
             let { type, lon, lat } = result[i];
@@ -96,4 +97,133 @@ export const Map = {
             console.log(e.target.getExtData());
         });
     },
+    clearOverlay() {
+        if (this.overlayGroup) {
+            this.map.remove(this.overlayGroup);
+            this.overlayGroup = null;
+        }
+    },
+
+    //创建直升机marker
+    createAircraft(result) {
+        this.clearAircraft();
+        this.clearOverlay();
+        // this.aircraftGroup = new AMap.OverlayGroup();
+        if (!Array.isArray(result) && result.length == 0) return;
+        const content = `
+       <div style="
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       ">
+        <div
+ 		     style="width:156px;height: 52px;text-align:center; !important;">
+ 		<div style="display: flex;
+       justify-content: center;">
+ 		    <div class="helicopter"></div>
+        </div>
+        <div style='z-index:999;background-color:#0A8B18;height:auto; '>
+            <h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;height:26px;    line-height: 26px;padding:2px 4px;">
+            4009-120-999
+            </h5>
+        </div>
+</div>
+        `;
+        const markers = [];
+        for (let i = 0; i < result.length; i++) {
+            let { lon, lat } = result[i];
+            const marker = new AMap.Marker({
+                // 点的坐标
+                position: [lon, lat],
+                //启用点击事件 如果需要点击事件，必须开启
+                clickable: true,
+                title: `4009-120-999`,
+                content: content,
+                offset: new AMap.Pixel(-16, -30),
+            });
+            markers.push(marker);
+        }
+
+        // //将组 挂载到地图上
+        // this.aircraftGroup.setMap(this.map);
+        // //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
+        // this.aircraftGroup.addOverlay(markers);
+
+        if (this.cluster) {
+            // this.cluster.setMap(null);
+            this.map.remove(this.cluster);
+            // this.cluster = null;
+            this.cluster.setMap(null);
+        }
+        //使用renderCluserMarker属性实现聚合点的完全自定义绘制
+        let sts = [
+            {
+                url: mapbg,
+                size: new AMap.Size(32, 32),
+                offset: new AMap.Pixel(-16, -30),
+                textColor: '#fff',
+                textSize: 20,
+            },
+        ];
+        let that = this;
+        let arr = result.map((item) => ({ weight: 4, lnglat: [item.lon, item.lat] }));
+        let count = 4;
+        this.cluster = new AMap.MarkerClusterer(
+            that.map, // 地图实例
+            arr,
+            {
+                renderMarker: (context) => {
+                    var factor = Math.pow(context.count / count, 1 / 18);
+                    var div = document.createElement('div');
+                    var Hue = 180 - factor * 180;
+                    var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
+                    var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
+                    var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+                    var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
+                    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                    div.style.width = div.style.height = size + 'px';
+                    div.innerHTML = content || context.count;
+                    div.style.lineHeight = size + 'px';
+                    div.style.color = fontColor;
+                    div.style.fontSize = '14px';
+                    div.style.textAlign = 'center';
+                    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+                    context.marker.setContent(div);
+                },
+            }
+        );
+        console.log('xx', this.cluster);
+        this.cluster.setMap(this.map);
+        this.getRange(result);
+    },
+    clearAircraft() {
+        if (this.aircraftGroup) {
+            this.map.remove(this.aircraftGroup);
+            this.aircraftGroup = null;
+        }
+    },
+    getRange(list) {
+        //绘制飞机的范围图
+        var array = new Array(list.length);
+        for (var i = 0; i < list.length; i++) {
+            var circle = new AMap.Circle({
+                center: [list[i].lon, list[i].lat],
+                radius: 100000, //半径
+                borderWeight: 3,
+                strokeColor: '#FF33FF',
+                strokeOpacity: 1,
+                strokeWeight: 6,
+                strokeOpacity: 0.2,
+                fillOpacity: 0.4,
+                strokeStyle: 'dashed',
+                strokeDasharray: [10, 10],
+                // 线样式还支持 'dashed'
+                fillColor: '#1791fc',
+                zIndex: 50,
+            });
+            circle.setMap(this.map);
+            array.push(circle);
+        }
+        return array;
+    },
 };

src/components/chinaMap/chinaHooks.ts

@@ -6,6 +6,7 @@ export enum TabType {
     heZuoYiYuan = '2', //合作医院
     yiLiaoDian = '3', //医疗点
     jiuHuChe = '4', //救护车
+    zhiShengJi = '5', //直升机
 }
 
 export const tabList = [
@@ -34,6 +35,7 @@ export const tabList = [
     },
     {
         name: '直升机',
+        type: TabType.zhiShengJi,
     },
     {
         name: '急救路线',
@@ -41,34 +43,35 @@ export const tabList = [
 ];
 
 export const helicopter = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
+export const mapbg = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
 
 // 直升机位置数据
 export const aircraft = [
     {
         category: 3,
-        lat: 108.861377,
+        lon: '108.861377',
-        lon: 34.35965,
+        lat: '34.35965',
         img: helicopter,
         name: '直升机',
     },
     {
         category: 3,
-        lat: 106.267358,
+        lon: '106.267358',
-        lon: 38.520079,
+        lat: '38.520079',
         img: helicopter,
         name: '直升机',
     },
     {
         category: 3,
-        lat: 109.505282,
+        lon: '109.505282',
-        lon: 36.579381,
+        lat: '36.579381',
         img: helicopter,
         name: '直升机',
     },
     {
         category: 3,
-        lat: 107.638372,
+        lon: '107.638372',
-        lon: 35.734218,
+        lat: '35.734218',
         img: helicopter,
         name: '直升机',
     },

src/components/chinaMap/chinaMap.vue

@@ -61,7 +61,7 @@
     import { onMounted, ref } from 'vue';
     import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
-    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
+    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
 
     const formState = ref({
         start: '西安北站',
@@ -71,7 +71,15 @@
     const currentIndex = ref(0);
 
     function changeTab(item, i: number) {
+        // if (i == currentIndex.value) {
+        //     return;
+        // }
         currentIndex.value = i;
+        // 直升机
+        if (TabType.zhiShengJi == item.type) {
+            Map.createAircraft(aircraft);
+            return;
+        }
         getMapData(item.type, { type: item.type });
     }