林火

src/components/Map/index.vue

@@ -77,7 +77,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,
-  center: props.eventDetails.longitude && props.eventDetails.latitude ? [props.eventDetails.longitude, props.eventDetails.latitude] : [mapState.center[0], mapState.center[1]],
+  center: !!props.eventDetails && props.eventDetails.longitude && props.eventDetails.latitude ? [props.eventDetails.longitude, props.eventDetails.latitude] : [mapState.center[0], mapState.center[1]],
   dragEnable: true,
   scrollWheel: true,
   enableMouseTool: true,

src/views/disasterRiskMonitor/forestFirePrevention.vue

@@ -539,13 +539,22 @@ const initData = () => {
         display: flex;
         justify-content: space-between;
         .box-item {
+          .icon1 {
+            background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon1.png") no-repeat;
+          }
+          .icon2 {
+            background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon2.png") no-repeat;
+          }
+          .icon3 {
+            background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/icon3.png") no-repeat;
+          }
           .icon1,
           .icon2,
           .icon3 {
             display: inline-block;
             width: 48px;
             height: 48px;
-            background: #ffffff;
+            background-size: 100% 100%;
             box-shadow:
               0 2px 1px -1px #bcd7ffb5,
               inset 0 1px 3px 6px #ace2ff08;

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -1,12 +1,31 @@
 <template>
   <div class="container">
-    <Map
-      ref="mapRef"
-      class="map"
-      active-map="satellite"
-      :event-details="eventDetails"
-      @onLoadCompleted="initData"
-    />
+    <div class="map">
+      <Map
+          ref="mapRef"
+          active-map="satellite"
+          :event-details="eventDetails"
+          @onLoadCompleted="initData"
+      />
+      <div class="legend-box">
+        <div class="legend-item">
+          <i class="icon1" />
+          未反馈
+        </div>
+        <div class="legend-item">
+          <i class="icon2" />
+          非林火
+        </div>
+        <div class="legend-item">
+          <i class="icon3" />
+          林火
+        </div>
+        <div class="legend-item">
+          <i class="icon4" />
+          已灭林火
+        </div>
+      </div>
+    </div>
     <div class="info-box">
       <div class="select-box">
         <van-radio-group
@@ -133,7 +152,7 @@ let iconList = reactive({
 const initData = () => {
   const dom = mapRef.value;
   console.log("初始化数据", queryParams);
-  forestFireData.value = {
+  const data = {
     total: 10,
     dataList: [
       {
@@ -248,7 +267,7 @@ const initData = () => {
       }
     ]
   };
-  forestFireData.value.dataList.forEach(item => {
+  data.dataList.forEach((item) => {
     const icon =
       item.dataType && !!iconList[item.dataType].image
         ? iconList[item.dataType].image
@@ -259,6 +278,7 @@ const initData = () => {
     item.size = iconList[item.dataType].size;
     item.lnglat = [item.longitude, item.latitude];
   });
+  forestFireData.value = data;
   dom.addMarker(forestFireData.value.dataList);
 };
 
@@ -293,6 +313,7 @@ onMounted(() => {
   .map {
     width: 100%;
     height: 50%;
+    position: relative;
   }
   .info-box {
     background-color: #ffffff;
@@ -391,4 +412,40 @@ onMounted(() => {
     right: 5px;
   }
 }
+.legend-box {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding: 9px 11px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 12px 0 rgba(65, 79,100, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #414F64;
+    .icon1 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFireWarn/icon1.png") no-repeat;
+    }
+    .icon2 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFireWarn/icon2.png") no-repeat;
+    }
+    .icon3 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFireWarn/icon3.png") no-repeat;
+    }
+    .icon4 {
+      background: url("@/assets/images/disasterRiskMonitor/forestFireWarn/icon4.png") no-repeat;
+    }
+    .icon1, .icon2, .icon3, .icon4 {
+      width: 12px;
+      height: 12px;
+      background-size: 100% 100%;
+      margin-right: 7px;
+    }
+  }
+}
 </style>