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

<template>
 <div style="width:100%;height:100%">
  <div id="map" ref="rootmap"></div>

   <div class="shipDiv" v-show="deviceShow">
      <div class="shipTitle">
        <span style="float:left">{{deviceName}}</span>
        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
      </div>
      <div style="padding—left:10rem" class="shipContent">
            <el-row :gutter="3" style="margin-top:13rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">{{deviceName}}</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">南京三桥</div>
              </el-col>
            </el-row>
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">在线</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">南京海事局</div>
              </el-col>
            </el-row>
             <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">2021-09-30 10:12:11</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">118.32,32.04</div>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
              </el-col>
            </el-row>
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
              </el-col> -->
            </el-row>
            <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
      </div>
    </div>

    <div class="shipDiv" v-show="shipShow">
      <div class="shipTitle">
        <span style="float:left">{{shipName}}</span>
        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
      </div>
      <div style="padding—left:10rem" class="shipContent">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="AIS信息" name="first">
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">3202342354</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">南京三桥</div>
              </el-col>
            </el-row>
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">182.78</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">32.04</div>
              </el-col>
            </el-row>
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">20 km/h</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">东南</div>
              </el-col>
            </el-row>
            <el-row :gutter="3" style="margin-top:3rem">
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">北</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple contentFont" style="float:left">3 m/s</div>
              </el-col>
            </el-row>
            <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
          </el-tab-pane>
          <el-tab-pane label="主要监测数据" name="second">
            <el-table
              :header-cell-style="{ background: '#e4eafc'}"
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              style="width: 100%"
              class="tableSc">
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                property="name"
                label="监测点"
                width="100">
              </el-table-column>
              <el-table-column
                :label="'硫含量'"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="'黑度'">
                <template slot-scope="scope">
                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
                </template>
              </el-table-column>
              <el-table-column
                property="date"
                label="监测时间">
              </el-table-column>
            </el-table>

          </el-tab-pane>

          <el-tab-pane label="其它监测数据" name="thrid">
            <el-table
              :header-cell-style="{ background: '#e4eafc'}"
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              style="width: 100%"
              class="tableSc"
              height=200>
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                property="name"
                label="监测点"
                >
              </el-table-column>
              <el-table-column
                :label="'SO2浓度'"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="'NO2浓度'"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="'CO2浓度'"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
                  <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="'硫碳比'">
                <template slot-scope="scope">
                  <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑</div>
                  <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
                </template>
              </el-table-column>
              <el-table-column
                property="date"
                label="监测时间">
              </el-table-column>
            </el-table>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="icon_div">
         <div style="margin-top:5rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/zc.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">正常船舶</span></div></div>
         <br/>
         <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/xy.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">硫超标嫌疑船舶</span></div></div>
         <br/>
         <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/wg.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">黑烟嫌疑船舶</span></div></div>
            <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
    </div>
     <div class="icon_div" style="right: 263rem;">
         <div style="margin-top:5rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/hy.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">黑烟设备</span></div></div>
         <br/>
         <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/ais.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">光谱设备</span></div></div>
         <br/>
         <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/so2.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">嗅探设备</span></div></div>
         <br/>
            <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
    </div>

    <div class="radio_div">
          <el-checkbox-group v-model="checkList">
              <el-checkbox label="热力图"></el-checkbox>
              <el-checkbox label="设备"></el-checkbox>
        </el-checkbox-group>
    </div>
 </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, transform } from "ol/proj";
import { getWidth } from "ol/extent";

import { Vector as SourceVec, OSM } from "ol/source";
import { Feature } from "ol";
import { Point,LineString } from "ol/geom";
import { Style, Icon,Stroke } from "ol/style";
import { Vector as LayerVec } from "ol/layer";

let ispro = process.env.NODE_ENV === "production";
//  ispro = false;
export default {
  props: {
    src: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      map: null,
      shipName:'',
      deviceShow:false,
      deviceName:'',
      checkList: [],
      drawLayer: null,
      draw: null,
      normalPer: 0.1,
      normalCount: 1,
      activeName:'first',
       tableData: [{
        date: '2016-05-02',
        name: '南京四桥',
        address: '上海市普陀区金沙江路 1518 弄',
        value: 0.19,
        count: 1.9,
      }, {
        date: '2016-05-04',
        name: '南京四桥',
        value: 0.1,
        count: 1.3,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '南京四桥',
        value: 0.2,
        count: 2,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '南京四桥',
        value: 0.08,
        count: 0.6,
        address: '上海市普陀区金沙江路 1516 弄'
      }],
       shipShow: false,
    };
  },
  mounted() {
    var that = this;
    if (ispro) {
      this.initprod();
    } else {
      this.initdev();
    }

    this.map.on("click", function(e) {
      console.log(e)
      var feature = that.map.forEachFeatureAtPixel(e.pixel,
          function(feature) {
            return feature;
          });
        if (feature) { //这里说明我们点击的是点标记，
          let tadata = feature.get("tadata");//我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
           if (tadata) {
             if(tadata.sectionId=="line"){
               alert("我是线："+tadata.towerNumber)
             }
             if(tadata.sectionId=="point"){
               console.log(tadata);
               if(tadata.type == "ship"){
                    console.log(111111);
                     that.shipShow = true;
                     that.deviceShow = false;
                     that.shipName = tadata.data
               }else if(tadata.type == "device"){
                     that.deviceShow = true;
                     that.shipShow = false;
                     that.deviceName = tadata.data
               }
              //  alert("我是点："+tadata.data)
             }
          //含有lnglat 参数的点标记触发事件
          }
        }
    });

    //  this.addpoint();
    //  this.addline();
  },
  methods: {
    //[[1111,1111]]
     handleClick(tab, event) {
      console.log(tab, event);
    },
    transpoints: function(points, type) {
      if (false) {
        return points;
      } else {
        if (type == 1) {
          var pp = [];
          points.forEach(point => {
            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
          });
          return pp;
        } else {
          var pp = [];
          points.forEach(point => {
            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
          });
          return pp;
        }
      }
    },
    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({
          center: [0, 0],
          zoom: 2
        })
      });
      map
        .getView()
        .fit(
          [
            13149614.849955281,
            3639625.538826909,
            13306157.88388332,
            3874440.0897189667
          ],
          map.getSize()
        );

      this.map = map;
      map.getView().setCenter(this.transpoints([[118.642876,31.970445]],0)[0]);
      map.getView().setZoom(13);
    },
    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:2
        })
      });
      map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
      this.map = map;
       map.getView().setCenter(this.transpoints([[118.642876,31.970445]],0)[0]);
       map.getView().setZoom(13);
    },

    addline:function(){

      var points = this.transpoints([[118.78, 32.04],[118.88, 32.14]], 0)

      let line= new Feature({
        tadata: {
          sectionId: "line",
          towerNumber: 22
        },
        geometry:new LineString(points)});//这里要注意写fromLonLat，很重要
      line.setStyle(new Style({
             stroke: new Stroke({
              width: 3,
               color: "#008000"
             })
       }));
        this.linevectorLayer = new LayerVec({
            source: new SourceVec({
              features: [line] //要绘制多段线，直接push到这里面就行了
            })
          });
          this.map.addLayer(this.linevectorLayer);//这里是执行，执行之后点就出来了

    },

    addpoint: function(addrArry,data,img,type) {
      var lnglat = this.transpoints(addrArry, 0)[0];

      let tamarker = new Feature({
        tadata: {
          sectionId: "point",
          towerNumber: 22,
          data:data,
          type:type
        }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
        geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
      });
      tamarker.setStyle(
        new Style({
          image: new Icon({
            color: "#eee",
            crossOrigin: "anonymous",
            src: require("../../assets/images/icon/"+img) //本地的样式
          })
        })
      ); //这里是样式
      var markerta = new LayerVec({
        source: new SourceVec({
          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        })
      });
      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
    }
  }
};
</script>

<style scoped>
#map {
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
.contentFont{
      font-size: 6rem;
    line-height: 16rem;
}

.shipDiv {
  position: absolute;
  top: 250rem;
  left: 140rem;
  width: 240rem;
  min-height: 130rem;
  background-color: white;
}
 .el-tabs__header{
    margin: 0!important;
  }

.shipTitle {
  padding-top: 4rem;
  padding-left: 10rem;
  padding-right: 10rem;
  width: 100%;
  height: 20rem;
  background-color: #0d25a5;
  color: white;
  font-size: 7rem
}

.shipContent >>> .el-tabs__item {
  font-weight: bold;
  color: #A8A8A8
}

.shipContent >>> .el-tabs__item.is-active {
  color: #0d25a5
}

.shipContent >>> .el-tabs__active-bar {
  margin-left: 10rem
}

.shipContent >>> .el-tabs__nav {
  padding-left: 10rem
}

.shipContent >>> .el-tabs__active-bar {
  background-color: #0d25a5
}

.tableSc >>> tr {
  padding: 0;
  height: 3rem;
  line-height: 3rem;
  font-size: 5rem;
}

.tableSc >>> td {
  padding: 0;
  height: 3rem;
  line-height: 3rem
}

.icon_div{
  position: absolute;
  top: 330rem;
  right: 160rem;
  width: 70rem;
  min-height: 40rem;
  background-color: white;
}

.radio_div{
  position: absolute;
  top: 50rem;
  left: 120rem;
  width: 40rem;
  height: 30rem;
  padding-top: 2rem;
  padding-left: 5rem;
  background-color: white;
}
.radio_div>div{
  line-height: 10rem;
}
</style>