feat: 地图点位添加

src/assets/styles/amap.less

@@ -38,6 +38,38 @@
   }
 }
 
+.amap-window { // 高德消息框样式
+  background: url("@/assets/images/window.png") no-repeat;
+  background-size: 100% 100%;
+  padding: 10px;
+  width: 18.4vw;
+  height: 21.3vh;
+  .content {
+    font-size: 16px;
+    padding: 0 1.5vw;
+    font-weight: 800;
+    height: 16.7vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+    color: #fff;
+    .key {
+      color: #03dde6;
+    }
+  }
+  .title {
+    margin-top: .5vh;
+    padding: 0vh 1.5vw;
+    text-align: left;
+    width: 10.4vw;
+    font-size: 0.8vw;
+    font-weight: 800;
+    color: #fff;
+    line-height: 2.8vh;
+  }
+}
+
 .amap-info-content { // 高德内部样式修改
   background-color: transparent;
   box-shadow: none;

src/components/FloatPanel/index.vue

@@ -24,6 +24,7 @@ export default {
 
   .@{namespace}-float-panel {
     position: absolute;
+    top: -80px;
     min-width: 513px;
     
     .content {

src/layouts/default/index.vue

@@ -17,6 +17,7 @@
 import Header from './modules/Header.vue'
 import ActionPanel from './modules/ActionPanel'
 import { AMapService } from '@/service/AMapService'
+import { createDisasterPointHTML, createDisasterInfoWindowHTML } from '@/service/HTMLContent'
 
 export default {
   name: 'DefaultLayout',
@@ -26,11 +27,46 @@ export default {
     }
   },
   data: () => ({
-    mapService: null
+    mapService: null,
+    pointsData: [
+    {
+      name: "北碚互通",
+      position: [106.408468,29.812347],
+      content: createDisasterPointHTML,
+      data: {
+        content: createDisasterInfoWindowHTML,
+        data: {
+          type: "火灾扑救",
+          occurrenceTime: "2022年2月16日15:44:50",
+          occurrenceAddress: "重庆市北碚互通",
+          competentOrg: "渝中区北碚消防救援站",
+          outOfResource: "3辆消防车、10人",
+          outOfTime: "2022年2月16日15:57:15",
+          waterTime: "2022年2月16日15:57:15",
+        }
+      }
+    },
+    {
+      name: "重庆市北碚区中医院",
+      position: [106.410013,29.801622],
+      content: createDisasterPointHTML,
+      data: {
+        content: createDisasterInfoWindowHTML,
+        data: {
+          type: "火灾扑救",
+          occurrenceTime: "2022年2月16日15:44:50",
+          occurrenceAddress: "重庆市北碚区中医院",
+          competentOrg: "渝中区北碚消防救援站",
+          outOfResource: "3辆消防车、10人",
+          outOfTime: "2022年2月16日15:57:15",
+          waterTime: "2022年2月16日15:57:15",
+        }
+      }
+    }]
   }),
   created() {
-    this.mapService = new AMapService((map) => {
-
+    this.mapService = new AMapService(this.$router,(instance) => {
+      instance.addPoints(this.pointsData)
     })
     this.mapService.loadMap('amap-container')
   },
@@ -54,9 +90,9 @@ export default {
   .cover {
       position: relative;
       width: 1600px;
-      height: 1160px;
+    height: 80vh;
   }
-  
+
   .cover:after {
       position: absolute;
       content: '';
@@ -69,7 +105,7 @@ export default {
 
   #amap-container {
     width: 1600px;
-    height: 1160px;
+    height: 80vh;
   }
 
   .view-page {

src/layouts/default/modules/ActionPanel/ActionItem.vue

@@ -43,12 +43,13 @@ export default {
     cursor: pointer;
     position: relative;
     .icon {
-      transition: all 0.3s;
+      transition: all 0.2s;
       width: 200px;
       height: 165px;
     }
 
     .active-icon {
+      transition: all 0.2s;
       width: 198px;
       height: 200px;
       margin-top: -34px;

src/service/AMapService.js

@@ -57,9 +57,7 @@ export class AMapService {
     AMapLoader.load({
       "key": AMAP_KEY,// 申请好的Web端开发者Key，首次调用 load 时必填
       "version": AMAP_VERSION,// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-      "plugins": [
-        "AMap.Scale"
-      ],
+      "plugins": [],
       "Loca":{ // 是否加载 Loca， 缺省不加载
         "version": AMAP_LOCA_VERSION // Loca 版本，缺省 1.3.2
       },
@@ -75,7 +73,6 @@ export class AMapService {
           });
           // 设置地图样式
           this.amap.setMapStyle("amap://styles/dark")
-          this.amap.addControl(new AMap.Scale())
           // 加载后的数据处理
           this.loadedCallback(this);
       }).catch(e => {

src/service/HTMLContent.js

@@ -0,0 +1,24 @@
+import fireIcon from '@/assets/images/icon/fire.png'
+
+export const createDisasterPointHTML =
+`<div class="fire-container">
+  <div class="icon-local">
+    <img style="width:2vw;height:4vh;" src="${fireIcon}" alt="图标" />
+  </div>
+</div>`;
+
+
+export const createDisasterInfoWindowHTML = (payload) => {
+  const { data } = payload
+  return `<div class="amap-window">
+    <div class="title">${data.type}</div>
+    <div class="content">
+      <div><span class="key">案发时间：</span>${data.occurrenceTime}</div>
+      <div><span class="key">案件地址：</span>${data.occurrenceAddress}</div>
+      <div><span class="key">主管机构：</span>${data.competentOrg}</div>
+      <div><span class="key">出动力量：</span>${data.outOfResource}</div>
+      <div><span class="key">出动时间：</span>${data.outOfTime}</div>
+      <div><span class="key">出水时间：</span>${data.waterTime}</div>
+    </div>
+  </div>`
+}