视频地图点击

shuishen

2022-09-20 7bd0fe94253a3f797c8791d9ee65901e1402efb6

视频地图点击

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-20 15:05:14
 * @LastEditTime: 2022-09-20 16:25:50
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -313,7 +313,7 @@
        // 注册事件

        // 使用示例
        // this.$EventBus.emit('mapAddLayer', {
        // this.$EventBus.$emit('mapAddLayer', {
        //     layerName: 'housingEstateLayer',
        //     type: 'VectorLayer'
        // })
@@ -333,7 +333,8 @@

        this.$EventBus.$on('layerPointAdd', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.layerPointAdd(params.layerName, params.type, params.params, params.incident = (e) => { })
            console.log(params.incident)
            that.layerPointAdd(params.layerName, params.type, params.params, params.incident)
        })

        this.$EventBus.$on('layerPolygonAdd', (params) => {
@@ -351,12 +352,12 @@

        this.$EventBus.$on('addMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident = (e) => { })
            that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident)
        })

        this.$EventBus.$on('removeMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.removeMxTileset(params.titlesetName, params.incident = (e) => { })
            that.removeMxTileset(params.titlesetName, params.incident)
        })
    },

@@ -459,7 +460,7 @@
         * @param {*} params 添加的点位参数（内容、详情）
         * @param {*} incident 添加的点位事件
         */
        layerPointAdd (layerName, type, params, incident) {
        layerPointAdd (layerName, type, params, incident = (e) => { }) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')
            }
@@ -553,7 +554,7 @@
         * @param {*} titlesetUrl 模型地址
         * @param {*} incident 模型点击事件
         */
        addMxTileset (titlesetName, titlesetUrl, incident) {
        addMxTileset (titlesetName, titlesetUrl, incident = (e) => { }) {
            if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null

            tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
@@ -579,7 +580,7 @@
         * @param {*} titlesetName 图层名称
         * @param {*} incident 模型点击事件
         */
        removeMxTileset (titlesetName, incident) {
        removeMxTileset (titlesetName, incident = (e) => { }) {
            if (tilesetObject[titlesetName] && tilesetObject[titlesetName] != null) {
                tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, incident)
                tilesetLayer.removeOverlay(tilesetObject[titlesetName])

 src/styles/base/index.scss

@@ -46,4 +46,11 @@

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(7, 22, 37, 0.8);
}

.car-video-box {
    .el-dialog {
        left: auto !important;
        right: 240px;
    }
}

 src/views/video/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-20 15:00:43
 * @LastEditTime: 2022-09-20 16:39:34
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -49,6 +49,30 @@
                </div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
                v-loading="loading"
            >
                <video
                    src="/video/sp.mp4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    ref="videoElement"
                    style="object-fit: fill"
                ></video>
            </div>
        </el-dialog>
    </div>
</template>

@@ -60,6 +84,8 @@
            currentPage: 1,
            pagesize: 13,
            arr: [],
            dialogTitle: '',
            dialogVisible: false,
        }
    },
    created () {
@@ -91,7 +117,8 @@
                        lat: lat,
                        alt: 100,
                        url: '/img/icon/video.png'
                    }
                    },
                    incident: this.siteClick
                })

                let carNum = Math.random() * 5000000 + ''
@@ -108,7 +135,22 @@
                siteJd: row.lng,
                siteWd: row.lat
            })
        }
        },

        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

            if (this.$refs.videoElement && this.$refs.videoElement != null) {
                this.$refs.videoElement.currentTime = 0
                this.$refs.videoElement.play()
            }
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },
    },

    destroyed () {