模型高层去除、电子沙盘更改、警情信息更改

shuishen

2023-05-08 646cf1272bc67313dc50ccc765cfd16fea5ff773

模型高层去除、电子沙盘更改、警情信息更改

 src/components/map/index.vue

@@ -2,14 +2,14 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 14:03:31
 * @LastEditTime: 2023-05-08 17:31:26
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div class="viewer-box" id="viewer-container">
    <div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
        <div class="over-look-btn">
@@ -64,7 +64,7 @@
                </div>
            </el-tooltip>

            <div class="image-switch-img-btn" v-show="showImgBtn">
            <div class="image-switch-img-btn" v-show="showImgBtn" @click.stop>
                <div class="layer-change-box">
                    <div class="title">
                        底图
@@ -74,10 +74,10 @@
                    </div>

                    <div class="content">
                        <div class="img" @click="switchImg">
                        <div class="img" @click.stop="switchImg">
                            <span :class="{ on: imgtype == 0 }">影像</span>
                        </div>
                        <div class="elec" @click="switchElec">
                        <div class="elec" @click.stop="switchElec">
                            <span :class="{ on: imgtype == 1 }">矢量</span>
                        </div>
                    </div>
@@ -85,10 +85,10 @@
                <div class="layer-change-box">
                    <div class="title">模型</div>
                    <div class="content">
                        <div class="img light" @click="highOrLightChange('light')">
                        <div class="img light" @click.stop="highOrLightChange('light')">
                            <span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
                        </div>
                        <div class="elec high" @click="highOrLightChange('high')">
                        <div class="elec high" @click.stop="highOrLightChange('high')">
                            <span :class="{ on: tilesetLayerType == 'high' }">高精</span>
                        </div>
                    </div>
@@ -320,21 +320,21 @@
            // global.viewer.addTerrain(terrain)

            // 内网
            that.switchImg()
            // that.switchImg()

            // 地形数据添加
            that.addTerrain()
            // that.addTerrain()

            // 外网 
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -1228,7 +1228,7 @@
            })

            // 地形数据添加
            // tilesetObject[titlesetName].setHeight(-73)
            tilesetObject[titlesetName].setHeight(-73)

            tilesetLayer.addOverlay(tilesetObject[titlesetName])


 src/styles/media/index.scss

@@ -1686,14 +1686,20 @@
                        }

                        .draw-btn-box {
                            padding: countSizeVh(8);
                            left: countSizeVw(692, 1920);
                            bottom: countSizeVh(40);
                            border-radius: countSizeVh(8);
                            border-radius: countSizeVh(8) countSizeVh(8) 0 0;
                            width: auto;
                            z-index: 99;

                            .emit-expend {
                                width: countSizeVw(54, 1920);
                                height: countSizeVh(28);
                                line-height: countSizeVh(28);
                                border-radius: countSizeVh(8) countSizeVh(8) 0 0;
                            }

                            .left {
                                padding: countSizeVh(8);

                                h3 {
                                    font-size: countSizeVh(16);
                                    height: countSizeVh(30);

 src/styles/media/index1.scss

File was deleted

 src/utils/turfPolygon.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-31 10:52:25
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-06 16:52:41
 * @LastEditTime: 2023-05-08 18:21:01
 * @FilePath: \srs-police-affairs\src\utils\turfPolygon.js
 * @Description: 
 * 
@@ -92,6 +92,7 @@

        }
    } else {
        console.log(data, 564)
        let pointArr = []
        data.forEach(item => {
            if (item.longitude && item.latitude) {
@@ -111,8 +112,22 @@

        // const poly = turf.polygon([[[0, 29], [3.5, 29], [2.5, 32], [0, 29]]])

        global.viewer.flyToBounds(scope,
            { heading: 0, pitch: -45, roll: 0 },
        console.log([[scope[0], scope[1]], [scope[2], scope[1]], [scope[2], scope[3]], [scope[0], scope[3]]])

        var poly = turf.polygon([[[scope[0], scope[1]], [scope[2], scope[1]], [scope[2], scope[3]], [scope[0], scope[3]], [scope[0], scope[1]]]])
        var scaledPoly = turf.transformScale(poly, 4)

        let boxPoint = []
        scaledPoly.geometry.coordinates[0].forEach(item => {
            boxPoint.push(turf.point(item))
        })

        const boxFeatures = turf.featureCollection(boxPoint)

        const boxScope = turf.envelope(boxFeatures).bbox

        global.viewer.flyToBounds(boxScope,
            { heading: 0, pitch: -90, roll: 0 },
            (e) => { },
            3
        )

 src/views/activity/components/drawBtnBox.vue

@@ -1,22 +1,33 @@
<template>
    <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
        <div class="left">
        <span @click="showEmitBox = !showEmitBox" class="emit-expend">{{showEmitBox? '收起': '展开'}}</span>

        <div v-show="showEmitBox" class="left">
            <h3>预案布置</h3>
            <div>
                <span>要素资源：</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policeman')"
                            title="警员"
                        >
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policecar')"
                            title="警车"
                        >
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon4')" title="自定义图片标注">自定义图片标注</button>
                        <button
                            @click="drawThreeArrow('billboard', 'icon', 'icon4')"
                            title="自定义图片标注"
                        >自定义图片标注</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon5')" title="其他">其他</button>
@@ -27,10 +38,16 @@
                <span>作战标绘：</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
                        <button
                            @click="drawThreeArrow('polygon', 'polygon', 'polygon')"
                            title="多边形"
                        >多边形</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')" title="折线">折线</button>
                        <button
                            @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')"
                            title="折线"
                        >折线</button>
                    </li>
                </ul>
            </div>
@@ -40,7 +57,10 @@
                    <li>
                        <!-- <el-button
                        ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar', 'polyline')" title="巡逻路线">
                        <button
                            @click="drawThreeArrow('polyline', 'policecar', 'polyline')"
                            title="巡逻路线"
                        >
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
@@ -74,7 +94,8 @@

    data () {
        return {
            startDrawFlag: false
            startDrawFlag: false,
            showEmitBox: true
        }
    },

@@ -751,18 +772,31 @@
.draw-btn-box {
    position: fixed;
    display: flex;
    // left: 50%;
    bottom: 40px;
    left: 50%;
    bottom: 0px;
    color: #fff;
    background: $bg-one-color;
    white-space: nowrap;
    // transform: translate(-50%, 0);
    transform: translate(-50%, 0);

    .emit-expend {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
        width: 54px;
        height: 28px;
        line-height: 28px;
        background: $bg-color;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
    }

    .left,
    .right {
        height: 100%;

        &>div {
        & > div {
            display: flex;
        }


 src/views/activity/components/twoDrawBtnBox.vue

@@ -6,17 +6,26 @@
                <span>要素资源：</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policeman')"
                            title="警员"
                        >
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policecar')"
                            title="警车"
                        >
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon4')" title="自定义图片标注">自定义图片标注</button>
                        <button
                            @click="drawThreeArrow('billboard', 'icon', 'icon4')"
                            title="自定义图片标注"
                        >自定义图片标注</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon5')" title="其他">其他</button>
@@ -39,10 +48,16 @@
                        <button @click="drawArrow('tailed_attack_arrow', 4)" title="燕尾箭头">燕尾箭头</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
                        <button
                            @click="drawThreeArrow('polygon', 'polygon', 'polygon')"
                            title="多边形"
                        >多边形</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')" title="折线">折线</button>
                        <button
                            @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')"
                            title="折线"
                        >折线</button>
                    </li>
                </ul>
            </div>
@@ -51,7 +66,7 @@
                <ul>
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
@@ -708,18 +723,18 @@
.draw-btn-box {
    position: fixed;
    display: flex;
    // left: 50%;
    bottom: 40px;
    left: 50%;
    bottom: 0px;
    color: #fff;
    background: $bg-one-color;
    white-space: nowrap;
    // transform: translate(-50%, 0);
    transform: translate(-50%, 0);

    .left,
    .right {
        height: 100%;

        &>div {
        & > div {
            display: flex;
        }


 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 16:36:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 09:37:39
 * @LastEditTime: 2023-05-08 18:04:31
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 
 * 
@@ -680,9 +680,18 @@
                lng = Number(positionStr.split(",")[0].split(' ')[0])
                lat = Number(positionStr.split(",")[0].split(' ')[1])
            } else if (type == 'polygon') {
                let positionArr = this.getCenter(position, 'polygon')
                lng = Number(positionArr[0])
                lat = Number(positionArr[1])
                let itPositionStr = position.slice(11, position.length - 1)
                let positionArr = itPositionStr.split(',')
                positionArr = positionArr.map(item => {
                    return {
                        lng: Number(item.split(' ')[0]),
                        lat: Number(item.split(' ')[1])
                    }
                })

                computerCapacity(positionArr)

                return
            } else if (type == 'arrow') {
                let positionStr = position.slice(11, position.length - 1)
                lng = Number(positionStr.split(",")[0].split(' ')[0])

 src/views/policeInfor/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 09:19:32
 * @LastEditTime: 2023-05-08 18:28:58
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -30,6 +30,13 @@
                            :value="item.value"
                        ></el-option>
                    </el-select>

                    <div style="margin-left: 8px;">
                        <el-checkbox v-model="siteLayerShow" @change="siteLayerChange">点位图</el-checkbox>
                    </div>
                    <div style="margin-left: 8px;">
                        <el-checkbox v-model="heatMapShow" @change="heatMapChange">热力图</el-checkbox>
                    </div>
                </div>

                <div class="search-item-box">
@@ -47,6 +54,8 @@
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>

                <div class="search-item-box">数量：{{ historyPoliceInforData.length }} 起</div>
            </div>

            <div class="police-info">
@@ -384,7 +393,12 @@
                }
            ],

            heatMap: null
            heatMap: null,

            heatMapShow: false,
            heatMapData: [],

            siteLayerShow: true
        }
    },

@@ -437,6 +451,20 @@
    },

    methods: {
        heatMapChange (e) {
            if (e) {
                this.heatMapData.length > 0 && this.addHeatmap(this.heatMapData)
            } else {
                if (this.heatMap != null) {
                    this.heatMap.show(false)
                }
            }
        },

        siteLayerChange (e) {
            e ? policeInforSiteLayer.show = true : policeInforSiteLayer.show = false
        },

        tableMouse (e) {
            this.currentPointerPosition = {
                x: e.clientX,
@@ -448,10 +476,12 @@
            this.currentBJNR = e.BJNR
            this.currentTooltip = true
        },

        tabelLeave (e) {
            console.log(e)
            this.currentTooltip = false
        },

        loading () {
            loading = this.$loading({
                lock: true,
@@ -497,7 +527,7 @@
                return this.dateFormat(item)
            })

            this.getAlarmList({ start: date[0], end: date[1], current: this.pages.current })
            this.getAlarmList({ start: date[0], end: date[1] })

        },

@@ -537,6 +567,7 @@
                    this.realPoliceInforData = []
                    this.realEmptyText = "暂无实时警情信息"
                }

                setTimeout(() => {
                    loading && loading.close()
                }, 500)
@@ -638,12 +669,11 @@
        },

        addHeatmap (data) {
            let box = getMapBounds(data)
            let bounds = {
                west: Number(box[0]),
                south: Number(box[1]),
                east: Number(box[2]),
                north: Number(box[3])
                west: 117.9,
                south: 28.3,
                east: 118.2,
                north: 28.7
            }

            //初始化cesiumheatmap对象，传入相应的参数
@@ -652,7 +682,7 @@
                global.viewer, // 视图层
                bounds, // 矩形坐标
                {
                    radius: 5,
                    radius: 50,
                    maxOpacity: .5,
                    minOpacity: 0,
                    blur: .75
@@ -662,7 +692,7 @@
            let valueMax = 100
            // add data to heatmap
            //获取动态数据
            heatMap.setWGS84Data(valueMin, 10, data)
            heatMap.setWGS84Data(valueMin, valueMax, data)
            this.heatMap = heatMap
        },

@@ -670,16 +700,15 @@
        getAlarmList (params) {
            this.loading()
            this.historyPoliceInforData = []
            this.heatMapData = []
            this.historyEmptyText = ""

            if (this.heatMap != null) {
                this.heatMap.show(false)
            }

            getAlarmList({ ...params, size: this.pages.size, jjdwbh: this.userInfo.dept_id, type: 3, bjlx: this.policeInforValue }).then(res => {
            getAlarmList({ ...params, size: 999, jjdwbh: this.userInfo.dept_id, type: 3, bjlx: this.policeInforValue }).then(res => {
                if (res.data.data.length > 0) {
                    let positions = []
                    // this.pages.total = res.data.data.pages
                    this.historyPoliceInforData = res.data.data.map((item, index) => {
                        const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0] ? BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE : ''

@@ -689,13 +718,13 @@


                        if (item.ZDDWXZB && item.ZDDWXZB != '' && item.ZDDWXZB > 0 && item.ZDDWXZB > 73) {
                            positions.push({ x: Number(item.ZDDWXZB), y: Number(item.ZDDWYZB), value: 1 })
                            this.heatMapData.push({ x: Number(item.ZDDWXZB), y: Number(item.ZDDWYZB), value: 1 })
                        }

                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, BJLX: bjlxText }
                    })

                    this.addHeatmap(positions)

                } else {
                    // this.pages.total = 0
                    this.historyPoliceInforData = []
@@ -801,6 +830,7 @@
        addPoliceInforSiteLayer (data) {
            this.clearLayer()
            let policeInfoPositionList = []
            this.siteLayerShow = true

            data.forEach((item, index) => {
                if (item.lng && item.lng != undefined && item.lng != '') {
@@ -868,6 +898,9 @@
         * @return {*}
         */
        clearLayer () {
            for (let i = 0; i < timer.length; i++) {
                clearInterval(timer[i])
            }
            if (policeInforSiteLayer && policeInforSiteLayer != null && policeInforSiteLayer != undefined) {
                policeInforSiteLayer.clear()
            }
@@ -891,8 +924,7 @@

            await this.getAlarmList({
                start: date[0],
                end: date[1],
                current: this.pages.current
                end: date[1]
            })

            this.$nextTick(() => {