路线图标添加

shuishen

2023-05-16 63f82d8567c09e5be46fe57b5c98b49a4b90cef1

路线图标添加

 public/images/arrows.png

 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: 2023-05-11 09:36:50
 * @LastEditTime: 2023-05-16 20:44:11
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -166,6 +166,7 @@
import yToolTip from './components/yToolTip.vue'
import createTools from '@/utils/tools/index'
import { mapGetters } from 'vuex'
import { getLineSpeed } from '@/utils/turfPolygon'

import yxLayerJson from './yxlayer'

@@ -465,6 +466,10 @@
            } else {
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon', params.params, params.incident, params.mouseOverIncident, params.mouseOutIncident, params.setStyle)
            }
        })

        this.$EventBus.$on('layerPolygonArrowsAdd', (params) => {
            that.layerPolygonArrowsAdd(params.layerName, params.positions, params.material, params.polygonName, params.params, params.incident, params.mouseOverIncident, params.mouseOutIncident, params.setStyle)
        })

        this.$EventBus.$on('layerPolylineAdd', (params) => {
@@ -1052,6 +1057,52 @@
        },

        /**
         * 图层面添加
         * @param {*} layerName 图层名称
         * @param {*} positions 图层位置数据
         * @param {*} material 颜色
         * @param {*} distanceDisplayCondition 可见距离
         */
        layerPolygonArrowsAdd (layerName, positions, material, polygonName = '', params, incident = (e) => { }, mouseOverIncident = (e) => { },
            mouseOutIncident = (e) => { }, setStyle = {}) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

                layersObjcect[layerName].allowDrillPicking = true
            }

            if (polygonName == '') {
                polygonName = layerName + params.id
            }

            polygonObj[polygonName] = new global.DC.Polyline(positions)


            let positionData = positions.split(';').map(item => {
                return [Number(item.split(',')[0]), Number(item.split(',')[1])]
            }).filter(item => {
                return !item.some(it => it == 0)
            })

            polygonObj[polygonName].setStyle({
                width: (params.width / 2),
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: new global.DC.Color(255, 255, 255),
                    speed: 20,
                    image: '/images/arrows.png',
                    repeat: {
                        x: (getLineSpeed(positionData) / 2), y: 1
                    }
                }),
                clampToGround: false,
                ...setStyle
            })

            polygonObj[polygonName].attrParams = params
            layersObjcect[layerName].addOverlay(polygonObj[polygonName])
        },

        /**
         * 图层线添加
         * @param {*} layerName 图层名称
         * @param {*} positions 图层位置数据
@@ -1329,6 +1380,7 @@
        this.$EventBus.$off('mapClearLayer')
        this.$EventBus.$off('layerPointAdd')
        this.$EventBus.$off('layerPolygonAdd')
        this.$EventBus.$off('layerPolygonArrowsAdd')
        this.$EventBus.$off('layerPolylineAdd')
        this.$EventBus.$off('layerWallAdd')
        this.$EventBus.$off('rowLayerWallAdd')

 src/views/activity/components/drawBtnBox.vue

@@ -442,6 +442,13 @@

                addPlotOverlayData.attrParams = data

                this.$EventBus.$emit('layerPolygonArrowsAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionNewArr,
                    material: color,
                    params: { ...data, item: data, data: data }
                })

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
@@ -672,6 +679,13 @@
                    overlay.attrParams.width = params.width
                    overlay.attrParams.remark = params.remark

                    this.$EventBus.$emit('layerPolygonArrowsAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: linePosition,
                        material: color,
                        params: { ...overlay.attrParams, item: overlay.attrParams, data: overlay.attrParams },
                    })

                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: positionStr,

 src/views/activity/components/polylinePlot.vue

@@ -120,6 +120,12 @@
        editLineInfo () {
            const polyline = polylineOverlay

            this.$EventBus.$emit('mapRemovePolygonLayer', {
                layerName: 'newCarDrawLineLayers',
                polygonName: 'newCarDrawLineLayers' + polyline.overlay.attrParams.id,
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapRemovePolygon', {
                layerName: 'newCarDrawLineLayers',
                type: 'VectorLayer',
@@ -161,6 +167,12 @@
                    })
                    polylineOverlay.overlay.remove()
                    polylineOverlay.overlay.attrParams.lineObj.remove()

                    this.$EventBus.$emit('mapRemovePolygonLayer', {
                        layerName: 'newCarDrawLineLayers',
                        polygonName: 'newCarDrawLineLayers' + polylineOverlay.overlay.attrParams.id,
                        type: 'VectorLayer'
                    })
                    this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar')
                } else {
                    this.$message({

 src/views/activity/components/publicIndex.vue

@@ -712,6 +712,13 @@

                lineLayer.addOverlay(lineObj)

                this.$EventBus.$emit('layerPolygonArrowsAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionNewArr,
                    material: color,
                    params: { ...item, lineObj, item, data: item }
                })

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
@@ -721,7 +728,6 @@
                    mouseOverIncident: this.pointMouseOver,
                    mouseOutIncident: this.pointMouseOut
                })

            })
        },


 src/views/activity/components/twoDrawBtnBox.vue

@@ -6,26 +6,17 @@
                <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>
@@ -48,16 +39,10 @@
                        <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>
@@ -442,6 +427,13 @@

                addPlotOverlayData.attrParams = data

                this.$EventBus.$emit('layerPolygonArrowsAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionNewArr,
                    material: color,
                    params: { ...data, item: data, data: data },
                })

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
@@ -614,6 +606,13 @@
                    overlay.attrParams.width = params.width
                    overlay.attrParams.remark = params.remark

                    this.$EventBus.$emit('layerPolygonArrowsAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: linePosition,
                        material: color,
                        params: { ...overlay.attrParams, item: overlay.attrParams, data: overlay.attrParams },
                    })

                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: positionStr,
@@ -734,7 +733,7 @@
    .right {
        height: 100%;

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