添加地图

ruoyi-ui/package.json

@@ -49,6 +49,7 @@
         "js-cookie": "2.2.1",
         "jsencrypt": "3.0.0-rc.1",
         "nprogress": "0.2.0",
+        "ol": "^6.9.0",
         "quill": "1.3.7",
         "screenfull": "5.0.2",
         "sortablejs": "1.10.2",
@@ -85,4 +86,4 @@
         "> 1%",
         "last 2 versions"
     ]
-}
+}

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

@@ -0,0 +1,141 @@
+<template>
+  <div id="map" ref="rootmap"></div>
+</template>
+
+<script>
+import "ol/ol.css";
+import Map from "ol/Map";
+import TileLayer from "ol/layer/Tile";
+import View from "ol/View";
+import WMTS from "ol/source/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
+import { fromLonLat, get as getProjection } from "ol/proj";
+import { getWidth } from "ol/extent";
+
+export default {
+  props: {
+    src: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      map: null
+    };
+  },
+  mounted() {
+    if(process.env.NODE_ENV === "production"){
+        this.initprod();
+    }else{
+       this.initdev();
+    }
+
+
+  },
+  methods: {
+    initdev: function() {
+      const proj3857 = getProjection("EPSG:3857");
+      const tileGrid = new WMTSTileGrid({
+        tileSize: [256, 256],
+        origin: [-2.003750834e7, 2.003750834e7],
+        extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
+        resolutions: [
+          76.43702827453613,
+          38.218514137268066,
+          19.109257068634033,
+          9.554628534317017,
+          4.777314267158508
+        ],
+        matrixIds: [
+          "EPSG:3857:10",
+          "EPSG:3857:11",
+          "EPSG:3857:12",
+          "EPSG:3857:13",
+          "EPSG:3857:14"
+        ]
+      });
+
+      const ign_source = new WMTS({
+        url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
+        layer: "test:nj10",
+        matrixSet: "EPSG:3857",
+        format: "image/png",
+        projection: proj3857,
+        tileGrid: tileGrid,
+        style: ""
+      });
+
+      const ign = new TileLayer({
+        source: ign_source
+      });
+      const map = new Map({
+        target: "map",
+        layers: [ign],
+        view: new View({
+          zoom: 10
+        })
+      });
+      map
+        .getView()
+        .fit(
+          [
+            13149614.849955281,
+            3639625.538826909,
+            13306157.88388332,
+            3874440.0897189667
+          ],
+          map.getSize()
+        );
+    },
+    initprod: function() {
+      const proj3857 = getProjection("EPSG:4326");
+      const tileGrid = new WMTSTileGrid({
+        tileSize: [256, 256],
+        origin: [-180.0, 90.0],
+        extent: [-180.0,-90.0,180.0,90.0],
+        resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],
+        matrixIds: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21']
+      });
+
+      const ign_source = new WMTS({
+        url: "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
+        layer: "CJ:G_CJ",
+        matrixSet: "EPSG:4326",
+        format: "image/png",
+        projection: proj3857,
+        tileGrid: tileGrid,
+        style: ""
+      });
+
+      const ign = new TileLayer({
+        source: ign_source
+      });
+      const map = new Map({
+        target: "map",
+        layers: [ign],
+        view: new View({
+          zoom: 10
+        })
+      });
+      map
+        .getView()
+        .fit(
+          [75.0,20.0,135.0,50.0],
+          map.getSize()
+        );
+    }
+  }
+};
+</script>
+
+<style>
+#map {
+  height: 100%;
+}
+/*隐藏ol的一些自带元素*/
+.ol-attribution,
+.ol-zoom {
+  display: none;
+}
+</style>

ruoyi-ui/src/views/components/table/homeTable.vue

@@ -1,5 +1,6 @@
 <template>
-  <div style="width:100%;height:100%;background-color:blue">
+  <div style="width:100%;height:100%;background-color:rgb(0, 9, 40)">
+    <mapdiv></mapdiv>
     <div class="shipDiv" v-show="shipShow">
       <div class="shipTitle">
         <span style="float:left">一号船</span>
@@ -310,11 +311,13 @@
 <script>
 import scroll from "./scroll.vue"
 import {getDeviceType, getIllegalShipStatic, getStaticDevice,getSo2Time,queryIllegalInfoList} from "@/api/data/staticalData";
+import mapdiv from '../../../components/map/index.vue'
 
 export default {
   name: "homeTable",
   components: {
-    scroll
+    scroll,
+    mapdiv
   },
   data() {
     return {
@@ -388,7 +391,7 @@ export default {
     }
   }, mounted() {
     this.getMonthDate();
-    this.getStaticDevice();
+    //this.getStaticDevice();
     this.getIllegalShipStatic();
     //  console.log(111111111111)
     //  this.getChart();
@@ -398,38 +401,38 @@ export default {
            getSo2Time(this.shipDate).then(data =>{
                   this.getMonthArry(this.shipDate.startMonth,this.shipDate.endMonth);
                   this.so2TimeData = data.data
-                  this.getShipChart();  
+                  this.getShipChart();
           });
     },
     getMonthArry(start,end){
           // this.shipDateArry.push(start);
-          var startYear = start.split('-')[0]; 
-          var startMonth = parseInt(start.split('-')[1]); 
-          var endYear = end.split('-')[0]; 
-          var endMonth = parseInt(end.split('-')[1]); 
+          var startYear = start.split('-')[0];
+          var startMonth = parseInt(start.split('-')[1]);
+          var endYear = end.split('-')[0];
+          var endMonth = parseInt(end.split('-')[1]);
           if(startYear == endYear){
               for(var i = startMonth;i<endMonth+1;i++){
                 if(i<10){
                       this.shipDateArry.push(startYear+'-'+"0"+i);
                 }else{
-                      this.shipDateArry.push(startYear+'-'+i); 
-                }       
+                      this.shipDateArry.push(startYear+'-'+i);
+                }
               }
           }else{
               for(var i = startMonth;i<13;i++){
                   if(i<10){
                       this.shipDateArry.push(startYear+'-'+"0"+i);
                 }else{
-                      this.shipDateArry.push(startYear+'-'+i); 
-                }       
-              }   
+                      this.shipDateArry.push(startYear+'-'+i);
+                }
+              }
             for(var i = 1;i<endMonth;i++){
                 if(i<10){
                       this.shipDateArry.push(endYear+'-'+"0"+i);
                 }else{
-                      this.shipDateArry.push(endYear+'-'+i); 
-                }       
-              }   
+                      this.shipDateArry.push(endYear+'-'+i);
+                }
+              }
 
           }
           console.log(this.shipDateArry);
@@ -512,7 +515,7 @@ export default {
                   so2Arry.push(this.so2TimeData.so2[this.shipDateArry[index]+'-01T00:00:00Z']);
             }else {
                   so2Arry.push(0);
-            }  
+            }
             if(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']){
                   aisArry.push(this.so2TimeData.ais[this.shipDateArry[index]+'-01T00:00:00Z']);
             }else{