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">{{ deviceData.name }}</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-tabs v-model="d_activeName" @tab-click="handleClick1">
                    <el-tab-pane label="设备信息" name="d_first">
                        <el-row :gutter="3" style="margin-top:5rem">
                            <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">{{ deviceData.name }}</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">{{ deviceData.monitorName }}</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">{{ deviceData.status }}</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">{{ deviceData.orgName }}</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">{{ deviceData.updateTime }}</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">{{ deviceData.latilongti }}</div>
                            </el-col>
                        </el-row>

                    </el-tab-pane>
                    <el-tab-pane label="嫌疑船舶" name="d_second">
                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
                            <el-table-column type="index" label="序号" width="50">
                            </el-table-column>
                            <el-table-column property="mmsi" label="MMSI" width="100">
                            </el-table-column>
                            <el-table-column property="shipName" label="船名" width="100">
                            </el-table-column>
                            <el-table-column property="values" label="监测值" width="100">
                            </el-table-column>
                            <el-table-column property="createTime" label="监测时间">
                            </el-table-column>
                        </el-table>

                    </el-tab-pane>

                    <el-tab-pane label="违规船舶" name="d_thrid">
                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
                            <el-table-column type="index" label="序号" width="50">
                            </el-table-column>
                            <el-table-column property="mmsi" label="MMSI" width="100">
                            </el-table-column>
                            <el-table-column property="shipName" label="船名" width="100">
                            </el-table-column>
                            <el-table-column property="values" label="监测值" width="100">
                            </el-table-column>
                            <el-table-column property="createTime" label="监测时间">
                            </el-table-column>
                        </el-table>

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

                <!-- <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-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.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">{{ shipName.mmsi }}</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">{{shipName.monitorPointName}}</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">{{shipName.lng}}</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">{{shipName.lat}}</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">{{shipName.speed}}</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">{{shipName.head}}</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">{{shipName.course}}</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">{{shipName.receive}}</div>
                            </el-col>
                        </el-row>
                        <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem;display:none" 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.main" highlight-current-row height="200px" style="width: 100%" class="tableSc">
                            <el-table-column type="index" label="序号" width="50">
                            </el-table-column>
                            <el-table-column property="monitorPointName" label="监测点" width="100">
                            </el-table-column>
                            <el-table-column :label="'硫含量'">
                                <template slot-scope="scope">
                          <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalPer" style="color:red">{{ scope.row.so2Percent }}% ↑ {{ ((scope.row.so2Percent - normalPer) / normalPer * 100).toFixed(0) }}%</div>
                          <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalPer">{{ scope.row.so2Percent }}%</div>
                   </template>
              </el-table-column>
              <el-table-column
                :label="'黑度'">
                        <template slot-scope="scope">
                            <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot > normalCount" style="color:red">
                                {{ scope.row.rcgSoot }}度 ↑ {{ ((scope.row.rcgSoot - normalCount) / normalCount * 100).toFixed(0) }}%</div>
                            <div v-if="scope.row.rcgSoot!=null &&  scope.row.rcgSoot <= normalCount">{{ scope.row.rcgSoot }}度</div>
                        </template>
              </el-table-column>
              <el-table-column
                property="createTime"
                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.minor"
              highlight-current-row height="200px"
              style="width: 100%"
              class="tableSc"
              >
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                property="monitorPointName"
                label="监测点"
              >
              </el-table-column>
              <el-table-column
                :label="'SO2浓度'"
              >
                     <template slot-scope="scope">
                         <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration > normalPer" style="color:red">
                             {{ scope.row.so2Concentration }}% ↑</div>
                         <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration <= normalPer">{{ scope.row.so2Concentration }}%</div>
                     </template>
              </el-table-column>
              <el-table-column
                :label="'NO2浓度'"
              >
                       <template slot-scope="scope">
                           <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration > normalPer" style="color:red">
                               {{ scope.row.no2Concentration }}% ↑</div>
                           <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration <= normalPer">{{ scope.row.no2Concentration }}%</div>
                       </template>
              </el-table-column>
              <el-table-column
                :label="'CO2浓度'"
              >
                         <template slot-scope="scope">
                             <div v-if="scope.row.co2Concentration!=null &&  scope.row.co2Concentration > normalPer" style="color:red">
                                 {{ scope.row.co2Concentration }}% ↑</div>
                             <div v-if=" scope.row.co2Concentration!=null && scope.row.co2Concentration <= normalPer">{{ scope.row.co2Concentration }}%</div>
                         </template>
              </el-table-column>
              <el-table-column
                :label="'硫碳比'">
                       <template slot-scope="scope">
                           <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalCount" style="color:red">
                               {{ scope.row.so2Percent }}度 ↑</div>
                           <div v-if="scope.row.so2Percent!=null &&  scope.row.so2Percent <= normalCount">{{ scope.row.so2Percent }}度</div>
                       </template>
              </el-table-column>
              <el-table-column
                property="createTime"
                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" style="max-width:44rem">
      <el-radio-group v-model="caddr" @change="clickcg">
        <el-radio v-for="item in addrlist" :key="item.name" :label="item.name"></el-radio>
      </el-radio-group>
    </div>

     <div class="shipDiv" v-show="deviceTableShow">
            <div class="shipTitle">
                <span style="float:left">{{ pointDevice.name }}</span>
                <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceTableShow=false"></i>
            </div>
            <div style="padding—left:10rem" class="shipContent">
                        <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="pointDevice.list" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
                            <el-table-column type="index" label="序号" width="50">
                            </el-table-column>
                            <el-table-column property="monitorName" label="设备位置" width="100">
                            </el-table-column>
                            <el-table-column property="name" label="设备名称" width="100">
                            </el-table-column>
                            <el-table-column property="deviceType" label="设备类型" width="100">
                            </el-table-column>
                            <el-table-column property="status" label="设备状态">
                            </el-table-column>
                             <el-table-column property="orgName" label="管辖机构">
                            </el-table-column>
                        </el-table>
            </div>
        </div>

  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import View from "ol/View";

import { getTopLeft, getWidth } from "ol/extent";

import ImageWMS from "ol/source/ImageWMS";
import WMTS from "ol/source/WMTS";
import TileWMS from "ol/source/TileWMS";
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 { LineString, Point } from "ol/geom";
import { Icon, Stroke, Style } from "ol/style";
import { Vector as LayerVec } from "ol/layer";
import { queryShipByDeviceId, queryDatabymmsi } from "@/api/data/deviceData";

let ispro = process.env.NODE_ENV === "production";
let that = null;
let mapv = null;
//  ispro = false;
export default {
    props: {
        src: {
            type: String,
            required: false
        }
    },
    data() {
        return {
            map: null,
            shipName: '',
            deviceShow: false,
            deviceData: '',
            checkList: [],
            drawLayer: null,
            draw: null,
            normalPer: 0.1,
            normalCount: 1,
            activeName: 'first',
            tabledatas: [],
            deviceTableShow:false,
            pointDevice:{
                name:'',
                list:[],
            },
            // deviceList:[],

            d_activeName: 'd_first',
            tableData: { minor: [], main: [] },
            addrlist: [{ name: "南京四桥", location: [1, 1] }],
            caddr: "南京四桥",
            shipShow: false,
            shipdata: {},
        };
    },
    props:['deviceList'],
    mounted() {
        that = this;
        if (ispro) {
            this.initprod();
        } else {
            this.initdev();
        }
        mapv = this.map;

        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") {
                            that.shipShow = true;
                            that.deviceShow = false;
                            that.deviceTableShow = false
                            that.shipName = tadata.data;
                            that.activeName = "first";

                        } else if (tadata.type == "device") {
                            that.deviceShow = true;
                            that.shipShow = false;
                            that.deviceTableShow = false
                            that.deviceData = tadata.data;
                            that.d_activeName = 'd_first';

                        }
                        //  alert("我是点："+tadata.data)
                    }
                    //含有lnglat 参数的点标记触发事件
                }
            }
        });

        //  this.addpoint();
        //  this.addline();
    },
    methods: {
        //[[1111,1111]]
        handleClick1: function(tab, event) {

            var sect = tab.name;
            if (sect == "d_first") {
                return;
            }

            var q = {
                deviceId: this.deviceData.deviceId,
                illegalStatus: sect == "d_second" ? 2 : 3,
                index: this.deviceData.source
            }

            this.tabledatas = [];
            queryShipByDeviceId(q).then(data => {
                console.log(data);
                data.data.forEach(element => {
                    element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
                    this.tabledatas.push(element);
                });
            });
            //dd

        },
        clickcg: (value) => {
            console.log(that.deviceList);
            that.pointDevice.list = that.deviceList[value];
            console.log(that.pointDevice);
            that.deviceTableShow = true;
            that.pointDevice.name = value;
            that.addrlist.forEach(element => {
                if (element.name == value) {
                    var lo = that.transpoints(element.location, 0)[0];
                    console.log(lo)
                    mapv.getView().setCenter(lo);
                }
            });

        },
        setaddrlist(list) {
            this.addrlist = list;
            this.caddr = list[0].name;
            var lo = that.transpoints(list[0].location, 0)[0];
            mapv.getView().setCenter(lo);
        },
        addshipData(list) {

        },
        handleClick(tab, event) {
            console.log(tab, event);
            var sect = tab.name;
            if (sect == "first") {
                return;
            }
            var q = {
                mmsi: this.shipName.mmsi
            }

            this.tableData = { minor: [], main: [] };
            queryDatabymmsi(q).then(data => {
                console.log(data);
                this.tableData = data.data;
                //  console.log(deviceList);
            });






        },
        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() {

            function getWMTSLayer(url, layer) {
                let key = "98ec3e37b32974c2d58ea1a790640fe7"
                let projection = getProjection("EPSG:3857");
                let projectionExtent = projection.getExtent();
                let size = getWidth(projectionExtent) / 256;

                function getResolutions() {
                    let resolutions = [];
                    for (let z = 1; z < 19; ++z) {
                        resolutions[z] = size / Math.pow(2, z);
                    }
                    return resolutions
                }

                return new TileLayer({
                    source: new WMTS({
                        url: url,
                        layer: layer,
                        style: "default",
                        matrixSet: "w",
                        format: "tiles",
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: getResolutions(),
                            matrixIds: [ 0,1,2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19],
                        }),
                    }),

                })

            }

            var projection = getProjection("EPSG:3857");
            var format = 'image/png';
            var bounds = [13325725.763124488, 3757032.814272983,
                13345293.642365493, 3776600.693513988
            ];
            var untiled = new ImageLayer({
                source: new ImageWMS({
                    ratio: 1,
                    url: 'http://36.156.155.131:8090/geoserver/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "CJAUTH": 'CJUSER',
                        "LAYERS": 'CJ:G_CJ_NJ',
                        "TRANSPARENT": 'true',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                    }
                })
            });


            const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');

            var tiled = new TileLayer({
                visible: false,
                source: new TileWMS({
                    url: 'http://36.156.155.131:8090/geoserver/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        tiled: true,
                        "STYLES": '',
                        "CJAUTH": 'CJUSER',
                        "LAYERS": 'CJ:G_CJ_NJ',
                        "TRANSPARENT": 'true',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                        tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
                    }
                })
            });

            var map = new Map({
                target: 'map',
                layers: [
                    ign,
                    getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),

                    untiled,
                    tiled
                ],
                view: new View({
                    projection: projection
                })
            });
            // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
            this.map = map;
            //  map.getView().setCenter(
            //     [118.642876, 31.970445]
            // );
            map.getView().setCenter(this.transpoints([
                [118.642876, 31.970445]
            ], 0)[0]);
            map.getView().setZoom(13);
        },
        initdev1: 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");
             function getWMTSLayer(url, layer) {
                let key = "98ec3e37b32974c2d58ea1a790640fe7"
                let projection = getProjection("EPSG:3857");
                let projectionExtent = projection.getExtent();
                let size = getWidth(projectionExtent) / 256;

                function getResolutions() {
                    let resolutions = [];
                    for (let z = 1; z < 19; ++z) {
                        resolutions[z] = size / Math.pow(2, z);
                    }
                    return resolutions
                }

                return new TileLayer({
                    source: new WMTS({
                        url: url,
                        layer: layer,
                        style: "default",
                        matrixSet: "w",
                        format: "tiles",
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: getResolutions(),
                            matrixIds: [ 0,1,2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,15,16,17,18,19],
                        }),
                    }),

                })

            }
            var projection = getProjection("EPSG:3857");
            var format = 'image/png';
            var bounds = [13325725.763124488, 3757032.814272983,
                13345293.642365493, 3776600.693513988
            ];
            var untiled = new ImageLayer({
                source: new ImageWMS({
                    ratio: 1,
                    url: 'http://198.17.188.64/geoserver/gwc/service/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "CJAUTH": 'CJUSER',
                        "LAYERS": 'CJ:G_CJ',
                        "TRANSPARENT": 'true',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                    }
                })
            });




            var tiled = new TileLayer({
                visible: false,
                source: new TileWMS({
                    url: 'http://198.17.188.64/geoserver/gwc/service/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        tiled: true,
                        "STYLES": '',
                        "CJAUTH": 'CJUSER',
                        "LAYERS": 'CJ:G_CJ',
                        "TRANSPARENT": 'true',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                        tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
                    }
                })
            });

            const map = new Map({
                target: "map",
                layers: [getWMTSLayer('http://198.17.188.64:9879/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec'),getWMTSLayer('http://198.17.188.64:9879/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
                    untiled,
                    tiled],
                view: new View({
                   projection: projection
                })
            });
            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(linePoint) {

            var points = this.transpoints(linePoint, 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,rotation=0) {
            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",
                        rotation:rotation,
                        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;
    padding-top: 4rem;
    padding-left: 5rem;
    background-color: white;
    padding-right: 4rem;
}

.radio_div>div {
    line-height: 10rem;
}

.el-tabs__header {
    margin: 0 !important;
}
</style>