map.vue

<template>
  <div>
    <div id="map" class="maps"></div>
    <div id="popup" class="ol-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">
      <a
        href="#"
        id="task-popup-closer"
        class="ol-popup-closer"
        @click="closetaskpopup"
      ></a>
      <div>
        <span>{{ infoData.vchan_name }}</span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
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 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() {
    let pos = [120.324447, 36.074594];
    Views.animate({
      center: pos,
      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: [120.324447, 36.064594]
      });
      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 => {
        var pixel = map.getEventPixel(e.originalEvent);
        map.forEachFeatureAtPixel(pixel, function(feature) {
          let data = feature.getProperties().cameraInfo;
          that.infoData = data;
          that.showTaskInfo(data);
        });
      });
    },
    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() {
      infooverlay.setPosition(undefined);
      taskcloser.blur();
      return false;
    },
    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,
        autoPanAnimation: {
          duration: 500
        }
      });
      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 =
      //   '<svg t="1540524238971"  class="icon" style="text-align:center" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4126" xmlns:xlink="http://www.w3.org/1999/xlink"  xml:space="preserve"><defs><style type="text/css"></style></defs>' +
      //   '<path fill="' +
      //   color +
      //   '" d="M865.309 291.918c-19.289-45.606-46.897-86.557-82.06-121.719-35.161-35.162-76.114-62.771-121.718-82.06-47.23-19.976-97.385-30.105-149.072-30.105S410.618 68.163 363.388 88.139c-45.605 19.289-86.557 46.898-121.719 82.06-35.162 35.161-62.771 76.114-82.06 121.719-19.976 47.229-30.105 97.384-30.105 149.071 0 51.687 10.129 101.841 30.105 149.07 19.289 45.605 46.898 86.558 82.06 121.72 35.162 35.161 76.114 62.771 121.719 82.06 11.201 4.738 22.569 8.914 34.081 12.541l-58.051 143.991-17.783 0c-14.129 0-25.583 11.454-25.583 25.583s11.454 25.583 25.583 25.583l352.169 0c0.063 0 0.124 0.007 0.187 0.007 0.101 0 0.203-0.006 0.303-0.007l35.985 0c14.13 0 25.583-11.454 25.583-25.583s-11.453-25.583-25.583-25.583l-18.876 0-57.565-146.13c24.322-8.109 47.832-18.654 70.119-31.546 57.156-33.063 105.093-80.61 138.628-137.502 34.561-58.633 52.83-125.787 52.83-194.204C895.414 389.302 885.285 339.148 865.309 291.918zM513.814 146.1c26.472 0 48.01 21.537 48.01 48.01 0 26.472-21.537 48.01-48.01 48.01s-48.011-21.537-48.011-48.01C465.804 167.638 487.342 146.1 513.814 146.1zM512.54 688.835c-111.982 0-203.086-91.104-203.086-203.086 0-111.982 91.104-203.086 203.086-203.086 111.981 0 203.086 91.104 203.086 203.086C715.626 597.731 624.521 688.835 512.54 688.835z" p-id="4127"></path><path d="M512.54 333.829c-83.769 0-151.921 68.152-151.921 151.921 0 83.769 68.15 151.921 151.921 151.921 83.769 0 151.921-68.15 151.921-151.921C664.461 401.98 596.309 333.829 512.54 333.829z" p-id="4128"></path><path d="M513.814 197.265c1.739 0 3.154-1.415 3.154-3.155 0-1.74-1.415-3.155-3.154-3.155-1.74 0-3.155 1.415-3.155 3.155C510.659 195.85 512.074 197.265 513.814 197.265z" p-id="4129"></path><path d="M636.408 950.372 636.408 950.372 636.408 950.373Z" p-id="4130"></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: [38, 38],
            // marginTop: 100
            anchor: [0.5, 36],
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            src: require("./bioazhu.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: 100
          })
        })
      );
      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,
        autoPanAnimation: {
          duration: 50
        }
      });
      map.addOverlay(infooverlay);
    },
    playvideo(data) {
      let pos = [data.longitude, data.latitude];
      document.getElementById("videopopup").style.display = "block";
      overlay = new Overlay({
        element: videocontainer,
        autoPan: true,
        position: pos,
        autoPanAnimation: {
          duration: 50
        }
      });
      map.addOverlay(overlay);
      let obj = {};
      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);
      //获取视频流
      // this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
      // 	debugger
      // 	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;
      // 				}
      // 			}
      // 			this.playurl = obj
      // 			this.$refs.ocx.videoPlay()
      // 		} else {
      // 			  this.$message({
      //         message: '该相机下没有分析任务',
      //         type: 'error'
      //       });
      // 		}

      // })
    },
    getDevList() {
      this.$api.show.getDevList(this.dev_unid).then(res => {
        let devlist = [];
        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);
        }
      });
    }
  },
  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>
.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;
    overflow hidden
  }
  .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 10vw;
    height 100px;
  }
	.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>