保安员位置接口对接、生成图标点击弹窗展示

guanqb

2023-12-22 4c5ccd55411d61c379bc17abfde2699f50da20d3

 src/views/check/components/OlMapBox.vue

@@ -12,6 +12,15 @@
  <div class="w100 h100">
    <div id="OlMapBoxElement" class="w100 h100">
    </div>
        <div id="popup" class="ol-popup" v-show="isShowLivePersonInfoPopover">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
                <p>名称:{{ livePersonData.realName }}</p>
                <p>所属公司:{{ livePersonData.deptName }}</p>
                <p>派遣单位:{{ livePersonData.dispatchCompany }}</p>
                <p>更新时间:{{ livePersonData.recordTime }}</p>
            </div>
        </div>
  </div>
</template>

@@ -45,6 +54,7 @@
} from "ol/control.js"
import OlSourceOSM from "ol/source/OSM.js"
import OlLayerTile from "ol/layer/Tile.js"
import Overlay from "ol/Overlay.js"

import { Image as ImageLayer } from 'ol/layer'
import ImageStatic from 'ol/source/ImageStatic.js'
@@ -83,6 +93,9 @@
  yx: [],
  sl: []
}

let livePersonInfoPopover = null

let options,
  epsgcode,
  isMvt = false
@@ -106,6 +119,8 @@
  data () {
    return {
      publicPath: process.env.BASE_URL,
            livePersonData: {},
            isShowLivePersonInfoPopover: false
    }
  },

@@ -135,14 +150,6 @@
      })

      that.baseInitLayer(that.mapType)


      this.mapAddClusterLayer(
        'livePersonLocationLayer',
        '/public/img/map/location',
        [{lng: 113, lat: 24}, {lng: 115, lat:24 }],
        (e) => { },
      )
    })
  },

@@ -231,6 +238,7 @@
      return mercator
    },

        // 生成图标图层
    getCurItemFeature (params) {
      const iconFeature = new Feature({
        geometry: new Point([Number(params.lng), Number(params.lat)]),
@@ -277,11 +285,10 @@
      iconFeature.setStyle(new Style(styleOptions))

      iconFeature.on('click', (e) => {
        if (params.event) {
          params.event(e.target.values_.attributes.attr)
                if (params.event) {//icon事件参数
                    params.event(e.target.values_.attributes)//点击事件触发事件并传参
        }
      })

      return iconFeature
    },

@@ -393,14 +400,49 @@
          url: imgUrl,
          event: incident
        }))
                mapView.getView().animate({ // 只设置需要的属性即可
                    center: [item.lng, item.lat], // 中心点
                    zoom: 18, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000 // 缩放持续时间，默认不需要设置
      })
            })

    },

        // 生成地图弹窗
        generateMapPopup (e) {
            const that = this
            this.livePersonData = e
            this.isShowLivePersonInfoPopover = true
            var container = document.getElementById('popup')
            var closer = document.getElementById('popup-closer')

            // 创建popup
            livePersonInfoPopover = new Overlay({
                element: container,
                autoPan: true,
                positioning: 'bottom-center',
                stopEvent: false,
                autoPanAnimation: {
                    duration: 250
                }
            })
            mapView.addOverlay(livePersonInfoPopover)
            closer.onclick = function () {
                livePersonInfoPopover.setPosition(undefined)
                closer.blur()
                return false
            }
            livePersonInfoPopover.setPosition([e.lng, e.lat])
  },


    }
}
</script>

<style lang='scss' scope>

.w100 {
  width: 100%;
}
@@ -408,4 +450,54 @@
.h100 {
  height: 100%;
}

.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px #FFC125);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 130px;
    left: -114px;
    min-width: 300px;
}

.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;
    color: red;
}

.ol-popup-closer:after {
    content: "✖";
}
</style>