aunix/wvp-GB28181-pro
1
0
Fork 0
mirror of https://gitee.com/pan648540858/wvp-GB28181-pro.git synced 2026-05-24 14:07:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化图标展示性能

Browse Source
This commit is contained in:
lin 2025-10-23 22:49:18 +08:00
parent 2de4932f1e
commit 3adf551beb
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/views/common/MapComponent.vue
View File

@ -296,8 +296,7 @@ export default {
feature.setId(data[i].id) feature.setId(data[i].id)
feature.customData = data[i].data feature.customData = data[i].data
feature.setProperties({ feature.setProperties({
status: 'offline', status: data[i].status,
iconSrc: 'static/images/gis/camera1-offline.png'
}) })
// const style = new Style() // const style = new Style()
// style.setImage(new Icon({ // style.setImage(new Icon({
@ -321,17 +320,23 @@ export default {
// 'circle-fill-color': 'red', // 'circle-fill-color': 'red',
// 'circle-stroke-color': 'white', // 'circle-stroke-color': 'white',
// 'circle-stroke-width': 0.5 // 'circle-stroke-width': 0.5
'icon-src': 'static/images/gis/camera1.png', 'icon-src': 'static/images/gis/sprite.png',
// 'icon-src': [ 'icon-width': 120,
// 'case', 'icon-height': 40,
// ['==', ['get', 'status'], 'online'], 'static/images/gis/camera1.png', 'icon-size': [40, 40],
// ['==', ['get', 'status'], 'offline'], 'static/images/gis/camera1-offline.png', 'icon-anchor': [0.5, 1],
// ['==', ['get', 'status'], 'checked'], 'static/images/gis/camera1-red.png', 'icon-offset-origin': 'bottom-left',
// 'static/images/gis/camera1.png' 'icon-offset': [
// ], 'match',
// 'icon-src': ['get', 'iconSrc'], ['get', 'status'],
'icon-width': 40, 'ON',
'icon-height': 40 [0, 0],
'OFF',
[40, 0],
'checked',
[80, 0],
[120, 60]
]
} }
}) })
if (clickEvent && typeof clickEvent === 'function') { if (clickEvent && typeof clickEvent === 'function') {
@ -473,13 +478,9 @@ export default {
const feature = new Feature(new Point(fromLonLat(data.position))) const feature = new Feature(new Point(fromLonLat(data.position)))
feature.setId(data.id) feature.setId(data.id)
feature.customData = data.data feature.customData = data.data
const style = new Style() feature.setProperties({
style.setImage(new Icon({ status: data.status
anchor: data.image.anchor, })
crossOrigin: 'Anonymous',
src: data.image.src
}))
feature.setStyle(style)
layer.getSource().addFeature(feature) layer.getSource().addFeature(feature)
}, },

6
web/src/views/map/index.vue
View File

@ -246,6 +246,7 @@ export default {
id: data.gbId, id: data.gbId,
position: position, position: position,
data: data, data: data,
status: data.gbStatus,
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
src: this.getImageByChannel(data) src: this.getImageByChannel(data)
@ -290,6 +291,7 @@ export default {
let cameraData = { let cameraData = {
id: item.gbId, id: item.gbId,
position: position, position: position,
status: item.gbStatus,
data: item, data: item,
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
@ -465,6 +467,7 @@ export default {
id: channel.gbId, id: channel.gbId,
position: position, position: position,
data: channel, data: channel,
status: 'checked',
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
src: 'static/images/gis/camera1-red.png' src: 'static/images/gis/camera1-red.png'
@ -485,6 +488,7 @@ export default {
id: channel.gbId, id: channel.gbId,
position: [channel.gbLongitude, channel.gbLatitude], position: [channel.gbLongitude, channel.gbLatitude],
data: channel, data: channel,
status: channel.gbStatus,
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
src: this.getImageByChannel(channel) src: this.getImageByChannel(channel)
@ -506,6 +510,7 @@ export default {
id: channel.gbId, id: channel.gbId,
position: position, position: position,
data: channel, data: channel,
status: channel.gbStatus,
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
src: this.getImageByChannel(channel) src: this.getImageByChannel(channel)
@ -766,6 +771,7 @@ export default {
id: item.gbId, id: item.gbId,
position: position, position: position,
data: item, data: item,
status: item.gbStatus,
image: { image: {
anchor: [0.5, 1], anchor: [0.5, 1],
src: this.getImageByChannel(item) src: this.getImageByChannel(item)