电子沙盘多边形图片更改

shuishen

2023-07-07 dd7b7fbca6e6cddcd013956161fdd730c172c725

电子沙盘多边形图片更改

 public/warnings/核心区1.png

 public/warnings/核心区2.png

 public/warnings/核心区3.png

 public/warnings/缓冲区1.png

 public/warnings/缓冲区2.png

 public/warnings/缓冲区3.png

 public/warnings/警戒线1.png

 public/warnings/警戒线2.png

 public/warnings/警戒线3.png

 public/warnings/防范区1.png

 public/warnings/防范区2.png

 public/warnings/防范区3.png

 src/components/warningSelect/index.vue

New file
@@ -0,0 +1,131 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-04-04 16:24:42
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-07 15:09:44
 * @FilePath: \srs-police-affairs\src\components\warningSelect\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
        <div v-for="(item, index) in imageUrls" :key="index" @click.stop="curImgClick(item)">
            <div class="content">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                    <img :src="item.url" alt />
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
import { getIconsAll } from "@/api/icons/index"
export default {
    name: 'WarningSelect',

    data () {
        return {
            imageUrls: [],
            loading: false
        }
    },

    created () {
        this.requireImage()
    },

    methods: {
        requireImage () {
            this.imageUrls = [
                {
                    url: '/warnings/防范区1.png',
                    title: '防范区1',
                },
                {
                    url: '/warnings/防范区2.png',
                    title: '防范区2',
                },
                {
                    url: '/warnings/防范区3.png',
                    title: '防范区3',
                },
                {
                    url: '/warnings/核心区1.png',
                    title: '核心区1',
                },
            ]


            // getIconsAll().then(res => {
            //     res.data.data.forEach(item => {
            //         let imgArr = item.split('/')

            //         let title = imgArr[imgArr.length - 1].split('.')[0]

            //         this.imageUrls.push({
            //             url: item,
            //             title
            //         })
            //     })
            //     this.loading = false
            // })
        },

        curImgClick (item) {
            this.$emit('curClick', item.url)
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 999999;
    display: flex;
    flex-wrap: wrap;

    min-width: 420px;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $el-dialog-bg-color;
    border-radius: 10px;

    &>div {
        padding: 6px;
        margin: 10px;
        width: 400px;
        height: 80px;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 8px;
        box-sizing: content-box;

        &:hover {
            color: #409eff;
            border-color: #409eff;
        }

        .content {
            position: relative;
            height: 80px;

            img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 400px;
                height: 80px;
            }
        }
    }
}
</style>

 src/utils/turfPolygon.js

@@ -2,70 +2,67 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-31 10:52:25
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 18:21:01
 * @LastEditTime: 2023-07-07 14:34:41
 * @FilePath: \srs-police-affairs\src\utils\turfPolygon.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
import * as turf from '@turf/turf'
import * as turf from "@turf/turf";

function getAllRegionCenter (data) {
    let arr = []
  let arr = [];

    data.forEach(item => {
  data.forEach((item) => {
        if (item.position && item.position.length > 0) {
            arr.push(getRegionCenter(item.position))
      arr.push(getRegionCenter(item.position));
        }
    })
  });

    arr.push(arr[0])
  arr.push(arr[0]);

    if (arr.length == 1) {
        return arr[0]
    return arr[0];
    } else if (arr.length == 2) {

        return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1]))).geometry.coordinates
    return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1])))
      .geometry.coordinates;
    } else {
        arr.push(arr[0])
    arr.push(arr[0]);

        return turf.centroid(turf.polygon([arr])).geometry.coordinates
    return turf.centroid(turf.polygon([arr])).geometry.coordinates;
    }
}

function getRegionCenter (params) {
    let arr = []
  let arr = [];

    params.forEach(areaArray => {
        JSON.parse(areaArray).coordinates.forEach(item => {
            arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates)
        })
    })
  params.forEach((areaArray) => {
    JSON.parse(areaArray).coordinates.forEach((item) => {
      arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates);
    });
  });

    if (arr.length == 1) {
        return arr[0]
    return arr[0];
    } else if (arr.length == 2) {

        return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1]))).geometry.coordinates
    return turf.centroid(turf.midpoint(turf.point(arr[0]), turf.point(arr[1])))
      .geometry.coordinates;
    } else {
        arr.push(arr[0])
    arr.push(arr[0]);

        return turf.centroid(turf.polygon([arr])).geometry.coordinates
    return turf.centroid(turf.polygon([arr])).geometry.coordinates;
    }
}

export const computerCapacity = (data, type = '') => {
export const computerCapacity = (data, type = "") => {
  if (type != "") {
    const center = getAllRegionCenter(data);

    if (type != '') {

        const center = getAllRegionCenter(data)

        if (type == 'all') {

    if (type == "all") {
            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(center[0] + 0.03),
                    Number(center[1] - 0.30),
          Number(center[1] - 0.3),
                    Number(36000),
                    Number(-3),
                    Number(-45),
@@ -73,10 +70,8 @@
                ),
                function () { },
                3
            )

      );
        } else {

            global.viewer.flyToPosition(
                new global.DC.Position(
                    Number(center[0] + 0.0046),
@@ -88,72 +83,85 @@
                ),
                function () { },
                3
            )

      );
        }
    } else {
        console.log(data, 564)
        let pointArr = []
        data.forEach(item => {
    console.log(data, 564);
    let pointArr = [];
    data.forEach((item) => {
            if (item.longitude && item.latitude) {
                pointArr.push(turf.point([item.longitude, item.latitude]))
                return
        pointArr.push(turf.point([item.longitude, item.latitude]));
        return;
            }

            if (item.lng && item.lat) {
                pointArr.push(turf.point([item.lng, item.lat]))
                return
        pointArr.push(turf.point([item.lng, item.lat]));
        return;
            }
        })
    });

        const features = turf.featureCollection(pointArr)
    const features = turf.featureCollection(pointArr);

        const scope = turf.envelope(features).bbox
    const scope = turf.envelope(features).bbox;

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

        console.log([[scope[0], scope[1]], [scope[2], scope[1]], [scope[2], scope[3]], [scope[0], scope[3]]])
    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)
    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))
        })
    let boxPoint = [];
    scaledPoly.geometry.coordinates[0].forEach((item) => {
      boxPoint.push(turf.point(item));
    });

        const boxFeatures = turf.featureCollection(boxPoint)
    const boxFeatures = turf.featureCollection(boxPoint);

        const boxScope = turf.envelope(boxFeatures).bbox
    const boxScope = turf.envelope(boxFeatures).bbox;

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

export const getMapBounds = (data, type = '') => {
    let pointArr = []
export const getMapBounds = (data, type = "") => {
  let pointArr = [];

    data.forEach(item => {
        pointArr.push(turf.point([item.x, item.y]))
        return
    })
  data.forEach((item) => {
    pointArr.push(turf.point([item.x, item.y]));
    return;
  });

    const features = turf.featureCollection(pointArr)
  const features = turf.featureCollection(pointArr);

    const scope = turf.envelope(features).bbox
  const scope = turf.envelope(features).bbox;

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

    return scope
}
  return scope;
};

export const getLineSpeed = (data) => {
    var line = turf.lineString(data)
    var length = turf.length(line, { units: 'miles' })
export const getLineSpeed = (data, multiple) => {
  var line = turf.lineString(data);
  var length = turf.length(line, { units: "miles" });

    return length * 1000 / 50
}
  return (length * 1000) / multiple;
};

 src/views/activity/components/drawBtnBox.vue

@@ -366,18 +366,30 @@
                    })
                } else {
                    if (item.areaType == 2) {
                        let multiple, speed
                        if (item.iconUrl.indexOf('1') != -1) {
                            multiple = 250
                            speed = 3
                        } else if (item.iconUrl.indexOf('2') != -1) {
                            multiple = 195
                            speed = 3
                        } else {
                            multiple = 50
                            speed = 10
                        }

                        addPlotOverlayData.setStyle({
                            material: new global.DC.WallImageTrailMaterialProperty({
                                image: '/images/jjx.png',
                                image: item.iconUrl,
                                color: color,
                                repeat: {
                                    x: getLineSpeed(position.split(';').map(item => {
                                        item.split(',')

                                        return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                    })), y: 1
                                    }), multiple), y: 1
                                },
                                speed: 10
                                speed: speed
                            })
                        })
                    } else {
@@ -509,18 +521,31 @@
                        })
                    } else {
                        if (overlay.attrParams.item.areaType == 2) {
                            let multiple, speed

                            if (overlay.attrParams.item.iconUrl.indexOf('1') != -1) {
                                multiple = 250
                                speed = 3
                            } else if (overlay.attrParams.item.iconUrl.indexOf('2') != -1) {
                                multiple = 195
                                speed = 3
                            } else {
                                multiple = 50
                                speed = 10
                            }

                            overlay.setStyle({
                                material: new global.DC.WallImageTrailMaterialProperty({
                                    image: '/images/jjx.png',
                                    image: overlay.attrParams.item.iconUrl,
                                    color: color,
                                    repeat: {
                                        x: getLineSpeed(position.split(';').map(item => {
                                            item.split(',')

                                            return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                        })), y: 1
                                        }), multiple), y: 1
                                    },
                                    speed: 10
                                    speed: speed
                                })
                            })
                        } else {

 src/views/activity/components/polygonPlot.vue

@@ -80,7 +80,8 @@
                <div class="line" v-show="isNeedPolygonType">
                    <div class="value-name-box">选择类型：</div>
                    <div class="select-type" style="flex: 1;">
                        <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                        <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型"
                            @change="polygonAreaTypeChange">
                            <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
@@ -96,6 +97,18 @@
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>
                        <images-select v-show="imagesListShow" @curClick="curClick"></images-select>
                    </div>
                </div>

                <div class="line" v-show="warningImageShow">
                    <div class="value-name-box">警戒线样式：</div>
                    <div class="select-image" style="position: relative; display: flex; align-items: center;">
                        <el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
                            @click="imagesListShow = !imagesListShow">
                            <img :src="curImgUrl" alt
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>
                        <Warning-select v-show="imagesListShow" @curClick="curClick"></Warning-select>
                    </div>
                </div>

@@ -181,6 +194,8 @@
                label: '瀑布墙'
            }],

            warningImageShow: false,

            restPlotSelectArray: [
                {
                    value: 6,
@@ -217,6 +232,7 @@
            polygonPlotData = `${positions.lng} ${positions.lat}`
            this.customImageShow = false
            this.restSelectBox = false
            this.warningImageShow = false
            this.restPlotType = 6
            let color = ''

@@ -255,6 +271,8 @@
            this.polygonRemark = ''
            this.choosePlotColorAlpha = 48
            this.customImageShow = false
            this.warningImageShow = false
            this.restSelectBox = false

            if (type == 5) {
                this.polygonAreaType = 1
@@ -270,6 +288,7 @@
        setCurOver (e) {
            this.restSelectBox = false
            this.customImageShow = false
            this.warningImageShow = false

            plotOverlayData = e

@@ -388,6 +407,7 @@
                    positionStr = polygonPlotData
                } else if (this.plotSaveType == 5) {
                    positionStr = polygonPlotData
                    if (this.polygonAreaType == 2) iconUrl = { iconUrl: this.curImgUrl }
                } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
                    positionStr = polygonPlotData + ',' + polygonPlotData
                } else if (this.plotSaveType == 10) {
@@ -432,8 +452,11 @@
                    })
                }
            })
        }
        },

        polygonAreaTypeChange (e) {
            e == 2 ? this.warningImageShow = true : this.warningImageShow = false
        }
    },
}
</script>

 src/views/activity/components/publicIndex.vue

@@ -469,19 +469,31 @@
                    positions = positions.join(';')
                    coverage = new global.DC.Wall(positions)

                    let multiple, speed
                    if (params.iconUrl.indexOf('1') != -1) {
                        multiple = 250
                        speed = 3
                    } else if (params.iconUrl.indexOf('2') != -1) {
                        multiple = 195
                        speed = 3
                    } else {
                        multiple = 50
                        speed = 10
                    }

                    if (params.areaType == 2) {
                        coverage.setStyle({
                            material: new global.DC.WallImageTrailMaterialProperty({
                                image: '/images/jjx.png',
                                image: params.iconUrl,
                                color: color.curColor,
                                repeat: {
                                    x: getLineSpeed(position.split(';').map(item => {
                                        item.split(',')

                                        return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                    })), y: 1
                                    }), multiple), y: 1
                                },
                                speed: 10
                                speed: speed
                            })
                        })
                    } else {

 vue.config.js

@@ -2,22 +2,22 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-27 12:29:35
 * @LastEditTime: 2023-07-07 14:54:23
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description:
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */

const path = require("path")
const CopywebpackPlugin = require("copy-webpack-plugin")
const dvgisDist = "./node_modules/@dvgis"
const webpack = require("webpack")
const path = require("path");
const CopywebpackPlugin = require("copy-webpack-plugin");
const dvgisDist = "./node_modules/@dvgis";
const webpack = require("webpack");

const CompressionPlugin = require("compression-webpack-plugin")
const pxtovw = require("postcss-px-to-viewport")
const CompressionPlugin = require("compression-webpack-plugin");
const pxtovw = require("postcss-px-to-viewport");

const productionGzipExtensions = ["js", "css"]
const productionGzipExtensions = ["js", "css"];

module.exports = {
    css: {
@@ -99,8 +99,12 @@
                    from: "./public/qp",
                    to: "qp",
                },
        {
          from: "./public/warnings",
          to: "warnings",
        },
            ],
        ])
    ]);

        // config.plugin("define").tap((args) => {
        //     args[0]["process"] = { ...args[0]["process.env"] }
@@ -177,7 +181,7 @@
                pathRewrite: {
                    "^/api": "",
                },
            }
        },
    },
}
  },
};