update 地图绘制

2023-12-06 19:44:44 +08:00
parent 3b9b1d67fc
commit 123b681dc3
7 changed files with 230 additions and 70 deletions
@@ -12,8 +12,8 @@
            securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
        }
    </script>
-    <script type="text/javascript"
-            src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving"></script>
+    <!--    <script type="text/javascript"-->
+    <!--            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>
@@ -1,87 +1,106 @@
 .type-time {
-    padding-right: 4%;
-    padding-top: 3%;
-    font-size: 16px;
-    display: flex;
-    justify-content: right;
-    span {
-        padding: 0 2%;
-        cursor: pointer;
-    }
+  padding-right: 4%;
+  padding-top: 3%;
+  font-size: 16px;
+  display: flex;
+  justify-content: right;

-    .select {
-        color: #45a2ff;
-        position: relative;
+  span {
+    padding: 0 2%;
+    cursor: pointer;
+  }

-        &:after {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 72%;
-            left: 6px;
-            bottom: -12px;
-            height: 6px;
-            background: url('../images/light.png') no-repeat;
-            background-size: 100% 100%;
-        }
-    }
+  .select {
+    color: #45a2ff;
+    position: relative;

-    .unSelect {
-        color: #a3a4a4;
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 72%;
+      left: 6px;
+      bottom: -12px;
+      height: 6px;
+      background: url('../images/light.png') no-repeat;
+      background-size: 100% 100%;
    }
+  }
+
+  .unSelect {
+    color: #a3a4a4;
+  }
 }
+
 *::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+  width: 12px;
+  height: 12px;
 }
+
 *::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
-    display: none;
+  width: 0;
+  height: 0;
+  display: none;
 }
+
 *::-webkit-scrollbar-corner {
-    background-color: transparent;
+  background-color: transparent;
 }
+
 *::-webkit-scrollbar-thumb {
-    border: 4px solid rgba(0, 0, 0, 0);
-    height: 6px;
-    border-radius: 25px;
-    background-clip: padding-box;
-    background-color: rgba(0, 0, 0, 0.3);
+  border: 4px solid rgba(0, 0, 0, 0);
+  height: 6px;
+  border-radius: 25px;
+  background-clip: padding-box;
+  background-color: rgba(0, 0, 0, 0.3);
 }
+
 /*
  antd表格样式
 */
 .ant-table-thead > tr > th {
-    border-bottom: 1px solid #1e73c2 !important;
+  border-bottom: 1px solid #1e73c2 !important;
 }
+
 .ant-table-body {
-    background-color: #00152b;
+  background-color: #00152b;
 }
+
 .ant-modal-header {
-    border-bottom: none !important;
+  border-bottom: none !important;
 }
+
 .ant-table-tbody > tr > td {
-    border-bottom: 1px solid #1e73c2 !important;
-    background-color: #00152b;
-    color: #ffffff;
+  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;
+  background-color: #00152b !important;
+  color: #ffffff !important;
 }
+
 .ant-table-cell-scrollbar {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
+
 /*
  表格滚动条
 */
 .ant-table-body::-webkit-scrollbar-thumb {
-    border: 4px solid rgba(0, 0, 0, 0);
-    height: 6px;
-    border-radius: 25px;
-    background-clip: padding-box;
-    background-color: rgba(30, 115, 194, 0.3);
+  border: 4px solid rgba(0, 0, 0, 0);
+  height: 6px;
+  border-radius: 25px;
+  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%;
+}
@@ -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.map.remove(this.overlayGroup);
-            this.overlayGroup = null;
-        }
+        this.clearAircraft();
+        this.clearOverlay();
        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;
+    },
 };
@@ -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: 34.35965,
+        lon: '108.861377',
+        lat: '34.35965',
        img: helicopter,
        name: '直升机',
    },
    {
        category: 3,
-        lat: 106.267358,
-        lon: 38.520079,
+        lon: '106.267358',
+        lat: '38.520079',
        img: helicopter,
        name: '直升机',
    },
    {
        category: 3,
-        lat: 109.505282,
-        lon: 36.579381,
+        lon: '109.505282',
+        lat: '36.579381',
        img: helicopter,
        name: '直升机',
    },
    {
        category: 3,
-        lat: 107.638372,
-        lon: 35.734218,
+        lon: '107.638372',
+        lat: '35.734218',
        img: helicopter,
        name: '直升机',
    },
@@ -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 });
    }