图标修改

guanqb

2023-12-23 611705b6b779e382e663b596934052679b621744

图标修改

 src/views/check/components/OlMapBox.vue

@@ -149,6 +149,11 @@
                )
            })

            mapView.getView().on('change:resolution', function () {
                console.log('mapView地图缩放事件')
                // that.$emit('getlivePersonLocationList')
            })

            that.baseInitLayer(that.mapType)
        })
    },
@@ -278,7 +283,9 @@
                        color: color
                    }),
                    padding: [2, 5, 2, 5],
                    stroke: new Stroke({ color: '#00000000', width: 1 })
                    stroke: new Stroke({ color: '#00000000', width: 1 }),
                    offsetX: -60,
                    offsetY: -60
                })
            }

@@ -384,7 +391,7 @@
                    layersObjcect[layerName] = new VectorLayer({
                        // 图标图层
                        zIndex: 24,
                        minZoom: 12,
                        // minZoom: 12,
                        source: new VectorSource(),
                    })
                }
@@ -397,17 +404,17 @@
                    item,
                    lng: item.lng,
                    lat: item.lat,
                    text: item.text,
                    url: imgUrl,
                    event: incident
                }))
                mapView.getView().animate({ // 只设置需要的属性即可
                    center: [item.lng, item.lat], // 中心点
                    zoom: 18, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000 // 缩放持续时间，默认不需要设置
                })
            })

            mapView.getView().animate({ // 只设置需要的属性即可
                center: [positionData[0].lng, positionData[0].lat], // 中心点
                zoom: 18, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                // duration: 1000 // 缩放持续时间，默认不需要设置
            })
        },

        // 生成地图弹窗

 src/views/check/livePersonLocation.vue

@@ -1,7 +1,7 @@

<template>
    <div style="width: 100%; height: 100%;">
        <OlMapBox ref="olmapboxelement"></OlMapBox>
        <OlMapBox ref="olmapboxelement" @getlivePersonLocationList="getlivePersonLocationList"></OlMapBox>
    </div>
</template>

@@ -44,6 +44,7 @@
                res.data.data.forEach(item => {
                    item.lng = item.longitude
                    item.lat = item.latitude
                    item.text = item.realName
                })
                this.$refs.olmapboxelement.mapAddClusterLayer('livePersonLocationLayer', 'img/map/security.png', res.data.data, this.livePersonIconClick)
            })