fix 热力图

ruoyi-ui/src/components/map/index.vue

@@ -412,10 +412,11 @@ import WMTSTileGrid from "ol/tilegrid/WMTS";
 import {get as getProjection, transform} from "ol/proj";
 
 import {Vector as SourceVec} from "ol/source";
-import {Feature} from "ol";
+import { Feature } from "ol";
+import {WKT} from "ol/format";
 import {LineString, Point} from "ol/geom";
 import {Icon, Stroke, Style,Circle,Fill,Text} from "ol/style";
-import { Vector as LayerVec } from "ol/layer";
+import { Vector as LayerVec,Heatmap } from "ol/layer";
 import Cluster from 'ol/source/Cluster'
 import {queryDatabymmsi, queryShipByDeviceId} from "@/api/data/deviceData";
 
@@ -1137,65 +1138,83 @@ export default {
 
       }
 
-       const clusterSource = new Cluster({
-          minDistance: 20, // 聚合点与点之间的最小距离
-          source: new SourceVec({
-                features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-              })
-       })
+      //  const clusterSource = new Cluster({
+      //     minDistance: 20, // 聚合点与点之间的最小距离
+      //     source: new SourceVec({
+      //           features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+      //         })
+      //  })
 
       var markerta = new LayerVec({
-        source: clusterSource,
+        source: new SourceVec({
+                features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+              }),
         zIndex: zindex,
-        style: function (feature) {
-          // 点的个数
-          const size = feature.get('features').length;
-          if (size == 1) {
-            return new Style({
-            image: new Icon({
-              color: "#eee",
-              rotation: feature.get('features')[0].get("tadata").rotation,
-              anchor: [0.5, 0.5],
-              rotateWithView: true,
-              // color:"red",
-              // size:[60,20],
-              crossOrigin: "anonymous",
-              src: require("../../assets/images/icon/" + img) //本地的样式
-            })
-          })
-
-          } else {
-            return new Style({
-            image: new Icon({
-              color: "#eee",
-              rotation: feature.get('features')[0].get("tadata").rotation,
-              anchor: [0.5, 0.5],
-              rotateWithView: true,
-              // color:"red",
-              // size:[60,20],
-              crossOrigin: "anonymous",
-              src: require("../../assets/images/icon/" + img) //本地的样式
-            }),
-            text: new Text({ // 文字样式
-              font: '12px sans-serif',
-              text: size.toString(),
-              fill: new Fill({
-                color: '#fff'
-              })
-            })
-          })
-
-          }
-
-
-        }
+        maxZoom: 24,
+        minZoom: 14,
+        // style: function (feature) {
+        //   // 点的个数
+        //   const size = feature.get('features').length;
+        //   if (size == 1) {
+        //     return new Style({
+        //     image: new Icon({
+        //       color: "#eee",
+        //       rotation: feature.get('features')[0].get("tadata").rotation,
+        //       anchor: [0.5, 0.5],
+        //       rotateWithView: true,
+        //       // color:"red",
+        //       // size:[60,20],
+        //       crossOrigin: "anonymous",
+        //       src: require("../../assets/images/icon/" + img) //本地的样式
+        //     })
+        //   })
+
+        //   } else {
+        //     return new Style({
+        //     image: new Icon({
+        //       color: "#eee",
+        //       rotation: feature.get('features')[0].get("tadata").rotation,
+        //       anchor: [0.5, 0.5],
+        //       rotateWithView: true,
+        //       // color:"red",
+        //       // size:[60,20],
+        //       crossOrigin: "anonymous",
+        //       src: require("../../assets/images/icon/" + img) //本地的样式
+        //     }),
+        //     text: new Text({ // 文字样式
+        //       font: '12px sans-serif',
+        //       text: size.toString(),
+        //       fill: new Fill({
+        //         color: '#fff'
+        //       })
+        //     })
+        //   })
+        //
+        // }
+        // }
 
       });
 
+      var heatMap =  new Heatmap({
+            source: new SourceVec({
+                // 点数据
+                features: tt,
+            }),
+            // 热力图半径，数值越大，点越融合
+            radius: 14,
+            // 热力图聚焦，数值越小越聚焦，越大越散
+        blur: 23,
+              maxZoom: 14,
+        minZoom: 1,
+        });
+
+        this.map.addLayer(heatMap);
 
       var last1 = this.posints[name + 1];
       if (last1 != undefined && last1 != null) {
-        last1.setSource(clusterSource);
+        last1.setSource(new SourceVec({
+                features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+              }));
       } else {
         // if (data["mmsi"] != undefined) {
         this.posints[name + 1] = markerta;
@@ -1207,6 +1226,30 @@ export default {
     }
   }
 };
+
+
+
+function getFeatureByWKT(wkt, sourceCode, targetCode) {
+        try {
+            let view = mapv.getView();
+            if (!wkt) {
+                return null;
+            }
+            let format = new WKT();
+
+            let feature;
+
+            feature = format.readFeature(wkt, {
+                featureProjection: targetCode || view.getProjection(),
+                dataProjection: sourceCode || view.getProjection(),
+            });
+
+            return feature;
+        } catch (e) {
+            console.log(e);
+            return null;
+        }
+}
 </script>
 
 <style scoped>