Skip to content

C
crsf-ptvue
Commit e0c37900 authored by coffee's avatar coffee
Browse files
Options

tj

parent d0c7b867
Show whitespace changes
Inline Side-by-side
Showing with 521 additions and 99 deletions
src/pages/access/point/index.vue
View file @ e0c37900
...@@ -53,7 +53,11 @@ ...@@ -53,7 +53,11 @@
<div v-show="transformationSta==1"> <div v-show="transformationSta==1">
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24"> <el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" style="width: 100%;position: relative;" :style="{height:currentHeight-125+'px'}"></div> <div id="map" class="map" style="width: 100%;position: relative;" :style="{height:currentHeight-125+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -93,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector' ...@@ -93,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -181,6 +187,18 @@ export default { ...@@ -181,6 +187,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
this.imgurl = url this.imgurl = url
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -292,6 +310,35 @@ export default { ...@@ -292,6 +310,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
getPointStyle(src, name, zoom) { getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({ let style = new OlStyleStyle({
...@@ -301,15 +348,15 @@ export default { ...@@ -301,15 +348,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1138,4 +1185,12 @@ export default { ...@@ -1138,4 +1185,12 @@ export default {
left: 89%; left: 89%;
} }
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/monitor/point/index.vue
View file @ e0c37900
...@@ -53,8 +53,11 @@ ...@@ -53,8 +53,11 @@
<div v-show="transformationSta==1"> <div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24"> <el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-135+'px'}"></div> <div id="map" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-135+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -94,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector' ...@@ -94,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -182,6 +187,18 @@ export default { ...@@ -182,6 +187,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
this.imgurl = url this.imgurl = url
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -292,6 +309,35 @@ export default { ...@@ -292,6 +309,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
getPointStyle(src, name, zoom) { getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({ let style = new OlStyleStyle({
...@@ -301,15 +347,15 @@ export default { ...@@ -301,15 +347,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1066,4 +1112,12 @@ export default { ...@@ -1066,4 +1112,12 @@ export default {
left: 89%; left: 89%;
} }
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/ol/demo/index.vue
View file @ e0c37900
...@@ -63,7 +63,11 @@ ...@@ -63,7 +63,11 @@
<div v-show="transformationSta==1"> <div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight+'px'}" :span="24"> <el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" ref='map' style="width: 100%;position:relative;" :style="{height:currentHeight-60+'px'}"></div> <div id="map" class="map" ref='map' style="width: 100%;position:relative;" :style="{height:currentHeight-60+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -116,6 +120,7 @@ import OlStyleStyle from 'ol/style/Style' ...@@ -116,6 +120,7 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon' import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -236,6 +241,18 @@ export default { ...@@ -236,6 +241,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
this.resolutions = [] this.resolutions = []
let mapList = this.mapList let mapList = this.mapList
let mapsrcList = [] let mapsrcList = []
...@@ -405,16 +422,35 @@ export default { ...@@ -405,16 +422,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
// this.map.on('pointermove', function(e) { this.map.addEventListener('pointermove', function (evt) {
// console.log(that.map.dragging) let feature = evt.map.forEachFeatureAtPixel(evt.pixel,
// if(e.dragging) { function(feature) {
// return return feature
// } })
// let pixel = that.map.getEventPixel(e.originalEvent); //判断点击的坐标是否在当前图标上
// let hit = that.map.hasFeatureAtPixel(pixel); if (feature) {
// that.map.getTarget().style.cursor = hit ? 'pointer' : ''; let coordinate = feature.getGeometry().getCoordinates()
// }) let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
evt.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
mapClick(feature, item, flag) { mapClick(feature, item, flag) {
//默认样式 //默认样式
...@@ -473,15 +509,15 @@ export default { ...@@ -473,15 +509,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1602,4 +1638,12 @@ export default { ...@@ -1602,4 +1638,12 @@ export default {
.ol-overviewmap .ol-overviewmap-map { .ol-overviewmap .ol-overviewmap-map {
height: 110px !important; height: 110px !important;
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/patrol/spot/index.vue
View file @ e0c37900
...@@ -54,8 +54,11 @@ ...@@ -54,8 +54,11 @@
</div> </div>
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24"> <el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="map" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-135+'px'}"></div> <div id="map" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-135+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
...@@ -92,6 +95,8 @@ import OlSourceVector from 'ol/source/Vector' ...@@ -92,6 +95,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -199,6 +204,18 @@ export default { ...@@ -199,6 +204,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
this.imgurl = url this.imgurl = url
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -308,6 +325,35 @@ export default { ...@@ -308,6 +325,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
getPointStyle(src, name, zoom) { getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({ let style = new OlStyleStyle({
...@@ -317,15 +363,15 @@ export default { ...@@ -317,15 +363,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1495,4 +1541,12 @@ export default { ...@@ -1495,4 +1541,12 @@ export default {
left: 89%; left: 89%;
} }
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/police/point/index.vue
View file @ e0c37900
...@@ -67,8 +67,11 @@ ...@@ -67,8 +67,11 @@
<div v-show="transformationSta==1"> <div v-show="transformationSta==1">
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24"> <el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag"> <el-col class="resource-container" :style="obj" ref="drag">
<div id="policeMap" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-125+'px'}"></div> <div id="policeMap" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-125+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -108,6 +111,8 @@ import OlStyleStyle from 'ol/style/Style' ...@@ -108,6 +111,8 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString' import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon' import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style' import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
...@@ -211,6 +216,18 @@ export default { ...@@ -211,6 +216,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
this.imgurl = url this.imgurl = url
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -321,6 +338,35 @@ export default { ...@@ -321,6 +338,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
getPointStyle(src, name, zoom) { getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({ let style = new OlStyleStyle({
...@@ -330,15 +376,15 @@ export default { ...@@ -330,15 +376,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1357,4 +1403,12 @@ export default { ...@@ -1357,4 +1403,12 @@ export default {
left: 89%; left: 89%;
} }
} }
</style> #popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/routes/analysis/alarmAnalysis/index.vue
View file @ e0c37900
...@@ -79,7 +79,7 @@ el-container(style="padding:0px;" :style="{height:currentHeight+40+'px'}") ...@@ -79,7 +79,7 @@ el-container(style="padding:0px;" :style="{height:currentHeight+40+'px'}")
#alarmLevel.box_border #alarmLevel.box_border
el-row.my-echarts(:gutter="12" style='overflow: hidden;') el-row.my-echarts(:gutter="12" style='overflow: hidden;')
el-col.my-char-item(:span="6") el-col.my-char-item(:span="6")
div.chars-title() 设备告警统计 div.chars-title() 服务器告警统计
div.chars-box div.chars-box
#equipmentAlarm.box_border #equipmentAlarm.box_border
el-col.my-char-item(:span="12") el-col.my-char-item(:span="12")
...@@ -802,7 +802,7 @@ export default { ...@@ -802,7 +802,7 @@ export default {
}, },
series: [ series: [
{ {
name: '设备告警统计', name: '服务器告警统计',
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['50%', '38%'], center: ['50%', '38%'],
...@@ -858,7 +858,7 @@ export default { ...@@ -858,7 +858,7 @@ export default {
this.alarmBaseInfo = myCharts.getDataURL() this.alarmBaseInfo = myCharts.getDataURL()
}, },
exportHandle() { exportHandle() {
this.download(this.alarmBaseInfo, '设备告警统计') this.download(this.alarmBaseInfo, '服务器告警统计')
}, },
download(url, fileName) { download(url, fileName) {
let x = new XMLHttpRequest() let x = new XMLHttpRequest()
......
src/pages/sys/point/add-or-update.vue
View file @ e0c37900
...@@ -76,6 +76,8 @@ ...@@ -76,6 +76,8 @@
div(slot='title') div(slot='title')
span.title-bold 选择摄像头 span.title-bold 选择摄像头
div(id="mapDialog" style="width: 100%;height: 680px;position: relative;") div(id="mapDialog" style="width: 100%;height: 680px;position: relative;")
div.ol-popup(id="popup")
div#popup-content
span.dialog-footer(slot="footer") span.dialog-footer(slot="footer")
el-button(@click="closeC" type='primary' size='medium') 取 消 el-button(@click="closeC" type='primary' size='medium') 取 消
el-button(@click="submitCamera" size='medium' type="primary" v-prevent-re-click) 确 定 el-button(@click="submitCamera" size='medium' type="primary" v-prevent-re-click) 确 定
...@@ -104,6 +106,7 @@ import OlLayerVector from 'ol/layer/Vector' ...@@ -104,6 +106,7 @@ import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector' import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import Text from 'ol/style/Text' import Text from 'ol/style/Text'
...@@ -257,6 +260,18 @@ export default { ...@@ -257,6 +260,18 @@ export default {
}, },
methods: { methods: {
initMap (bean) { initMap (bean) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
if (this.mapDialog) { if (this.mapDialog) {
this.mapDialog.removeLayer(this.imgLayer) this.mapDialog.removeLayer(this.imgLayer)
this.mapDialog.removeLayer(this.vectorLayer) this.mapDialog.removeLayer(this.vectorLayer)
...@@ -316,6 +331,35 @@ export default { ...@@ -316,6 +331,35 @@ export default {
} }
} }
}) })
// 鼠标浮上去才显示name
this.mapDialog.addEventListener('pointermove', function (evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
evt.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
init (bean) { init (bean) {
this.dataForm = {} this.dataForm = {}
...@@ -972,15 +1016,15 @@ export default { ...@@ -972,15 +1016,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
} }
...@@ -1186,4 +1230,12 @@ export default { ...@@ -1186,4 +1230,12 @@ export default {
padding: 0; padding: 0;
} }
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/sys/point/index.vue
View file @ e0c37900
...@@ -47,7 +47,11 @@ ...@@ -47,7 +47,11 @@
div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)") div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)")
el-row(style="padding-bottom:15px;" ,:span="24" :style="{height:currentHeight-200+'px'}") el-row(style="padding-bottom:15px;" ,:span="24" :style="{height:currentHeight-200+'px'}")
el-col() el-col()
<div id="map" style="width: 100%;position: relative;" :style="{height:currentHeight-185+'px'}"></div> <div id="map" style="width: 100%;position: relative;" :style="{height:currentHeight-185+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
el-col() el-col()
// 弹窗, 新增 / 修改 // 弹窗, 新增 / 修改
...@@ -82,6 +86,8 @@ ...@@ -82,6 +86,8 @@
import OlSourceVector from 'ol/source/Vector' import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import Text from 'ol/style/Text' import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill' import Fill from 'ol/style/Fill'
...@@ -220,6 +226,18 @@ ...@@ -220,6 +226,18 @@
}, },
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -315,6 +333,35 @@ ...@@ -315,6 +333,35 @@
} }
} }
}) })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
openAddOrUpdate(item) { openAddOrUpdate(item) {
if (this.editable) { if (this.editable) {
...@@ -505,15 +552,15 @@ ...@@ -505,15 +552,15 @@
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1965,4 +2012,12 @@ ...@@ -1965,4 +2012,12 @@
.top_button { .top_button {
background: url(~@/assets/images/sysiconbg.png); background: url(~@/assets/images/sysiconbg.png);
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
src/pages/sys/region/index.vue
View file @ e0c37900
...@@ -25,8 +25,11 @@ ...@@ -25,8 +25,11 @@
el-button(type="primary" v-if="edirStatus" @click="saveClick" size="mini" style="float:left;margin-top:6px" v-prevent-re-click) 保存 el-button(type="primary" v-if="edirStatus" @click="saveClick" size="mini" style="float:left;margin-top:6px" v-prevent-re-click) 保存
el-main(style="width:82vw;user-select:none;padding:0;" v-loading="rightLoading") el-main(style="width:82vw;user-select:none;padding:0;" v-loading="rightLoading")
div(class="resource-container" v-show='isShow' ref="drag" style='width:100%') div(class="resource-container" v-show='isShow' ref="drag" style='width:100%')
<div id="map" style="width: 100%;position: relative;" :style="{height:currentHeight-145+'px'}"></div> <div id="map" style="width: 100%;position: relative;" :style="{height:currentHeight-145+'px'}">
<div id="popup" class="ol-popup">
<div id="popup-content" ></div>
</div>
</div>
//- div(@mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup" style="width:100%") //- div(@mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup" style="width:100%")
//- //- el-image.my_img(:src="imageSrc") //- //- el-image.my_img(:src="imageSrc")
//- img(style="pointer-events:none;width:100%;overflow: hidden;" :src="imageSrc") //- img(style="pointer-events:none;width:100%;overflow: hidden;" :src="imageSrc")
...@@ -67,6 +70,8 @@ import OlLayerVector from 'ol/layer/Vector' ...@@ -67,6 +70,8 @@ import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector' import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style' import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon' import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的 // 用来添加相关文字描述的
import Text from 'ol/style/Text' import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill' import Fill from 'ol/style/Fill'
...@@ -210,6 +215,18 @@ export default { ...@@ -210,6 +215,18 @@ export default {
methods: { methods: {
// 初始化地图 // 初始化地图
initMap(url) { initMap(url) {
let _this = this
let element = document.getElementById('popup')
let content = document.getElementById('popup-content')
if (!element || !content) {
return
}
let popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 40]
})
let mapList = this.mapList let mapList = this.mapList
this.imgurl = url this.imgurl = url
// 计算静态地图映射到地图上的范围 // 计算静态地图映射到地图上的范围
...@@ -336,6 +353,35 @@ export default { ...@@ -336,6 +353,35 @@ export default {
// // that.iconStyle = null // // that.iconStyle = null
// // } // // }
// }) // })
// 鼠标浮上去才显示name
this.map.addEventListener('pointermove', function (evt) {
let feature = that.map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature
})
//判断点击的坐标是否在当前图标上
if (feature) {
let coordinate = feature.getGeometry().getCoordinates()
let id = feature.id_
let infoText = ''
_this.list.forEach(item => {
if (item.id === id) {
infoText = '<span class="alarm-info">' + item.name + '</span>'
}
})
if (infoText) {
let infoHtml = '<code>' + infoText + '</code>'
content.innerHTML = infoHtml
element.style.display = 'block'
popup.setPosition(coordinate)
that.map.addOverlay(popup)
} else {
element.style.display = 'none'
}
} else {
element.style.display = 'none'
}
})
}, },
getPointStyle(src, name, zoom) { getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({ let style = new OlStyleStyle({
...@@ -345,15 +391,15 @@ export default { ...@@ -345,15 +391,15 @@ export default {
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src) src: require('@/assets/images/' + src)
}), }),
text: new Text({ // text: new Text({
text: name, // 添加文字描述 // text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 // font: '14px font-size', // 设置字体大小
fill: new Fill({ // fill: new Fill({
// 设置字体颜色 // // 设置字体颜色
color: 'black' // color: 'black'
}), // }),
offsetY: 30 // 设置文字偏移量 // offsetY: 30 // 设置文字偏移量
}) // })
}) })
return style return style
}, },
...@@ -1151,4 +1197,12 @@ export default { ...@@ -1151,4 +1197,12 @@ export default {
} }
} }
} }
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment