index.vue

<template>
  <div class="map-box template-box">
    <div id="map" class="map">
      <!-- <div id="canvasDiv" @mouseover="removeclass($event)" class="canvasDiv">时代大厦</div> -->
      <div class="info-box">
        <div class="info-item">
          <div class="info-header">
            <span class="icon el-icon-s-data"></span>相机抓拍总数</div>
          <div class="info-content">90</div>
        </div>
        <div class="info-item">
          <div class="info-header">
            <span class="icon el-icon-s-custom"></span>人口库数量</div>
          <div class="info-content">10</div>
        </div>
        <div class="info-item">
          <div class="info-header">
            <span class="icon  el-icon-camera-solid"></span>总抓拍次数</div>
          <div class="info-content">909</div>
        </div>
        <div class="info-item">
          <div class="info-header">
            <span class="icon el-icon-user-solid"></span>核实人数</div>
          <div class="info-content ">230</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

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 {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 = '';
export default {
  data(){
    return{
        height: 400,
        width: 200,
        alarmcount:100000,
        facealarmcount:0,
        dayfacealarm:0,
        openstate:false,
        unid:'',
        listData:[1,2,3,4,5,5,6,7,7,9]
    }
  },
  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({
			// 设置地图图层
			layers: [
				// 创建一个使用Open Street Map地图源的瓦片图层
        offlineMapLayer,
      ],
        Interactions: [
            defaults,
            Select,
            DragBox
        ],
      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);

		// 添加一个使用离线瓦片地图的层
     var CameraVertorlayer = new VectorLayer({
        source: _this.addCameraLayer([120.324447,36.064594],"相机A")
    });

    map.addLayer(CameraVertorlayer);

    this.addLayer();

    map.on('click',(e)=>{
      var pixel = map.getEventPixel(e.originalEvent);
      console.log(pixel);
      //点击相机标注点
      map.forEachFeatureAtPixel(pixel,function(feature){
        var coodinate = e.coordinate;
        _this.unid = feature.getProperties().unid;
        overlay.setPosition(coodinate);
        map.addOverlay(overlay);
      });
    });
    popupCloser.addEventListener('click',function(){
          overlay.setPosition(undefined);
          return

      });

    },

    addLayer(data){
      var pos = data;
      var marker = new Overlay({
          position: pos,
          positioning:  'center-center',
          element: document.getElementById('canvasDiv')
      });
      map.addOverlay(marker);
    },
    addCameraLayer(coordinate,phonetext) {
        let vectorSource = new VectorSource({id:1});
        let icon = new Feature({
            geometry: new Point(coordinate),
            unid:'1'
        });
        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',
                // src:'http://192.168.9.233:20080/static/pics/cache/biaozhu.svg',
                imgSize: [28, 28],
                zIndex:20,
                marginTop:100
            }),
            text:new Text({
              text:phonetext,
              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;
    },

    addFeature(){
      function createStyle(src, img) {
        return new Style({
          image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
            anchor: [0.5, 0.96],
            crossOrigin: 'anonymous',
            src: src,
            img: img,
            imgSize: img ? [img.width, img.height] : undefined
          }))
        });
      }

      var iconFeature = new Feature(new Point([113.338591,34.506910]));
      iconFeature.set('style', createStyle('../../../assets/img/dianli.png', undefined));
      var CameraVertorlayer = new VectorLayer({
              source: iconFeature,
              id:1
          });
          map.addLayer(this.CameraVertorlayer);
    },

  },
  created(){

  },
  mounted(){
    this.InitMap();
    let _this = this;
    setTimeout(() => {
      	// 添加一个使用离线瓦片地图的层

    map.addLayer(CameraVertorlayer);
    }, 200);
  }
}
</script>
<style lang="stylus" scoped>
.ol-control button{
  display none!important;
  background red!important
}
.ol-popup {
    position: absolute;
    background-color: #eeeeee;
    -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;
    min-width: 280px;
}

.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: #eeeeee;
    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: "✖";
}
.popup-content{
  height 300px;
  overflow auto
}
.pop-info-box{
  overflow hidden
  border-bottom 2px solid #fff
}
.pop-img-box {
  float left
  height 100px
  width 120px
  img{
    height 100%
    width 100%
  }
}
.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
  }
  .map{
    height 88vh
    width 99%
    margin 10px auto 10px
  }
}
.info-box{
  position absolute
  z-index 5000
  height 400px
  width 400px
  color #222
  margin 15px
  .info-item{
    position relative
    height 122px
    width 282px
    margin-bottom 10px
    background #fff
    border-radius 5px
    box-shadow 0px 0px 2px rgba(0,0,0,.3)
    overflow hidden
    .info-header{
      height 40px
      line-height 40px
      border-bottom 1px dashed #d7d7d7
      .icon{
        font-size 20px
        color #999999
        margin 0 10px 0 20px
        vertical-align middle
      }
    }
    .info-content{
      font-size 40px
      padding 10px 80px
    }
  }
}
 .info-item:after{
    display block
    content:''
    position absolute
    width 900px
    height 900px
    bottom -885px
    left -300px
    border-radius 900px
    background #e2edfe
  }
.info-item:nth-child(1){
  .info-content{
   color #3c85f9
  }
}
.info-item:nth-child(2){
    .info-content{
    color #5dd8a2
    }
}
.info-item:nth-child(3){
   .info-content{
    color #f19149
   }
}
.info-item:nth-child(4){
    .info-content{
      color #ff7c93
     }
}
.info-item:nth-child(1):after{
   background #e2edfe
}
.info-item:nth-child(2):after{
   background #e7f9f1
}
.info-item:nth-child(3):after{
   background #fdefe4
}
.info-item:nth-child(4):after{
   background #ffebef
   color #ff7c93
}
.info-content{

}
.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
}
.count-box{
  position relative
  margin 50px auto
  background rgba(0,0,0,.5)
  z-index 100
}
.count-header{
  height 100px
  border-bottom 2px solid rgba(255,255,255,.9)
  color #ffffff
  z-index 200
  span {
    display block
  }
  .header-title{
      font-size 20px
  }
  .header-num{
    font-size 30px
    text-align center
    color #20a0ff
  }
}
.count-conent{
  color #fff
  .tianchong{
    height 20px
  }
  .f-icon{
    font-size 20px!important
  }
}
.full{
  position absolute;
  right 0;
  color #fff
  .full-icon{
    font-size 24px
    padding 5px
    cursor pointer
  }
}
.pl3{
  padding-left 3px
}
.rotate-north {
    top: 65px;
    left: .5em;
}
.ol-touch .rotate-north {
  top: 80px;
}

.canvasDiv{
    height:30px;
    width:30px;
    border-radius: 25px;
    background: rgba(255, 0, 0, 1);
    transform: scale(0);
    animation: myfirst 3s;
    animation-iteration-count: infinite;
}
@keyframes myfirst{
    to{
        transform: scale(2);
        background: rgba(0, 0, 0, 0);
    }
}

.ol-overlaycontainer-stopevent{
  display:none!important;
}
.alarm-active{
  display none
}
.alarm-makerbox{
  display block
  height 200px;
  width 200px;
  border-radius 5px
  background: rgba(39, 41, 48, .9);
  color #ffffff
  font-family '微软雅黑'
  font-size 14px
  animation: op 1s;
  -moz-animation: op 1s;	/* Firefox */
  -webkit-animation: op 1s;	/* Safari 和 Chrome */
  -o-animation: op 1s;
}
@keyframes op {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-moz-keyframes op /* Firefox */
{
  from {opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes op /* Safari 和 Chrome */
{
  from {opacity: 0;}
  to {opacity: 1;}
}

@-o-keyframes op /* Opera */
{
  from {opacity: 0;}
  to {opacity: 1;}
}
.exit-alarm::after{
  float right
  height 20px
  width 20px
  margin 5px
  content: "✖";
  cursor pointer
}
.img-box{
  width 200px;
  height 100px;
  overflow hidden;
  img{
    height 100%
    width 100%
    text-align center
  }
}
.info-list {
  padding 1px 10px
}
</style>