qdtlui/src/components/map/index.vue

<template>
<div style="width:100%;height:100%">
  <div style="width:100%;height:100%">
    <div id="map" ref="rootmap"><div id="popup"></div></div>
     <!-- <div id="textInfo" style="display:none">我是text文本信息</div> -->
  </div>

  <div class="iconSelect" v-if="iconSelect == 1">
      <el-checkbox-group  v-model="checkList" @change="handleChange" >
          <el-checkbox v-for="item in dict.type.tl_static_type" :label="item.value"  :key="item.value" style="margin-top:1rem">
                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
                 <img class="tipicon"  :src="imageMap[item.value]" />
                <span style="color:white">{{item.label}}</span>
           </el-checkbox>
      </el-checkbox-group>
  </div>

    <div class="iconSelect" v-if="iconSelect == 2">
      <el-checkbox-group  v-model="checkList" @change="handleChange" >
          <el-checkbox v-for="item in dict.type.tl_dt_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
                 <img class="tipicon"  :src="imageMap[item.raw.cssClass]" />
                <span style="color:white">{{item.label}}</span>
           </el-checkbox>
      </el-checkbox-group>
   </div>

  <div class="iconSelect" v-if="iconSelect == 3">
      <el-checkbox-group  v-model="checkList" @change="handleChange" >
          <el-checkbox v-for="item in dict.type.tl_area_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
                 <img class="tipicon"  :src="imageMap[item.raw.cssClass]" />
                <span style="color:white">{{item.label}}</span>
           </el-checkbox>
      </el-checkbox-group>
   </div>


    <div class='locationDiv' :style="locationStyle" v-show='isShow'>
          <div style="background:blue;height:4rem;width:100%;padding-top:0.8rem;padding-left:0.5rem">
               <span style='color:white;font-size:1.5rem;'>巡检点</span>
          </div>
          <div style="text-align:center;margin-top:0.5rem">
              <img :src='clickObj.imgsrc' style="width:20rem;height:20rem"/>
              <div>{{clickObj.name}}</div>
          </div>
    </div>


      <el-dialog
          title="视频播放"
          :visible.sync="dialogVisible"
          v-if="dialogVisible"
          width="50%"
          :before-close="handleClose"
          >
            <div style="width:100%;height:60rem;position:relative">
              <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv>
            </div>

              <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">关闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>

     <el-dialog
          title="视频播放ckplayer"
          :visible.sync="dialogVisibleCk"
          v-if="dialogVisibleCk"
          width="50%"
          :before-close="handleCloseCk"
          >
            <div style="width:100%;height:60rem;position:relative">
               <div class="video" id="video" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
              <!-- <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv> -->
            </div>

              <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseCk()">关闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
</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 ol from "ol";

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";
// ol.source.TileImage
// ol.layer.Tile
import {get as getProjection, transform} from "ol/proj";
import {TileGrid} from "ol/tilegrid/TileGrid";
import {TileImage} from "ol/source/TileImage";
import {XYZ, Vector as SourceVec} from "ol/source";
import {Tile,Vector as LayerVec} from "ol/layer";
import { Polygon } from "ol/geom"
import Overlay from 'ol/Overlay';

import {Circle as CircleStyle, Fill, Stroke, Style, Icon, Text } from 'ol/style';
import {Draw, Modify, Snap} from 'ol/interaction';
// import {OSM, Vector as SourceVec} from 'ol/source';
// import {Tile as TileLayer, Vector as LayerVec} from 'ol/layer';
import {get,fromLonLat } from 'ol/proj';
import { Feature } from "ol";



// import {Vector as SourceVec} from "ol/source";
// import {Feature} from "ol";
import videodiv from "@/components/Videoplayer/index.vue"
import { getResource } from "@/api/qdtl/data";
import {LineString, Point} from "ol/geom";
import { scale } from 'ol/coordinate';
import { getLineData,getVideoHttp } from "@/api/qdtl/data";
import {toStringHDMS} from 'ol/coordinate';
// import {Icon, Stroke, Style} from "ol/style";
// import {Vector as LayerVec} from "ol/layer";


export default {
  props: {
      pointObj:{type:Object},
      isEdit:false,
      isLine:false,
      // lineLocations:{type:Array,default:[]},
  },
  dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
  data() {
    return {
      locationStyle:'left:85.5rem;top:71.1rem',
      clickObj:{},
      iconSelectArea:true,
      isShow:false,
      iconSelect:0,
      checkList:[],
      map: null,
      typeSelect:'Point',
      source:null,
      draw:null,
      snap:null,
      locations:[],
      vector:null,
      pointArry:{},
      mapHashMap:{},
      deviceList:[],
      Base64:require('js-base64').Base64,
      areaList:[],
      dialogVisible:false,
      ccode:'',
      dialogVisibleCk:false,
      imgBg:require('../../assets/images/imgBg.jpg'),
      imgSrc:'require(../../assets/images/icons/',
      imgtype:'.png)',
      imageMap:{
            video:require('../../assets/images/icons/video.png'),
            location:require('../../assets/images/icons/location.png'),
            stop:require('../../assets/images/icons/stop.png'),
            work:require('../../assets/images/icons/work.png'),
            area:require('../../assets/images/icons/area.png'),
            bridge:require('../../assets/images/icons/bridge.png'),
            train:require('../../assets/images/icons/train.png'),
            rail:require('../../assets/images/icons/rail.png'),
            yjdw:require('../../assets/images/icons/yjdw.png'),
            device:require('../../assets/images/icons/device.png'),
            police:require('../../assets/images/icons/police.png'),
            wrj:require('../../assets/images/icons/wrj.png'),
            yxjl:require('../../assets/images/icons/yxjl.png'),
      },
      popup:null,
      element:null
    };
  },
   components:{
      videodiv
    },
   watch:{
      iconSelect(val, oldVal){//普通的watch监听
          this.checkList = [];
          for(var key in this.mapHashMap){
                 this.mapHashMap[key].setVisible(false)
            }
            for(var index in this.deviceList){
                 this.deviceList[index].setVisible(false)
            }
            for(var index in this.areaList){
                 this.areaList[index].setVisible(false)
            }
      },
    },
  mounted() {
    this.initdev();
    this.initPoint();
    // this.getTrain(),
    this.getLineList();
    this.addQdStation();
    window.videosize = "1x1";
    // this.addpoint(point);
    var that = this
    if(this.isLine){
            this.getResource();
    }
    this.map.on("click", function (e) {
      // console.log(event.screenX+','+event.screenY)
          //  that.addMarker(e.coordinate,'专家站点.png',0.2);
            var pixel = that.map.getEventPixel(e.originalEvent);
            var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                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 == 'location'){

                                var event = window.event;
                                var x = event.screenX/10+5;
                                var y = event.screenY/10-20;
                                console.log(x+','+y);
                                that.locationStyle='top:'+y+'rem;left:'+x+'rem'
                                console.log(that.locationStyle);
                                that.clickObj = tadata.data
                                // console.log(tadata.pic);
                                that.clickObj.imgsrc = 'http://58.221.168.61:9000/api'+tadata.data.pic
                                that.isShow = true
                         }
                         if(tadata.type == 'video'){
                               that.ccode = tadata.data.cameraIndexCode
                                window.cameraid = that.ccode;
                                that.dialogVisible = true
                                setTimeout(() => {
                                  that.handleOpen()
                                }, 1000);
                         }
                          if(tadata.type == 'wrj'){
                              //  that.ccode = tadata.data.cameraIndexCode
                                // window.cameraid = that.ccode;
                                // console.log(tadata.data);
                                that.dialogVisibleCk = true
                                setTimeout(() => {
                                  that.loadCkplayer(tadata.data.video)
                                }, 1000);
                         }
                         if(that.isLine){
                           if(tadata.type == 'selected'){
                                  var style =  new Style({
                                    image: new Icon({
                                        color: "#eee",
                                        crossOrigin: "anonymous",
                                        src: require("../../assets/images/icons/location.png"), //本地的样式
                                        scale:0.6

                                })
                              })
                              tadata.type = 'location'
                              feature.setStyle(style);
                              that.locationDelete(tadata.data);
                           }else{
                              var style =  new Style({
                                    image: new Icon({
                                        color: "#eee",
                                        crossOrigin: "anonymous",
                                        src: require("../../assets/images/icons/location2.png"), //本地的样式
                                        scale:0.6

                                })
                              })
                              tadata.data.sortNo = that.lineLocations.length + 1
                              tadata.data.locationId =  tadata.data.id
                              that.lineLocations.push(tadata.data);
                              tadata.type = 'selected'
                              feature.setStyle(style);
                           }
                         }
                    }
                    //含有lnglat 参数的点标记触发事件
                }
            }
    });


    var view = this.map.getView();

    view.on('change:resolution', function (e) {

    });
    view.on('change:center', function (e) {

    });
    this.map.on('moveend', function (e) {
    });

    // this.map.on('pointermove', function (evt) {
    //       if (evt.dragging) {
    //         return;
    //       }
    //       const pixel = that.map.getEventPixel(evt.originalEvent);
    //       var feature = that.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
    //             return feature;
    //           });
    //        if (feature) { //这里说明我们点击的是点标记，
    //             let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
    //             if (tadata) {
    //                 if (tadata.sectionId == "line") {
    //                     // alert("我是线：" + tadata.towerNumber)
    //                 }
    //                 if (tadata.sectionId == "point") {
    //                     //  that.addText(evt.coordinate);
    //                   // console.log(tadata);
    //                    $(that.element).popover('dispose');
    //                        that.popup.setPosition(evt.coordinate);
    //                        if(tadata.data.pic){
    //                             //  var src = 'http://58.221.168.61:9000/api/common/download/resource?resource=/profile/bx/1.jpg'
    //                              var src = 'http://58.221.168.61:9000/api'+tadata.data.pic
    //                              $(that.element).popover({
    //                                 placement: 'top',
    //                                 html: true,
    //                                 content: '<div><div class="imgClass" style="width:10rem;height:10rem"><img  style="width:10rem;height:10rem" src="'+src+'" class="imgClass"/></div><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
    //                               });

    //                        }else{
    //                              $(that.element).popover({
    //                                 placement: 'top',
    //                                 html: true,
    //                                 content: '<div><img src="'+that.imgBg+'" style="width:5rem;height:5rem"/><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
    //                               });
    //                        }
    //                              $(that.element).popover('show');
    //                     // } else {
    //                     //   $(element).popover('dispose');
    //                     // }
    //                                       // popup = new OpenLayers.Popup.FramedCloud("Popup",
    //                 //     new OpenLayers.LonLat(5.6, 50.6),
    //                 //     null,
    //                 //     '<div>Hello World! Put your html here</div>',
    //                 //     null,
    //                 //     false);
    //                 // this.map.addPopup(popup);
    //                 }else{
    //                   //  console.log(1111111);
    //                    $(that.element).popover('dispose');
    //                 }
    //                 //含有lnglat 参数的点标记触发事件
    //             }
    //         }

    // })
  },
  methods: {
     addQdStation(){
            var station = [121.67994923828125,31.85240474572754]
            this.addMarkerQd(station,'station.png',0.6,'marker');
            var nqLine = [121.57008595703125,31.875750692993165]
            this.addMarker(nqLine,'宁启铁路二期.png',1,'marker');
            var ylLine = [121.54948659179688,32.08243099084473]
            this.addMarker(ylLine,'洋吕铁路在建.png',1,'marker');
     },
     locationDelete(data){
        for(var index in this.lineLocations){
             if(this.lineLocations[index].locationId == data.locationId){
                     this.lineLocations.splice(index,1);
             }else if(this.lineLocations[index].sortNo > data.sortNo){
                    this.lineLocations[index].sortNo = this.lineLocations[index].sortNo-1
             }
        }
     },
      loadCkplayer(url){
        url = 'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
        console.log(url);
        url = this.Base64.encode(url);
        console.log(url);
        getVideoHttp(url).then(data=>{
            console.log(process.env.NODE_ENV)

            if(process.env.NODE_ENV === "production"){

              data.data = (data.data+"").replaceAll("http://58.221.168.61:9000/",process.env.VUE_APP_BASE_API)
            }
             console.log(data.data)
            var videoObject = {
              container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
              variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
              autoplay:true,
              live:true,
              overspread:true,//是否让视频铺满播放器
              html5m3u8:true,//m3u8-hls形式播放视频
              // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
              video:data.data//视频地址
              // video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls.m3u8'
            };
            console.log(videoObject);
            window.player = new ckplayer(videoObject);
        })
    },
     getResource(){
               getResource({date:'2022-03-12'}).then(response =>{
                    var selectLocation = [];
                    var stationLocation = [];
                    if(this.lineLocations != null){
                                for(var index in this.lineLocations){
                                    var obj = this.lineLocations[index]
                                    obj.fence = obj.lnglat
                                    obj.name = obj.locationName
                                    selectLocation.push(obj)
                              }
                    }
                     for(var i in response.data.staticLocation){
                          var obj = response.data.staticLocation[i]
                          obj.fence = obj.lnglat
                          obj.name = obj.locationName
                          obj.locationId = obj.id
                          var isSelected = 0;
                          for(var j in selectLocation){
                                  if(obj.id == selectLocation[j].locationId){
                                           isSelected = 1
                                  }
                          }
                          if(isSelected == 0){
                                 stationLocation.push(obj)
                          }
                     }
                    this.addPoints(stationLocation,'location.png',0.6,'location');
                    this.addPoints(selectLocation,'location2.png',0.6,'selected');
               })
         },
      //  addText(location) {
      //       var textInfo = new Overlay({
      //           position: fromLonLat(location),
      //           offset: [20, -20],
      //           element: document.getElementById("textInfo")
      //       });
      //       this.map.addOverlay(textInfo);
      //   },
         getTrain(){
           var trainArry = [[121.645366,31.856052],[121.636002,32.02354],[121.530258,32.086391]];
           for(var index in trainArry){
                  this.addMarker(trainArry[index],'train.png',0.6,'marker');
           }
         },
         getLineList(){
           getLineData().then(data =>{
                    for(var index in data.data){
                         var obj = data.data[index]
                         if(obj.configKey.indexOf('lined') > -1){
                                var lineLocations ="["+obj.configValue+"]"
                                var json = JSON.parse(lineLocations);
                                this.addline(json,'nqtl');
                         }else if(obj.configKey.indexOf('lineun') > -1){
                                var lineLocations ="["+obj.configValue+"]"
                                var json = JSON.parse(lineLocations);
                                this.addline(json,'nqtl2');
                         }

                    }
              })
         },
    transpoints: function (points, type) {
      if (type == 0) {
        return points;
      } else {
        if (type == 1) {
          var pp = [];
          points.forEach(point => {
            pp.push(transform([parseFloat(point[0]),parseFloat(point[1])], "EPSG:3857", "EPSG:4326"));
          });
          return pp;
        } else {
          var pp = [];
          points.forEach(point => {
            pp.push(transform([parseFloat(point[0]),parseFloat(point[1])], "EPSG:4326", "EPSG:3857"));
          });
          return pp;
        }
      }
    },
    initdev: function () {
      function getWMTSLayer(url, layer) {
        let key = "98ec3e37b32974c2d58ea1a790640fe7"
        let projection = getProjection("EPSG:4326");
        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 Tile({
          source: new WMTS({
            url: url,
            layer: layer,
            style: "default",
            matrixSet: "c",
            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:4326");
        const satellite = new Tile({ // 卫星地图
          visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
          source: new XYZ({
            attributions: '',
            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
          })
        })
        const street = new Tile({ // 街道地图
          visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
          source: new XYZ({
            attributions: '',
            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
          })
        })

      this.source = new SourceVec();
      const vector = new LayerVec({
        source: this.source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33',
            }),
          }),
        }),
      });
        this.vector = vector;

  // 创建地图
  const map = new Map({
    target: 'map',
    layers: [ // 图层放置（类似有卫星图层，街道图层等）
      // satellite,



      getWMTSLayer(`${process.env.VUE_APP_MAP_URL}img_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7`, 'img'),
       getWMTSLayer(`${process.env.VUE_APP_MAP_URL}cia_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7`, 'cia'),
      //  getWMTSLayer('https://gisserver.tianditu.gov.cn/TDTService/wfs?tk=98ec3e37b32974c2d58ea1a790640fe7', 'LRDL'),
      // satellite,street,
      //


      vector
    ],
    view: new View({
      zoom: 12, // 当前缩放
      // maxZoom: 16, // 最大缩放
      // minZoom: 8, // 最小缩放
      // projection: projection,
            projection: 'EPSG:4326',

      // center:  this.transpoints([
      //   [121.65523,31.892831]
      // ], 0)[0], // 中心坐标
      center:[121.65523,31.892831]
    })
  })

  street.setVisible(false)
  satellite.setVisible(true)

    const modify = new Modify({source: this.source});
      map.addInteraction(modify);
      this.map = map;
      if(this.isEdit){
           this.addInteractions();
      }
      var that = this;
       this.element = document.getElementById('popup');
        this.popup = new Overlay({
          element: this.element,
          positioning: 'bottom-center',
          stopEvent: false,
        });
        this.map.addOverlay(this.popup);
    },
    addInteractions() {
      var that = this
         let draw = new Draw({
          source: this.source,
          type: this.typeSelect,
        });
        draw.on('drawend',that.getLocation,this);
        draw.on('drawstar',that.removeDraw,this);
        //  draw.on('drawstart',that.removeDraw,this);
        this.draw = draw;
        this.map.addInteraction(draw);
        let snap = new Snap({source: this.source});
        this.snap = snap;
        this.map.addInteraction(snap);
      },
      getLocation(evt){
          var feature = evt.feature;
          var geo = feature.getGeometry();
          var cor = geo.getCoordinates();
          this.locations = cor;
      },
      changeAddInteractions(evt) {
         this.map.removeInteraction(this.draw);
         this.map.removeInteraction(this.snap);
         this.addInteractions();
      },
      removeDraw(evt){
          if(this.locations.length > 0){
              this.vector.getSource().clear()
          }
      },
      removeLayer(id){
         var layers = this.pointArry[id];
         this.map.removeLayer(layers);

      },
       addMarker(lnglats,icon,size) {
            let tamarker = new Feature({
                tadata: {
                    sectionId: "point",
                    towerNumber: 22,
                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
            });
            tamarker.setStyle(
                new Style({
                    image: new Icon({
                        color: "#eee",
                        crossOrigin: "anonymous",
                        src: require("../../assets/images/icons/" + icon), //本地的样式
                        scale:size
                    }),
                },
                )
            ); //这里是样式
            var markerta = new LayerVec({
                source: new SourceVec({
                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                }),
                zIndex:30
            });
            // this.pointArry[id]=markerta;
            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      },
      addMarkerQd(lnglats,icon,size,id,data,type) {
            let tamarker = new Feature({
                tadata: {
                    sectionId: "point",
                    towerNumber: 22,
                    data: data ,
                    type: type
                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
            });
            tamarker.setStyle(
                new Style({
                    image: new Icon({
                        color: "#eee",
                        crossOrigin: "anonymous",
                        src: require("../../assets/images/icons/" + icon), //本地的样式
                        scale:size
                    }),
                      text: new Text({
                        text: '启东站',
                        font: '16px sans-serif',
                        textAlign: "center",
                        textBaseline: "middle",
                        //font: 'verdana',
                        fill: new Fill({
                          color: "blue"
                        }),
                        backgroundFill: new Fill({
                          color: "rgba(220,38,38,0.2)"
                        }),
                         stroke: new Stroke({
                          color: "#ffffff"
                          // width: 3
                        }),
                        // font: "10px sans-serif",
                        // offsetX: parseInt(0, 10),
                        offsetY: 25,
                        placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
                        overflow: false //超出面的部分不显示
                    })
                },
                )
            ); //这里是样式
            var markerta = new LayerVec({
                source: new SourceVec({
                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                }),
                zIndex:30
            });
            this.pointArry[id]=markerta;
            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      },
       addMarkerVideo(lnglats,icon,size,id,data,type) {
            let tamarker = new Feature({
                tadata: {
                    sectionId: "point",
                    towerNumber: 22,
                    data: data ,
                    type: type
                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
            });
            tamarker.setStyle(
                new Style({
                    image: new Icon({
                        color: "#eee",
                        crossOrigin: "anonymous",
                        src: require("../../assets/images/icons/" + icon), //本地的样式
                        scale:size
                    }),
                },
                )
            ); //这里是样式
            var markerta = new LayerVec({
                source: new SourceVec({
                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                }),
                zIndex:30
            });
            this.pointArry[id]=markerta;
            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      },
       addText(lnglats,text,color,background) {
            let tamarker = new Feature({
                tadata: {
                    sectionId: "point",
                    towerNumber: 22,
                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
            });
            tamarker.setStyle(
                new Style({
                      text: new Text({
                        text: text,
                        font: '16px sans-serif',
                        textAlign: "center",
                        textBaseline: "middle",
                        //font: 'verdana',
                        fill: new Fill({
                          color: color
                        }),
                        backgroundFill: new Fill({
                          color: background
                        }),
                         stroke: new Stroke({
                          color: "#ffffff"
                          // width: 3
                        }),
                        // font: "10px sans-serif",
                        // offsetX: parseInt(0, 10),
                        offsetY: 25,
                        placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
                        overflow: false //超出面的部分不显示
                    })
                },
                )
            ); //这里是样式
            var markerta = new LayerVec({
                source: new SourceVec({
                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                }),
                zIndex:30
            });
            // this.pointArry[id]=markerta;
            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      },
      addPoints(data,icon,size,type){


        var tamarkerArry =[]
        let tamarker = null
        for(var index in data){
          if(type === 'video'){

                 tamarker = new Feature({
                    tadata: {
                        sectionId: "point",
                        towerNumber: 22,
                        data: data[index],
                        type:type
                    }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                    geometry: new Point([data[index].longitude, data[index].latitude]) //这里是点坐标的位置，这里要注意fromLonLat
                });

          }else {
                 tamarker = new Feature({
                    tadata: {
                        sectionId: "point",
                        towerNumber: 22,
                        data:data[index],
                        type:type
                    }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                    geometry: new Point(data[index].fence.split(',')) //这里是点坐标的位置，这里要注意fromLonLat
                });
          }
            tamarker.setStyle(
                new Style({
                    image: new Icon({
                        color: "#eee",
                        crossOrigin: "anonymous",
                        src: require("../../assets/images/icons/" + icon), //本地的样式
                        scale:size,
                        anchor: [0.5, 60],              //锚点
                        anchorOrigin:'top-right',       //锚点源
                        anchorXUnits: 'fraction',       //锚点X值单位
                        anchorYUnits: 'pixels',         //锚点Y值单位
                        offsetOrigin: 'top-right',      //偏移原点
                    }),
                },)
            ); //这里是样式
            tamarkerArry.push(tamarker);
        }

            var markerta = new LayerVec({
                source: new SourceVec({
                    features: tamarkerArry //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                }),
                zIndex:300
            });
//             markerta.on('mouseover', markerta, function(evt) {
//                     console.log(evt);
//                     popup = new OpenLayers.Popup.FramedCloud("Popup",
//                         new OpenLayers.LonLat(5.6, 50.6),
//                         null,
//                         '<div>Hello World! Put your html here</div>',
//                         null,
//                         false);
//                     this.map.addPopup(popup);
//                 });
// //here add mouseout event
//            markerta.on('mouseout', markerta, function(evt) {popup.hide();});
            // this.pointArry.set(id,markerta);
            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
            markerta.setVisible(false);
            if(type == 'device'){
                 this.deviceList.push(markerta);
            }else{
                 this.mapHashMap[type]=markerta;
            }
            if(this.isLine){
                  markerta.setVisible(true);
            }
            // markerta.setVisible(true)

      },
      addline: function(lnglats,type) {
            let line = new Feature({
                tadata: {
                    sectionId: "line",
                    towerNumber: 22
                },
                geometry: new LineString(lnglats)
            }); //这里要注意写fromLonLat，很重要

            var style =this.getStyle(type);

            line.setStyle(style);

            var linevectorLayer = new LayerVec({
                source: new SourceVec({
                    features: [line] //要绘制多段线，直接push到这里面就行了
                })
            });
              if(type == 'device'){
                 this.deviceList.push(linevectorLayer);
                 linevectorLayer.setVisible(false)
            }
            // else{
            //    this.mapHashMap[type]=linevectorLayer;
            //    linevectorLayer.setVisible(false)
            // }
            this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
        },
         addPolygon(item) {
          var polygon = new Feature({
            geometry: new Polygon(item),
            type: "polygon",
          });
          let style = [
            new Style({
              fill: new Fill({
                color: "rgba(5,96,187,0.2)",
              }),
              // 描边
               stroke: new Stroke({
                  color:"#0560BB",
                  width:3,
                  lineDash:[10,20],
                  lineCap:"butt"
               }),
              zIndex: 10,
            }),
          ];
          polygon.setStyle(style);
           var polygonLayer = new LayerVec({
                source: new SourceVec({
                    features: [polygon]
                })
            });
          this.map.addLayer(polygonLayer);
          this.areaList.push(polygonLayer);
          polygonLayer.setVisible(false)
        },
        initPoint(){
              var pointObj = this.pointObj;
              if(pointObj){
                  if(pointObj.type == 2){
                    this.addMarker(pointObj.locations.split(','),'左侧-车站-高亮.png',0.2,'marker');
                  }
                  if(pointObj.type == 5){
                    this.addMarker(pointObj.locations.split(','),'专家站点.png',0.2,'marker');
                  }


              }
        },
        handleClose(){
            closevideo();
            this.dialogVisible = false
        },
        handleCloseCk(){
             this.dialogVisibleCk = false
        },
        handleOpen(){
          window.cameraid = this.ccode;
          startPreview(window.cameraid,-1);
        },
        handleChange(value){
            for(var key in this.mapHashMap){
                 this.mapHashMap[key].setVisible(false)
            }
            for(var index in this.deviceList){
                 this.deviceList[index].setVisible(false)
            }
            for(var index in this.areaList){
                 this.areaList[index].setVisible(false)
            }
            console.log(this.deviceList);
            for(var index in value){
              if(value[index] == 'device'){
                    for(var index in this.deviceList){
                         this.deviceList[index].setVisible(true)
                    }
              }else  if(value[index] == 'area'){
                    for(var index in this.areaList){
                         this.areaList[index].setVisible(true)
                    }
              }else{
                var mapkey = value[index]
                if(this.mapHashMap[mapkey]){
                    this.mapHashMap[mapkey].setVisible(true)
                }
              }
            }
        },
        getStyle(type){
          var style =  new Style({
                stroke: new Stroke({
                    width: 3,
                    color: "#008000"
                })
            })
          if(type == 'nqtl'){
              style =[
                          new Style({
                              stroke: new Stroke({
                                  color:"#000000",
                                  width:4,
                                  lineCap:"butt"
                              }),
                              zIndex:20
                          }),
                          new Style({
                              stroke: new Stroke({
                                  color:"#ffffff",
                                  width:4,
                                  lineDash:[10,10],
                                  lineCap:"butt"
                              }),
                              zIndex:21
                          })
                      ]
          }else if(type == 'nqtl2'){
               style =[
                    new Style({
                              stroke: new Stroke({
                                  color:"#535353",
                                  width:4,
                                  lineCap:"butt"
                              }),
                              zIndex:20
                          }),
                          new Style({
                              stroke: new Stroke({
                                  color:"#ffffff",
                                  width:4,
                                  lineDash:[10,10],
                                  lineCap:"butt"
                              }),
                              zIndex:21
                          })
                    ]
          }else if(type == 'device'){
               style =new Style({
                          stroke: new Stroke({
                              color:"#07DBFF",
                              width:6,
                              lineDash:[15,45],
                              lineCap:"butt"
                          }),
                          zIndex:20
                      })
          }
             return style;
        }
  }
};
</script>

<style scoped>
#map {
  height: 100%;
}

.iconSelect{
    position: absolute;
    top: 10rem;
    right: 5rem;
    width: 16rem;
    min-height: 30rem;
    background-color: transparent ;
    padding-left:1rem
}

.tipicon{
    width:3rem;
    height:3rem;
    vertical-align: middle;
}

img{
   width:10rem;
   height:10rem
}

.popover-body{
    width:100px;
    height:100px;
}

.imgClass{
    width:10rem;
    height:10rem
}

.locationDiv{
    position: absolute;
    /* top: 50rem;
    right: 5rem; */
    width: 24rem;
    min-height: 24rem;
    background-color: transparent ;
    background:white
}
</style>