map.vue

<template>
  <div style="width:100%">
    <div id="map" class="maps"></div>
    <div id="popup" class="ol-popup img-popup">
      <a
        href="#"
        id="popup-closer"
        class="ol-popup-closer"
        @click="closepopup"
      ></a>
      <div class="" id="t-popup-content"></div>
    </div>
    <div id="videopopup" class="ol-popup">
      <a
        href="#"
        id="popup-closer"
        class="ol-popup-closer"
        @click="closevideopopup"
      ></a>
      <div class="mapvideo">
        <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay>
      </div>
    </div>
    <div id="taskinfopopup" class="ol-popup info-popup">
      <div>
        <!-- <span>{{ infoData.vchan_name }}</span> -->
        <span>鼠标点击显示视频</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import videoPlay from "../public/videoPlay";
import { inherits } from "ol/util.js";
import Map from "ol/Map";
import View from "ol/View";
import Feature from "ol/Feature"; //元素
import Overlay from "ol/Overlay"; //弹出框
import { toStringHDMS } from "ol/coordinate";
import { fromLonLat, toLonLat } from "ol/proj";
import { defaults as defaultControls, Control } from "ol/control.js";
import {
  Tile as TileLayer,
  Vector as VectorLayer,
  VectorTile,
  Heatmap as HeatmapLayer
} from "ol/layer"; //瓦片图层 , 矢量图层等基础图层
import { Cluster, OSM, Vector as VectorSource, XYZ, TileJSON } from "ol/source";
import KML from "ol/format/KML.js";
import {
  defaults,
  Select,
  DragBox,
  Pointer,
  DragAndDrop,
  Draw,
  defaults as defaultInteractions,
  Pointer as PointerInteraction
} from "ol/interaction"; //交互，选择，画框等
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon
} from "ol/style"; //添加图层，点，圆等的样式调节
import { Point, Geometry, LineString } from "ol/geom";
import GeoJSON from "ol/format/GeoJSON.js";
import "ol/ol.css"; //地图默认样式
var map = "";
var Views = "";
var container = "";
var videocontainer = "";
var taskInfocontaniner = "";
var content = "";
var voideocontent = "";
var closer = "";
var taskcloser = "";
var overlay = "";
var infooverlay = "";
var mapcenter =  [120.324447, 36.074594];
var RotateNorthControl = (function(Control) {
  function RotateNorthControl(opt_options) {
    var options = opt_options || {};

    var button = document.createElement("button");
    button.className = "el-icon-aim";

    var element = document.createElement("div");
    element.className = "rotate-north ol-unselectable ol-control";
    element.appendChild(button);

    Control.call(this, {
      element: element,
      target: options.target
    });

    button.addEventListener("click", this.handleRotateNorth.bind(this), false);
  }

  if (Control) RotateNorthControl.__proto__ = Control;
  RotateNorthControl.prototype = Object.create(Control && Control.prototype);
  RotateNorthControl.prototype.constructor = RotateNorthControl;

  RotateNorthControl.prototype.handleRotateNorth = function handleRotateNorth() {
    Views.animate({
      center: mapcenter,
      duration: 400,
      zoom: 14
    });
  };

  return RotateNorthControl;
})(Control);
export default {
  data() {
    return {
      devList: [],
      playurl: {},
      infoData: {}
    };
  },
  components: {
    videoPlay
  },
  methods: {
    InitMap() {
      let _this = this;
      //坐标
      //
      var heatData = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [116.357068, 39.954021, 0]
            },
            properties: {
              name: "M 5 - 2012 Dec 25, PAKISTAN"
            }
          }
        ]
      };

      for (var i = 0; i < 300; i++) {
        let c = Math.random(1) * 1000;
        let e = Math.random(1) * 100;
        let b = (116.357068 * 1000000 + i * c) / 1000000;
        let d = (39.954021 * 1000000 + i * e) / 1000000;
        let a = {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [b, d, 0]
          },
          properties: {
            name: "M 5 - 2012 Dec 25, PAKISTAN" + i
          }
        };
        heatData.features.push(a);
      }
      var vectorSources = new VectorSource({
        features: new GeoJSON().readFeatures(heatData, {
          dataProjection: "EPSG:4326"
        })
      });
      var path =
        "http://192.168.9.62:20080/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png";
      var offlineMapLayer = new TileLayer({
        source: new XYZ({
          // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
          url: path
        })
      });

      Views = new View({
        projection: "EPSG:4326",
        zoom: 2, // 并且定义地图显示层级为2
        minZoom: 13,
        maxZoom: 18,
        center: mapcenter
      });
      map = new Map({
        controls: defaultControls().extend([new RotateNorthControl()]),
        // 设置地图图层
        layers: [
          // 创建一个使用Open Street Map地图源的瓦片图层
          offlineMapLayer
        ],
        loadTilesWhileAnimating: true,

        // 设置显示地图的视图
        view: Views,
        // 让id为map的div作为地图的容器
        target: "map"
      });
      var heatmapvector = new HeatmapLayer({
        source: vectorSources,
        blur: parseInt(20, 6),
        radius: parseInt(3, 5)
      });

      map.addLayer(heatmapvector);

      // 添加一个使用离线瓦片地图的层
      this.devList.map(ele => {
        console.log(ele.longitude);
        var CameraVertorlayer = new VectorLayer({
          source: _this.addCameraLayer(
            [Number(ele.longitude), Number(ele.latitude)],
            ele
          )
        });
        map.addLayer(CameraVertorlayer);
      });

      let that = this;

      map.on("click", e => {
        var pixel = map.getEventPixel(e.originalEvent);
        //点击相机标注点
        map.forEachFeatureAtPixel(pixel, function(feature) {
          // var coodinate = e.coordinate;
          // _this.unid = feature.getProperties().unid;
          // Overlay.setPosition(coodinate);
          // map.addOverlay(Overlay);
          //播放视频操作
          let data = feature.getProperties().cameraInfo;
          that.playvideo(data);
          console.log("视频播放地址", data);
        });
      });
      //鼠标移入标注点
      map.on("pointermove", e => {
        if (map.hasFeatureAtPixel(e.pixel)) {
          var pixel = map.getEventPixel(e.originalEvent);
          map.forEachFeatureAtPixel(pixel, function(feature) {
            let data = feature.getProperties().cameraInfo;
            that.infoData = data;
            that.showTaskInfo(data);
          });
        } else {
          this.closetaskpopup();
        }
      });
    },
    movemap(data, point, type) {
      let pos = point ? point : [120.324447, 36.074594];
      Views.animate({
        center: pos,
        duration: 400,
        zoom: 14
      });
      if (type && type == 2) {
        this.addLayer(data, pos);
      }
    },
    closepopup() {
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    },
    closevideopopup() {
      this.closetaskpopup();
      let video_ocx = document.getElementById("VionVideo");
      let stopRes = video_ocx.StopPlaySip(0);
      let stopRtspRes = video_ocx.StopPlay(0);
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    },
    closetaskpopup() {
      try {
        infooverlay.setPosition(undefined);
        if (taskcloser) {
          taskcloser.blur();
        }
        return false;
      } catch (error) {
        console.log(error);
      }
    },
    addLayer(pdata, pos) {
      document.getElementById("popup").style.display = "block";

      console.log(pdata);
      if (pdata.pics) {
        content.innerHTML =
          '<div class="content-box"><div class="img-box"><img src=' +
          pdata.pics +
          "></div></div>";
      } else {
        content.innerHTML =
          '<div class="content-box"><div class="img-box"><img src=""></div></div>';
      }
      overlay = new Overlay({
        element: container,
        autoPan: true,
        position: pos,
        offset: [0, -30],
        autoPanAnimation: {
          duration: 100
        }
      });
      map.addOverlay(overlay);
    },
    addCameraLayer(coordinate, data) {
      let vectorSource = new VectorSource({ id: 1 });
      let icon = new Feature({
        geometry: new Point(coordinate),
        unid: "1",
        cameraInfo: data
      });
      let color = "#156BB1"; //设置气泡颜色
      //添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
      // let svg = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585897688450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><defs><style type="text/css"></style></defs><path d="M512 320a192.096 192.096 0 0 1 0.256 384H512a192 192 0 1 1 0-384z" fill="#2b5ffa" p-id="2672"></path></svg>';
      // let cameraIcon = new Image();
      // cameraIcon.src = "data:image/svg+xml," + escape(svg);
      icon.setStyle(
        new Style({
          //设置样式和大小
          image: new Icon({
            // img: cameraIcon,
            // crossOrigin: "anonymous",
            // imgSize: [40, 40],
            marginTop: 10,
            anchor: [0.5, 36],
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            src: require("./dian.png")
          }),
          // text: new Text({
          //   text: data.vchan_name,
          //   textBaseline: "top",
          //   font: "normal 12px 微软雅黑",
          //   lineHeight: "0px",
          //   fill: new Fill({
          //     color: "red"
          //   })
          // }),
          stroke: new Stroke({
            color: "red",
            width: 21,
            marginTop: 10
          })
        })
      );
      vectorSource.addFeature(icon);
      return vectorSource;
    },
    showTaskInfo(data) {
      let pos = [data.longitude, data.latitude];
      document.getElementById("taskinfopopup").style.display = "block";
      infooverlay = new Overlay({
        element: taskInfocontaniner,
        autoPan: true,
        position: pos,
        offset: [-23, -20],
        autoPanAnimation: {
          duration: 150
        }
      });
      map.addOverlay(infooverlay);
    },
    playvideo(data) {
      let pos = [data.longitude, data.latitude];
      document.getElementById("videopopup").style.display = "block";
      overlay = new Overlay({
        element: videocontainer,
        autoPan: true,
        offset: [-2, -40],
        position: pos,
        autoPanAnimation: {
          duration: 50
        }
      });
      map.addOverlay(overlay);
      // if (data.vchan_name == "视频1") {
      //   obj.rtsp_url =
      //     "rtsp://192.168.9.133:8554//opt/data/vedio/1579253441478.264";
      // } else if (data.vchan_name == "视频2") {
      //   obj.rtsp_url =
      //     "rtsp://192.168.9.133:8554//opt/data/vedio/1577516797543.264";
      // }
      // this.playurl = obj;
      // // this.$store.commit('setocxstate', 1)
      // setTimeout(() => {
      //   this.$refs.mapvideo.videoPlay();
      // }, 100);
      console.log(data);
      let vrefid = data.vchan_refid ? data.vchan_refid : data.refid;
      // 获取视频流
      this.$api.device.getFxStream(this.dev_unid, vrefid).then(res => {
        if (res.task_list.length > 0) {
          var taskarr = res.task_list;
          let obj = {};
          for (let i = 0; i < taskarr.length; i++) {
            if (taskarr[i].rtsp_url != "") {
              obj.rtsp_url = res.task_list[i].rtsp_url;
              break;
            }
          }
          console.log('playurl', obj)
          this.playurl = obj;
          this.$refs.mapvideo.videoPlay();
        } else {
          this.$message({
            message: "该相机下没有分析任务",
            type: "error"
          });
        }
      });
    },
    getDevList() {
      this.$api.show.getDevList(this.dev_unid).then(res => {
        let devlist = [];
        this.$store.commit("setDevList", res.list_data);
        res.list_data.map(ele => {
          if (ele.vchan_type == "camera") {
            devlist.push(ele);
          }
        });
        this.devList = devlist;
        setTimeout(() => {
          this.InitMap();
        }, 200);
      });
    },
    searchvchan(vchanname) {
      this.devList.forEach(ele => {
        if (ele.vchan_name == vchanname) {
          let point = [ele.longitude, ele.latitude];
          this.movemap(point);
        }
      });
    }
  },
  computed: {
    ...mapState(["mapopen"])
  },
  watch: {
    mapopen() {
      setTimeout(() => {
        map.updateSize();
      }, 1000);
      // this.InitMap();
    }
  },
  mounted() {
    setTimeout(() => {
      this.getDevList();
    }, 1000);
    container = document.getElementById("popup");
    videocontainer = document.getElementById("videopopup");
    taskInfocontaniner = document.getElementById("taskinfopopup");
    content = document.getElementById("t-popup-content");
    voideocontent = document.getElementById("video-popup-content");
    closer = document.getElementById("popup-closer");
    taskcloser = document.getElementById("task-popup-closer");
  }
};
</script>

<style lang="stylus" scoped>
.maps{
  background:url("./map.png");
  width 100%

}
.ol-control button{
	  display:none!important;
	  background:red!important
	}
  .canvasDiv{
	  height :30px;
	  width :30px;
	  background :red;
	  border-radius :30px;
	  color: #ffffff;
	  font-size :12px;
	  text-align :center;
	  line-height :30px;
	  z-index :10;
	  opacity :0.5;
	}

  .ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    width: 20vw;
    height 25vh;
  }
  .img-popup {
    height auto
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    content: "✖";
  }
	.pop-img-box {
	  float: left;
	  height: 100px;
	  width :120px;
	  img {
	    height: 100%;
	    width: 100%;
	  }
	}
  .info-popup {
    width 125px;
    height 30px;
    line-height 30px;
    border-radius 5px
    padding 0 0 0 10px;
    color #fff;
    background #333;
  }
  .info-popup:after {
    disply block
    content ""
    position absolute
    bottom -15px
    left 75px
    border: 6px solid transparent;
    border-top-color: #333 ;
  }
	.pop-info{
	  float: left;
	  padding-left: 20px;
	  width :100px
	}
	.map-box {
	  position: relative;
	  background :#f8f8f8;
	  border-radius: 10px;
	  .content-info{
	    position :absolute;
	    z-index :1000;
	    color: red
	  }
	}
  .mapvideo{
    height 100%;
    width 100%;
  }
</style>