👈 编写高德地图组件

kicc-ui/src/components/AMap/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import Amap from './src/Amap.vue';
+
+export const AMap = withInstall(Amap);

kicc-ui/src/components/AMap/src/Amap.vue

@@ -0,0 +1,122 @@
+<template>
+  <div id="mapview" ref="mapview" v-loading="mapSet.loading"/>
+</template>
+<script setup lang="ts">
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+import { mapList } from './data';
+import car from '/@/assets/car.png';
+
+export interface MapConfigureInter {
+  on: Fn;
+  destroy: Fn;
+  clearEvents: Fn;
+  addControl: Fn;
+  setCenter: Fn;
+  setZoom: Fn;
+  plugin: Fn;
+}
+
+type resultType = {
+  info: Array<undefined>;
+};
+
+let MarkerCluster;
+let map: MapConfigureInter;
+
+const instance = getCurrentInstance();
+
+const mapSet = reactive({
+  loading: true
+});
+
+// 地图创建完成(动画关闭)
+const complete = (): void => {
+  if (map) {
+    map.on('complete', () => {
+      mapSet.loading = false;
+    });
+  }
+};
+
+onBeforeMount(() => {
+  if (!instance) return;
+  let { MapConfigure } = instance.appContext.config.globalProperties.$config;
+  let { options } = MapConfigure;
+
+  AMapLoader.load({
+    key: MapConfigure.amapKey,
+    version: '2.0',
+    plugins: ['AMap.MarkerCluster']
+  }).then(AMap => {
+      // 创建地图实例
+      map = new AMap.Map(instance.refs.mapview, options);
+
+      //地图中添加地图操作ToolBar插件
+      map.plugin(['AMap.ToolBar', 'AMap.MapType'], () => {
+        map.addControl(new AMap.ToolBar());
+        //地图类型切换
+        map.addControl(
+          new AMap.MapType({
+            defaultType: 0
+          })
+        );
+      });
+
+      MarkerCluster = new AMap.MarkerCluster(map, [], {
+        // 聚合网格像素大小
+        gridSize: 80,
+        maxZoom: 14,
+        renderMarker(ctx) {
+          let { marker, data } = ctx;
+          if (Array.isArray(data) && data[0]) {
+            var { driver, plateNumber, orientation } = data[0];
+            var content = `<img style="transform: scale(1) rotate(${
+              360 - Number(orientation)
+            }deg);" src='${car}' />`;
+            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
+      }));
+      if (MarkerCluster) MarkerCluster.setData(points);
+      complete();
+    }).catch(() => {
+      mapSet.loading = false;
+      throw '地图加载失败，请重新加载';
+    });
+});
+
+onUnmounted(() => {
+  if (map) {
+    // 销毁地图实例
+    map.destroy() && map.clearEvents('click');
+  }
+});
+</script>
+<style lang="scss" scoped>
+#mapview {
+  height: calc(100vh - 86px);
+}
+
+:deep(.amap-marker-label) {
+  border: none !important;
+}
+</style>

kicc-ui/src/components/AMap/src/data.ts

@@ -0,0 +1,22 @@
+
+type mapType = {
+  plateNumber: string;
+  driver: string;
+  'orientation|1-360': number;
+  'lng|113-114.1-10': number;
+  'lat|34-35.1-10': number;
+};
+
+export const mapList = (): mapType[] => {
+  const result: mapType[] = [];
+  for (let index = 0; index < 200; index++) {
+    result.push({
+      plateNumber: '豫A@natural(11111, 99999)@character(\'upper\')',
+      driver: '@cname()',
+      'orientation|1-360': 100,
+      'lng|113-114.1-10': 1,
+      'lat|34-35.1-10': 1
+    });
+  }
+  return result;
+};

kicc-ui/src/views/map/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <AMap/>
+</template>
+<script setup lang="ts">
+import { AMap } from '/@/components/AMap';
+</script>
+<style scoped>
+.main-content {
+  margin: 0 !important;
+}
+</style>