动态显示地图标记

guanqb

2022-08-17 3202b7e819822f8c9320e549de1b159f497906d7

动态显示地图标记

 src/components/map/index.vue

@@ -5,6 +5,7 @@

<script>


// 图层变量做声明
var farmRegionLayer = null
var plotRegionLayer = null
@@ -13,6 +14,10 @@
var addPlotLayers = []

var siteEntitylayers = null
var siteEntitylayers1 = null
var siteEntitylayers2 = null
var siteEntitylayers3 = null
var siteEntitylayers4 = null
var sitePositionsArray = []

export default {
@@ -59,6 +64,14 @@

            siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
            global.viewer.addLayer(siteEntitylayers)
            siteEntitylayers1 = new global.DC.VectorLayer('siteEntitylayers1')
            global.viewer.addLayer(siteEntitylayers1)
            siteEntitylayers2 = new global.DC.VectorLayer('siteEntitylayers2')
            global.viewer.addLayer(siteEntitylayers2)
            siteEntitylayers3 = new global.DC.VectorLayer('siteEntitylayers3')
            global.viewer.addLayer(siteEntitylayers3)
            siteEntitylayers4 = new global.DC.VectorLayer('siteEntitylayers4')
            global.viewer.addLayer(siteEntitylayers4)

            // 判断是否支持图像渲染像素化处理
            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
@@ -214,6 +227,9 @@
                        </div>
                        `
            )



            divIcon.attrParams = item
            farmLogoLayer.addOverlay(divIcon)

@@ -321,9 +337,22 @@
            billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
            })

            siteEntitylayers.addOverlay(label)
            siteEntitylayers.addOverlay(billboard)
            if (!item.dictTypeNum) {
                siteEntitylayers.addOverlay(label)
                siteEntitylayers.addOverlay(billboard)
            } else if (item.dictTypeNum == 1) {
                siteEntitylayers1.addOverlay(label)
                siteEntitylayers1.addOverlay(billboard)
            } else if (item.dictTypeNum == 2) {
                siteEntitylayers2.addOverlay(label)
                siteEntitylayers2.addOverlay(billboard)
            } else if (item.dictTypeNum == 3) {
                siteEntitylayers3.addOverlay(label)
                siteEntitylayers3.addOverlay(billboard)
            } else if (item.dictTypeNum == 4) {
                siteEntitylayers4.addOverlay(label)
                siteEntitylayers4.addOverlay(billboard)
            }

            sitePositionsArray.push({ center, name: item.name, id: item.id })
        },
@@ -451,7 +480,61 @@
                centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
            }
            return centerLonLat
        }
        },
        // 隐藏农场标记图层
        hiddenFarmLayer () {
            farmLogoLayer.show = false
            farmRegionLayer.show = false
        },
        // 显示农场标记图层
        showFarmLayer () {
            farmLogoLayer.show = true
            farmRegionLayer.show = true
        },
        // 隐藏地块图层
        hiddenPlotLayer () {
            plotRegionLayer.show = false
        },
        // 显示地块图层
        showPlotLayer () {
            plotRegionLayer.show = true
        },
        // 隐藏监控图层
        hiddenJKLayer () {
            siteEntitylayers.show = false
        },
        // 显示监控图层
        showJKLayer () {
            siteEntitylayers.show = true
        },
        // 隐藏气象图层
        hiddenQXLayer () {
            siteEntitylayers1.show = false
            siteEntitylayers2.show = false
        },
        // 显示气象图层
        showQXLayer () {
            siteEntitylayers1.show = true
            siteEntitylayers2.show = true
        },
        // 隐藏水质图层
        hiddenSZLayer () {
            siteEntitylayers3.show = false
        },
        // 显示水质图层
        showSZLayer () {
            siteEntitylayers3.show = true
        },
        // 隐藏土壤图层
        hiddenTRLayer () {
            siteEntitylayers4.show = false
        },
        // 显示土壤图层
        showTRLayer () {
            siteEntitylayers4.show = true
        },


    }
}
</script>

 src/router/axios.js

@@ -19,8 +19,8 @@
import * as auth from '@/utils/auth'

const service = axios.create({
    // baseURL: 'http://182.106.212.58:8013/api', // 2
    baseURL: 'http://192.168.0.207:89', // 2
    baseURL: 'http://182.106.212.58:8013/api', // 2
    // baseURL: 'http://192.168.0.207:89', // 2
    timeout: 600000 // request timeout
})


 src/views/equipment/index.vue

@@ -207,10 +207,9 @@
    getLandList
} from '@/api/land/land'
import {
 getStationAndVideoByLandId,
    getStationAndVideoByLandId,
    getStationDateByStcd
} from '@/api/equipment/equipment'
import { nextTick } from 'vue'
import flvjs from 'flv.js'
import dateUtils from '@/utils/dateUtils' // 1.先引入

@@ -409,8 +408,10 @@
                        this.stationData = []
                    }
                    if (this.vidList != null) {
                        console.log('111112222', this.vidList[0].wssFlv)
                        this.$nextTick(() => {
                            this.playFlvVideo()
                            this.playFlvVideo(this.vidList)
                            console.log('555666777', this.vidList)//true
                        })
                    }
                }
@@ -482,18 +483,26 @@
            })
        },
        // flv视频播放
        playFlvVideo () {
        playFlvVideo (arr) {
            console.log('778899', arr)//true
            console.log('77889900wssFlv', arr[0].wssFlv)//true
            console.log('77889900flv', arr[0].flv)//true
            console.log('77889900webRtc', arr[0].webRtc)//true
            if (flvjs.isSupported()) {
                var arr = this.vidList
                arr.forEach((item, index) => {
                    var videoElement = document.getElementById(`videoElement${index}`)

                    console.log('335588', arr[index].wssFlv)//true
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        stashInitialSize: 128,
                        url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                        // url: arr[index].wssFlv
                        // url: 'https://www.ainfo.top:700/rtp/34020000001110000301_34020000001320000001.flv'


                    }, {
                        enableStashBuffer: false,
                        fixAudioTimestampGap: false

 src/views/home/index.vue

@@ -300,26 +300,32 @@
        <div class="lenged-box">
            <ul>
                <li>
                    <input type="checkbox" v-model="showIconNC" />
                    <div class="icon"></div>
                    <div class="title">农场</div>
                </li>
                <li>
                    <input type="checkbox" v-model="showIconDK" />
                    <div class="icon"></div>
                    <div class="title">地块</div>
                </li>
                <li>
                    <input type="checkbox" v-model="showIconJK" />
                    <div class="icon"></div>
                    <div class="title">监控设备</div>
                </li>
                <li>
                    <input type="checkbox" v-model="showIconTR" />
                    <div class="icon"></div>
                    <div class="title">土壤监测</div>
                </li>
                <li>
                    <input type="checkbox" v-model="showIconQX" />
                    <div class="icon"></div>
                    <div class="title">气象监测</div>
                </li>
                <li>
                    <input type="checkbox" v-model="showIconSZ" />
                    <div class="icon"></div>
                    <div class="title">水质监测</div>
                </li>
@@ -336,23 +342,28 @@
                <div class="market-title">
                    <el-select v-model="farm.id" placeholder="请选择农场" @change="scFarmChange">
                        <el-option
                                v-for="item in farmNumArray"
                                :key="item.id"
                                :label="item.farmName"
                                :value="item.id">
                        </el-option>
                            v-for="item in farmNumArray"
                            :key="item.id"
                            :label="item.farmName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                    <div class="date">
                        <el-date-picker
                            v-model="scSelectTime"
                            type="daterange" value-format="yyyy-MM-dd"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                        ></el-date-picker>
                    </div>
                    <div class="query-button">
                        <el-button type="primary" icon="el-icon-search" @click="searchMarketDistrict">查询</el-button>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="searchMarketDistrict"
                        >查询</el-button>
                        <el-button type="info" icon="el-icon-refresh-right" @click="scltReset">重置</el-button>
                    </div>
                </div>
@@ -402,7 +413,9 @@
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="scene">
                            <img src="/img/icon/360.png" alt />
                            <a :href="farmDetails.panoramic" target="_blank">
                                <img src="/img/icon/360.png" alt />
                            </a>
                        </div>
                    </div>

@@ -592,7 +605,14 @@
            // 设备
            mTotalObj: {},
            // 设备列表
            equipmentList: {}
            equipmentList: {},
            // 地图标记显示与隐藏
            showIconNC: true,
            showIconDK: true,
            showIconJK: true,
            showIconTR: true,
            showIconQX: true,
            showIconSZ: true,
        }
    },
    created () {
@@ -603,6 +623,9 @@
    mounted () {
        // this.initRightPie('EquipmentEcharts')
        this.AllDataUpdate()
    },
    updated () {
        this.showIcon()
    },
    methods: {
        // 全局数据刷新事件
@@ -638,7 +661,7 @@
        },

        showDetailPopup (params) {
            console.log(params)
            console.log('989898', params)
            this.farmDetails = params
            this.farmProfiles = true
        },
@@ -1364,7 +1387,41 @@
        scltReset () {
            this.farm.id = ''
            this.scSelectTime = ''
        },
        // 地图图标的展示与隐藏
        showIcon () {
            if (this.showIconNC == false) {
                this.$refs.modalForm.hiddenFarmLayer()
            } else {
                this.$refs.modalForm.showFarmLayer()
            }
            if (this.showIconDK == false) {
                this.$refs.modalForm.hiddenPlotLayer()
            } else {
                this.$refs.modalForm.showPlotLayer()
            }
            if (this.showIconJK == false) {
                this.$refs.modalForm.hiddenJKLayer()
            } else {
                this.$refs.modalForm.showJKLayer()
            }
            if (this.showIconTR == false) {
                this.$refs.modalForm.hiddenTRLayer()
            } else {
                this.$refs.modalForm.showTRLayer()
            }
            if (this.showIconQX == false) {
                this.$refs.modalForm.hiddenQXLayer()
            } else {
                this.$refs.modalForm.showQXLayer()
            }
            if (this.showIconSZ == false) {
                this.$refs.modalForm.hiddenSZLayer()
            } else {
                this.$refs.modalForm.showSZLayer()
            }
        }

    }
}
</script>
@@ -2123,13 +2180,43 @@
                display: flex;

                .icon {
                    margin-left: 20px;
                    margin-left: 10px;
                    width: 24px;
                    height: 24px;
                }

                .title {
                    margin-left: 20px;
                    margin-left: 10px;
                }
                input[type='checkbox'] {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    width: 24px;
                    height: 24px;
                    background-color: transparent;
                    border: 1px solid #1bba79;
                    display: inline-block;
                    text-align: center;
                    vertical-align: middle;
                    line-height: 24px;
                    background: #fff;
                    border-radius: 4px;
                    margin-left: 5px;
                    cursor: pointer;
                }
                input[type='checkbox']:checked {
                    border: 1px solid #fff;
                    background-color: #20cf55;
                }
                input[type='checkbox']::before {
                    content: '';
                }
                input[type='checkbox']:checked::before {
                    content: '\2713';
                    background-color: transparent;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 700;
                }
            }