:sparkles: 实现热力图效果，增加监听地图级别和拖动功能

neim-ui/package.json

@@ -56,6 +56,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "tiff.js": "^1.0.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

neim-ui/src/views/largeScreenPage/components/bigeMap.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
     <div id='map'></div>
+    <div id="position">
+      <div id="zoom">
+        当前级别 : 6
+      </div>
+      <div id="move">
+        当前中心点: 纬度:0.00000,经度:0.00000
+      </div>
+    </div>
     <!--    <el-radio-group v-model="leavel" @change="setData">-->
     <!--      <el-radio class="radio" label="100">100Mb</el-radio>-->
     <!--      <el-radio class="radio" label="250">250Mb</el-radio>-->
@@ -12,7 +20,9 @@
 
 <script>
 import bigemap from '@/utils/bigemap/map'
-
+import Tiff from "tiff.js";
+import axios from "axios";
+let map;
 export default {
   name: "bigeMap",
   data() {
@@ -33,7 +43,10 @@ export default {
     initBigeMap() {
       bigemap.then(() => {
         window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
-        this.bMap = window.BM.map('map', 'bigemap.zhongkexingtu', {
+        // arcgis-satellite
+        // amap-satellite
+        // zhongkexingtu
+        this.bMap = window.BM.map('map', 'bigemap.arcgis-satellite', {
           center: [30, 104],
           minZoom: 6,
           zoom: 11,
@@ -89,8 +102,14 @@ export default {
           window.BM.geoJSON(mask, {
             color: 'orange',
             fillColor: '#0A163A',
-            fillOpacity: 0.9
+            fillOpacity: 0.7
           }).addTo(this.bMap);
+
+          //初始化热力图
+          this.setHeatMap(this.bMap);
+          //绑定事件
+          this.bindEvents(this.bMap);
+
         })
 
         /**
@@ -120,6 +139,36 @@ export default {
          */
       })
     },
+    //设置热力图效果
+    setHeatMap(map) {
+      axios.get("/img/heapmap/mean-wind-speed-2022.tiff", {
+        responseType: "arraybuffer",
+      }).then((res) => {
+        const fr = new FileReader();
+        fr.onloadend = function (e) {
+          var image = new Tiff({buffer: e.target.result});
+          var imageUrl = image.toDataURL(),
+            imageBounds = [
+              [43.422993, 121.183134],
+              [53.564656, 135.091461],
+            ];
+          window.BM.imageOverlay(imageUrl, imageBounds).addTo(map);
+          map.fitBounds(imageBounds);
+        };
+        fr.readAsArrayBuffer(new Blob([res.data]));
+      });
+    },
+    //绑定事件-监听地图级别和拖动
+    bindEvents(map){
+      map.on('moveend', function (e) {
+        const c = this.getCenter();
+        document.getElementById('move').innerHTML = '当前中心点: 纬度:' + c.lat.toFixed(5) + ',经度:' + c.lng.toFixed(5);
+      });
+      //添加一个缩放事件
+      map.on('zoomend', function (e) {
+        document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
+      });
+    },
     setData(params) {
       fetch(`/js/json/wind_data/20230403_00_atmoslev_` + params + `_mb.json`)
         .then((res) => {
@@ -209,7 +258,7 @@ export default {
             //       }
             //     }, 300);
             //   }
-          }).addTo(this.Bmap);
+          }).addTo(this.bMap);
         })
     }
   }