<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_four">

            <!-- <el-row  style="margin-top:3rem"> -->
            <div v-if="deviceData.devicePhoto!=undefined && deviceData.devicePhoto.length>0">
              <div style="padding:10rem;display:inline-block;margin-top:5rem" v-for="item,idex in deviceData.devicePhoto" v-bind:key="index">
                <el-image
                  style="width: 60rem; height: 60rem"
                  :src="item"
                  :preview-src-list="deviceData.devicePhoto">
                </el-image>
              </div>
            </div>
            <div v-else>
              <div style="margin-top: 33rem;">该设备无图片</div>

            </div>

            <!-- </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">正常</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">正常</div>
                  <div v-if="scope.row.rcgSoot == null && scope.row.illegalType === 'heiyan'">正常</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 }}%</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 }}%</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 }}%</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"/></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"/></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"/></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"/></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"/></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"/></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="layer_div" style="max-width:44rem">
      <el-checkbox-group v-model="cselect" @change="clickly">
        <el-checkbox v-for="item in layersgroup" :key="item.name" :label="item.name"></el-checkbox>
      </el-checkbox-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="241px" 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="设备名称">
          </el-table-column>
          <el-table-column property="deviceType" label="设备类型" width="80">
          </el-table-column>
          <el-table-column property="status" label="设备状态" width="80">
          </el-table-column>
          <el-table-column property="orgName" label="管辖机构" width="100">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="shipDiv" style="top:100rem;left:174rem" v-show="showvideos">
      <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="closevideo"></i>
      </div>
      <div style="padding—left:10rem" class="shipContent">
        <vue-aliplayer-v2
          :source="source"
          ref="VueAliplayerV2"
          :options="options"
        />
      </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 VueAliplayerV2 from "vue-aliplayer-v2";

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 {queryDatabymmsi, queryShipByDeviceId} 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: '',
      layersgroup: [{name: "所有船舶", label: "所有船舶"}],
      deviceShow: false,
      deviceData: '',
      showvideos: false,
      checkList: [],
      drawLayer: null,
      draw: null,
      normalPer: 0.1,
      normalCount: 1,
      activeName: 'first',
      tabledatas: [],
      deviceTableShow: false,
      posints: {},

      options: {
        preload: true,
        autoplay: true,
        rePlay: false,
        isLive: true, //切换为直播流的时候必填
        format: 'm3u8', //切换为直播流的时候必填
        skinLayout: [
          {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
          {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
          {name: "infoDisplay", align: "cc"},
          {
            name: "controlBar", align: "blabs", x: 0, y: 0,
            children: [
              {name: "liveDisplay", align: "tlabs", x: 15, y: 5},
              {name: "fullScreenButton", align: "tr", x: 10, y: 13},
              {name: "volume", align: "tr", x: 10, y: 10}
            ]
          }
        ]
      },
      source: "",
      pointDevice: {
        name: '',
        list: [],
      },
      // deviceList:[],

      d_activeName: 'd_first',
      tableData: {minor: [], main: []},
      addrlist: [],
      caddr: "",
      cselect: [],
      shipShow: false,
      shipdata: {},
    };
  },
  props: ['deviceList'],
  components: {
    VueAliplayerV2
  },
  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") {
            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';
              if (tadata.data.source == "heiyan_ship_recognition") {
                that.source = tadata.data.liveStreamUrl;
                setTimeout(function () {
                  that.$refs.VueAliplayerV2.play();
                }, 1000)
                that.showvideos = true;

              }

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


    var view = this.map.getView();

    view.on('change:resolution', function (e) {
      that.$parent.getallshipData();
    });
    view.on('change:center', function (e) {
      that.$parent.getallshipData();
    });
    this.map.on('moveend', function (e) {
      that.$parent.getallshipData();
    });
    // this.map.on("change:resolution", function(e) {
    //    console.log('size改变！');
    //     that.$parent.getallshipData();
    // });
    //  this.addpoint();
    //  this.addline();

    setTimeout(function () {
      // alert(11);
      that.closevideo();

    }, 1000)

    window.getmapviewlatlng = function () {
      var pps = mapv.getView().calculateExtent(mapv.getSize());
      return (that.transpoints([
        [pps[0], pps[1]],
        [pps[2], pps[3]]
      ], 1));
    }


  },
  methods: {
    //[[1111,1111]]
    closevideo() {
      this.showvideos = false;
      this.$refs.VueAliplayerV2.pause();
    },
    handleClick1: function (tab, event) {

      var sect = tab.name;
      if (sect == "d_first" || sect == "d_four") {
        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) => {

      that.pointDevice.list = that.deviceList[value];
      that.deviceTableShow = true;
      that.deviceShow = false;
      that.shipShow = false;
      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);
        }
      });

    },
    clickly: (value) => {
      if (value.indexOf('所有船舶') != -1) {
        that.$parent.startgetall();
        // console.log(that.posints)

      } else {
        that.$parent.stopgetall();
        for (const key in that.posints) {
          if (key.indexOf("ship_normal_") == -1) {
            continue;
          }
          var lays = that.posints[key];
          if (lays == null) continue;
          lays.disposeInternal();
          that.map.removeLayer(lays);
          that.posints[key] = null;
        }

      }

    },
    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: 8,
          color: "#0814f1"
        })
      }));
      this.linevectorLayer = new LayerVec({
        source: new SourceVec({
          features: [line] //要绘制多段线，直接push到这里面就行了
        }),
        zIndex: 2
      });
      this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了


    },

    addpoint: function (addrArry, data, img, type, rotation = 0, zindex = 3, shipl = "ship_") {
      var lnglat = this.transpoints(addrArry, 0)[0];
      var lnglats = null;

      if (data["lnglat"] != undefined) {
        lnglats = this.transpoints(data["lnglat"], 0);
      }
      lnglats = null;

      let tamarker = new Feature({
        tadata: {
          sectionId: "point",
          towerNumber: 22,
          data: data,
          type: type
        }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。

        geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
      });
      tamarker.setStyle(
        new Style({
          image: new Icon({
            color: "#eee",
            rotation: rotation,
            anchor: [0.5, 0.5],
            rotateWithView: true,
            // color:"red",
            // size:[60,20],
            crossOrigin: "anonymous",
            src: require("../../assets/images/icon/" + img) //本地的样式
          })
        })
      ); //这里是样式
      var markerta = new LayerVec({
        source: new SourceVec({
          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }),
        zIndex: zindex
      });

      var last1 = this.posints[shipl + data["mmsi"]];
      if (last1 != undefined && last1 != null) {
        last1.setSource(new SourceVec({
          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }));
      } else {
        if (data["mmsi"] != undefined) {
          this.posints[shipl + data["mmsi"]] = markerta;
        }
        this.map.addLayer(markerta); //这里是执行，执行之后点就出来了

      }


      // if (lnglats != null) {
      //   var that = this;
      //   var indexp = 0;

      //   function addlayers(indexp) {

      //     var last = that.posints[shipl + data["mmsi"]];


      //     let tamarker = new Feature({
      //       tadata: {
      //         sectionId: "point",
      //         towerNumber: 22,
      //         data: data,
      //         type: type
      //       }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。

      //       geometry: new Point(lnglats == null ? lnglat : lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
      //     });
      //     tamarker.setStyle(
      //       new Style({
      //         image: new Icon({
      //           color: "#eee",
      //           rotation: rotation,
      //           anchor: [0.5, 0.5],
      //           rotateWithView: true,
      //           // color:"red",
      //           // size:[60,20],
      //           crossOrigin: "anonymous",
      //           src: require("../../assets/images/icon/" + img) //本地的样式
      //         })
      //       })
      //     ); //这里是样式

      //     last.setSource(new SourceVec({
      //       features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
      //     }));

      //   }


      //   setInterval(() => {
      //     indexp = indexp >= lnglats.length ? 0 : indexp;
      //     addlayers(indexp++);
      //   }, 1000);


      // }

    },
    addpoints: function (datas, name = "ship_normal_") {

      var tt = [];
      for (const ip in datas) {
        var pi = datas[ip];
        var addrArry = pi[0],
          data = pi[1],
          img = pi[2],
          type = pi[3],
          rotation = pi[4],
          zindex = pi[5],
          shipl = pi[6];
        var lnglat = this.transpoints(addrArry, 0)[0];
        var lnglats = null;

        if (data["lnglat"] != undefined) {
          lnglats = this.transpoints(data["lnglat"], 0);
        }
        lnglats = null;

        let tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data,
            type: type
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。

          geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
        });
        tamarker.setStyle(
          new Style({
            image: new Icon({
              color: "#eee",
              rotation: rotation,
              anchor: [0.5, 0.5],
              rotateWithView: true,
              // color:"red",
              // size:[60,20],
              crossOrigin: "anonymous",
              src: require("../../assets/images/icon/" + img) //本地的样式
            })
          })
        ); //这里是样式
        tt.push(tamarker);


      }

      var markerta = new LayerVec({
        source: new SourceVec({
          features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }),
        zIndex: zindex
      });

      var last1 = this.posints[name + 1];
      if (last1 != undefined && last1 != null) {
        last1.setSource(new SourceVec({
          features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }));
      } else {
        // if (data["mmsi"] != undefined) {
        this.posints[name + 1] = markerta;
        // }
        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: 120rem;
  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 {
  text-align: center;
}

.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;
}

.layer_div {
  position: absolute;
  top: 55rem;
  right: 160rem;
  padding-top: 4rem;
  padding-left: 5rem;
  padding-right: 4rem;
  background-color: white;
  padding-bottom: 5rem;
}

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

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