wenhongquan 3 年 前
コミット
acd64f58b7
5 ファイル変更177 行追加108 行削除
  1. 1 0
      LICENSE
  2. 10 0
      node_modules/.yarn-integrity
  3. 64 10
      ruoyi-ui/src/components/map/index.vue
  4. 98 98
      ruoyi-ui/vue.config.js
  5. 4 0
      yarn.lock

+ 1 - 0
LICENSE

@@ -1,3 +1,4 @@
+
 The MIT License (MIT)
 
 Copyright (c) 2018 RuoYi

+ 10 - 0
node_modules/.yarn-integrity

@@ -0,0 +1,10 @@
+{
+  "systemParams": "darwin-arm64-93",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}

+ 64 - 10
ruoyi-ui/src/components/map/index.vue

@@ -414,8 +414,9 @@ import {get as getProjection, transform} from "ol/proj";
 import {Vector as SourceVec} from "ol/source";
 import {Feature} from "ol";
 import {LineString, Point} from "ol/geom";
-import {Icon, Stroke, Style} from "ol/style";
-import {Vector as LayerVec} from "ol/layer";
+import {Icon, Stroke, Style,Circle,Fill,Text} from "ol/style";
+import { Vector as LayerVec } from "ol/layer";
+import Cluster from 'ol/source/Cluster'
 import {queryDatabymmsi, queryShipByDeviceId} from "@/api/data/deviceData";
 
 let ispro = process.env.NODE_ENV === "production";
@@ -511,6 +512,9 @@ export default {
           return feature;
         });
       if (feature) { //这里说明我们点击的是点标记,
+        if (feature.get("features") != undefined && feature.get("features").length > 0) {
+          feature = feature.get("features")[0];
+        }
         let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值,来判断点击不同的点标记触发的事件。
         if (tadata) {
           if (tadata.sectionId == "line") {
@@ -1083,6 +1087,8 @@ export default {
     },
     addpoints: function (datas, name = "ship_normal_") {
 
+
+
       var tt = [];
       for (const ip in datas) {
         var pi = datas[ip];
@@ -1106,7 +1112,8 @@ export default {
             sectionId: "point",
             towerNumber: 22,
             data: data,
-            type: type
+            type: type,
+            rotation:rotation
           }, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
 
           geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置,这里要注意fromLonLat
@@ -1130,18 +1137,65 @@ export default {
 
       }
 
+       const clusterSource = new Cluster({
+          minDistance: 20, // 聚合点与点之间的最小距离
+          source: new SourceVec({
+                features: tt //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
+              })
+       })
+
       var markerta = new LayerVec({
-        source: new SourceVec({
-          features: tt //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
-        }),
-        zIndex: zindex
+        source: clusterSource,
+        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'
+              })
+            })
+          })
+
+          }
+
+
+        }
+
       });
 
+
       var last1 = this.posints[name + 1];
       if (last1 != undefined && last1 != null) {
-        last1.setSource(new SourceVec({
-          features: tt //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
-        }));
+        last1.setSource(clusterSource);
       } else {
         // if (data["mmsi"] != undefined) {
         this.posints[name + 1] = markerta;

+ 98 - 98
ruoyi-ui/vue.config.js

@@ -2,7 +2,7 @@
 const path = require('path')
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+    return path.join(__dirname, dir)
 }
 
 const name = process.env.VUE_APP_TITLE || '江苏海事局船舶尾气排放遥感监测系统' // 网页标题
@@ -13,106 +13,106 @@ const port = process.env.port || process.env.npm_config_port || 80 // 端口
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分,具体配置参考文档
 module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
-  outputDir: "dist",
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
-  assetsDir: "static",
-  // 是否开启eslint保存检测,有效值:ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === "development",
-  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
-  productionSourceMap: false,
-  // webpack-dev-server 相关配置
-  devServer: {
-    host: "0.0.0.0",
-    port: port,
-    open: true,
-    proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        // target: `http://localhost:8080`,
-        target: `http://cbwq.xt.wenhq.top:8083/prod-api`,
-        changeOrigin: true,
-        pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: "",
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
+    publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+    // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
+    outputDir: "dist",
+    // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
+    assetsDir: "static",
+    // 是否开启eslint保存检测,有效值:ture | false | 'error'
+    lintOnSave: process.env.NODE_ENV === "development",
+    // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
+    productionSourceMap: false,
+    // webpack-dev-server 相关配置
+    devServer: {
+        host: "0.0.0.0",
+        port: port,
+        open: true,
+        proxy: {
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                // target: `http://localhost:8080`,
+                target: `http://36.134.96.232:8088/prod-api`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ["^" + process.env.VUE_APP_BASE_API]: "",
+                },
+            },
+            "/PLTV": {
+                target: "http://localhost:8082",
+                ws: true,
+                changeOrigin: true,
+                pathRewrite: {
+                    "^/": "",
+                },
+            },
         },
-      },
-      "/PLTV": {
-        target: "http://localhost:8082",
-        ws: true,
-        changeOrigin: true,
-        pathRewrite: {
-          "^/": "",
-        },
-      },
+        disableHostCheck: true,
     },
-    disableHostCheck: true,
-  },
-  configureWebpack: {
-    name: name,
-    resolve: {
-      alias: {
-        "@": resolve("src"),
-      },
+    configureWebpack: {
+        name: name,
+        resolve: {
+            alias: {
+                "@": resolve("src"),
+            },
+        },
     },
-  },
-  chainWebpack(config) {
-    config.plugins.delete("preload"); // TODO: need test
-    config.plugins.delete("prefetch"); // TODO: need test
+    chainWebpack(config) {
+        config.plugins.delete("preload"); // TODO: need test
+        config.plugins.delete("prefetch"); // TODO: need test
 
-    // set svg-sprite-loader
-    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
-    config.module
-      .rule("icons")
-      .test(/\.svg$/)
-      .include.add(resolve("src/assets/icons"))
-      .end()
-      .use("svg-sprite-loader")
-      .loader("svg-sprite-loader")
-      .options({
-        symbolId: "icon-[name]",
-      })
-      .end();
+        // set svg-sprite-loader
+        config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
+        config.module
+            .rule("icons")
+            .test(/\.svg$/)
+            .include.add(resolve("src/assets/icons"))
+            .end()
+            .use("svg-sprite-loader")
+            .loader("svg-sprite-loader")
+            .options({
+                symbolId: "icon-[name]",
+            })
+            .end();
 
-    config.when(process.env.NODE_ENV !== "development", (config) => {
-      config
-        .plugin("ScriptExtHtmlWebpackPlugin")
-        .after("html")
-        .use("script-ext-html-webpack-plugin", [{
-          // `runtime` must same as runtimeChunk name. default is `runtime`
-          inline: /runtime\..*\.js$/,
-        },])
-        .end();
-      config.optimization.splitChunks({
-        chunks: "all",
-        cacheGroups: {
-          libs: {
-            name: "chunk-libs",
-            test: /[\\/]node_modules[\\/]/,
-            priority: 10,
-            chunks: "initial", // only package third parties that are initially dependent
-          },
-          elementUI: {
-            name: "chunk-elementUI", // split elementUI into a single package
-            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
-          },
-          commons: {
-            name: "chunk-commons",
-            test: resolve("src/components"), // can customize your rules
-            minChunks: 3, //  minimum common number
-            priority: 5,
-            reuseExistingChunk: true,
-          },
-        },
-      });
-      config.optimization.runtimeChunk("single"), {
-        from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
-        to: "./", //到根目录下
-      };
-    });
-  },
+        config.when(process.env.NODE_ENV !== "development", (config) => {
+            config
+                .plugin("ScriptExtHtmlWebpackPlugin")
+                .after("html")
+                .use("script-ext-html-webpack-plugin", [{
+                    // `runtime` must same as runtimeChunk name. default is `runtime`
+                    inline: /runtime\..*\.js$/,
+                }, ])
+                .end();
+            config.optimization.splitChunks({
+                chunks: "all",
+                cacheGroups: {
+                    libs: {
+                        name: "chunk-libs",
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: 10,
+                        chunks: "initial", // only package third parties that are initially dependent
+                    },
+                    elementUI: {
+                        name: "chunk-elementUI", // split elementUI into a single package
+                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+                    },
+                    commons: {
+                        name: "chunk-commons",
+                        test: resolve("src/components"), // can customize your rules
+                        minChunks: 3, //  minimum common number
+                        priority: 5,
+                        reuseExistingChunk: true,
+                    },
+                },
+            });
+            config.optimization.runtimeChunk("single"), {
+                from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+                to: "./", //到根目录下
+            };
+        });
+    },
 };

+ 4 - 0
yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+