修复Web页面播放国标录像无声音的问题

648540858

2023-09-11 a6fb1cdb74ca11c9dba798e64bf3d61bbfbdf05b

 web_src/src/components/common/MapComponent.vue

old mode 100644
new mode 100755
@@ -1,5 +1,5 @@
<template>
  <div id="mapContainer" style="width: 100%;height: 100%;"></div>
  <div id="mapContainer" ref="mapContainer" style="width: 100%;height: 100%;"></div>
</template>

<script>
@@ -7,10 +7,21 @@
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
import VectorSource from 'ol/source/Vector';
import Tile from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Icon from 'ol/style/Icon';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Overlay from 'ol/Overlay';
import {Point, LineString} from 'ol/geom';
import {get as getProj, fromLonLat} from 'ol/proj';
import {ZoomSlider, Zoom} from 'ol/control';
import {containsCoordinate} from 'ol/extent';

import {v4}  from 'uuid'

let olMap = null;

@@ -24,7 +35,9 @@
    },
    created(){
      this.$nextTick(() => {
        this.init();
        setTimeout(()=>{
          this.init()
        }, 100)
      })

    },
@@ -48,7 +61,7 @@
        });
        let tileLayer = null;
        if (mapParam.tilesUrl) {
          tileLayer = new TileLayer({
          tileLayer = new Tile({
            source: new XYZ({
              projection: getProj("EPSG:3857"),
              wrapX: false,
@@ -57,13 +70,13 @@
            })
          })
        }else {
          tileLayer = new TileLayer({
          tileLayer = new Tile({
            preload: 4,
            source: new OSM(),
          })
        }
        olMap = new Map({
          target: "mapContainer", // 容器ID
          target: this.$refs.mapContainer, // 容器ID
          layers:  [tileLayer], // 默认图层
          view: view,  // 视图
          controls:[   // 控件
@@ -71,6 +84,7 @@
            new Zoom(),
          ] ,
        })
        console.log(3222)
      },
      setCenter(point){

@@ -82,26 +96,156 @@

      },
      centerAndZoom(point,zoom,callback){
        var zoom_ = olMap.getView().getZoom();
        zoom = zoom|| zoom_;
        var duration = 600;
        olMap.getView().setCenter(fromLonLat(point))
        olMap.getView().animate({
          zoom: zoom ,
          duration: duration
        });
      },
      panTo(point, zoom){
        let duration = 800;

        olMap.getView().cancelAnimations()
        olMap.getView().animate({
          center: fromLonLat(point),
          duration: duration
        });
        if (!containsCoordinate(olMap.getView().calculateExtent(), fromLonLat(point))) {
          olMap.getView().animate({
            zoom: olMap.getView().getZoom() - 1,
            duration: duration / 2
          }, {
            zoom: zoom || olMap.getView().getZoom(),
            duration: duration / 2
          });
        }

      },
      panTo(point){
      fit(layer){
        let extent = layer.getSource().getExtent();
        if (extent) {
          olMap.getView().fit(extent,{
            duration : 600,
            padding: [100, 100, 100, 100]
          });
        }


      },
      openInfoBox(){

      openInfoBox(position, content, offset){
        let id = v4()
        // let infoBox = document.createElement("div");
        // infoBox.innerHTML = content ;
        // infoBox.setAttribute("infoBoxId", id)
        let overlay = new Overlay({
          id:id,
          autoPan:true,
          autoPanAnimation:{
            duration: 250
          },
          element: content,
          positioning:"bottom-center",
          offset:offset,
          // className:overlayStyle.className
        });
        olMap.addOverlay(overlay);
        overlay.setPosition(fromLonLat(position));
        return id;
      },
      closeInfoBox(){

      closeInfoBox(id){
        olMap.getOverlayById(id).setPosition(undefined)
        // olMap.removeOverlay(olMap.getOverlayById(id))
      },
      addLayer(){
      /**
       * 添加图层
       * @param data
       * [
       *     {
       *
       *         position: [119.1212,45,122],
       *             image: {
       *                 src:"/images/123.png",
       *                 anchor: [0.5, 0.5]
       *
       *             }
       *     }
       *
       * ]
       */
      addLayer(data, clickEvent){
        let style = new Style();
        if (data.length > 0) {
          let features = [];
          for (let i = 0; i < data.length; i++) {
            let feature = new Feature(new Point(fromLonLat(data[i].position)));
            feature.customData = data[i].data;
            let cloneStyle = style.clone()
            cloneStyle.setImage(new Icon({
              anchor: data[i].image.anchor,
              crossOrigin: 'Anonymous',
              src: data[i].image.src,
            }))
            feature.setStyle(cloneStyle)
            features.push(feature);
          }
          let source = new VectorSource();
          source.addFeatures(features);
          let vectorLayer = new VectorLayer({
            source:source,
            style:style,
            renderMode:"image",
            declutter: false
          })
          olMap.addLayer(vectorLayer)
          if (typeof clickEvent == "function") {
            olMap.on("click", (event)=>{
              vectorLayer.getFeatures(event.pixel).then((features)=>{
                if (features.length > 0) {
                  let items = []
                  for (let i = 0; i < features.length; i++) {
                    items.push(features[i].customData)
                  }
                  clickEvent(items)
                }
              })


            })
          }

          return vectorLayer;
        }
      },
      removeLayer(){
      removeLayer(layer){
        olMap.removeLayer(layer)
      },

      addLineLayer(positions) {
        if (positions.length > 0) {
          let points = [];
          for (let i = 0; i < positions.length; i++) {
            points.push(fromLonLat(positions[i]));
          }
          let line = new LineString(points)
          let lineFeature = new Feature(line);
          lineFeature.setStyle(new Style({
            stroke: new Stroke({
              width: 4 ,
              color: "#0c6d6a",
            })
          }))
          let source = new VectorSource();
          source.addFeature(lineFeature);
          let vectorLayer = new VectorLayer({
            source: source,
          })
          olMap.addLayer(vectorLayer)
          return vectorLayer;
        }
      }



    },
    destroyed() {
      // if (this.jessibuca) {