Skip to content

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

tj

parent d0c7b867
Hide 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 @@
<div v-show="transformationSta==1">
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<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-row>
</div>
......@@ -93,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -181,6 +187,18 @@ export default {
methods: {
// 初始化地图
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
this.imgurl = url
// 计算静态地图映射到地图上的范围
......@@ -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) {
let style = new OlStyleStyle({
......@@ -301,15 +348,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1138,4 +1185,12 @@ export default {
left: 89%;
}
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/monitor/point/index.vue
View file @ e0c37900
......@@ -53,8 +53,11 @@
<div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<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-row>
</div>
......@@ -94,6 +97,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -182,6 +187,18 @@ export default {
methods: {
// 初始化地图
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
this.imgurl = url
// 计算静态地图映射到地图上的范围
......@@ -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) {
let style = new OlStyleStyle({
......@@ -301,15 +347,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1066,4 +1112,12 @@ export default {
left: 89%;
}
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/ol/demo/index.vue
View file @ e0c37900
......@@ -63,7 +63,11 @@
<div v-show="transformationSta==1">
<el-row style="padding-bottom:15px;background:#fff;" :style="{height:currentHeight+'px'}" :span="24">
<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-row>
</div>
......@@ -116,6 +120,7 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -236,6 +241,18 @@ export default {
methods: {
// 初始化地图
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 = []
let mapList = this.mapList
let mapsrcList = []
......@@ -405,16 +422,35 @@ export default {
}
}
})
// this.map.on('pointermove', function(e) {
// console.log(that.map.dragging)
// if(e.dragging) {
// return
// }
// let pixel = that.map.getEventPixel(e.originalEvent);
// let hit = that.map.hasFeatureAtPixel(pixel);
// that.map.getTarget().style.cursor = hit ? 'pointer' : '';
// })
// 鼠标浮上去才显示name
this.map.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'
}
})
},
mapClick(feature, item, flag) {
//默认样式
......@@ -473,15 +509,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1602,4 +1638,12 @@ export default {
.ol-overviewmap .ol-overviewmap-map {
height: 110px !important;
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/patrol/spot/index.vue
View file @ e0c37900
......@@ -54,8 +54,11 @@
</div>
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<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-row>
</el-card>
......@@ -92,6 +95,8 @@ import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -199,6 +204,18 @@ export default {
methods: {
// 初始化地图
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
this.imgurl = url
// 计算静态地图映射到地图上的范围
......@@ -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) {
let style = new OlStyleStyle({
......@@ -317,15 +363,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1495,4 +1541,12 @@ export default {
left: 89%;
}
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/police/point/index.vue
View file @ e0c37900
......@@ -67,8 +67,11 @@
<div v-show="transformationSta==1">
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<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-row>
</div>
......@@ -108,6 +111,8 @@ import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
......@@ -209,8 +214,20 @@ export default {
this.initTreeStationMap()
},
methods: {
// 初始化地图
// 初始化地图
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
this.imgurl = url
// 计算静态地图映射到地图上的范围
......@@ -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) {
let style = new OlStyleStyle({
......@@ -330,15 +376,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1357,4 +1403,12 @@ export default {
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'}")
#alarmLevel.box_border
el-row.my-echarts(:gutter="12" style='overflow: hidden;')
el-col.my-char-item(:span="6")
div.chars-title() 设备告警统计
div.chars-title() 服务器告警统计
div.chars-box
#equipmentAlarm.box_border
el-col.my-char-item(:span="12")
......@@ -802,7 +802,7 @@ export default {
},
series: [
{
name: '设备告警统计',
name: '服务器告警统计',
type: 'pie',
radius: '55%',
center: ['50%', '38%'],
......@@ -858,7 +858,7 @@ export default {
this.alarmBaseInfo = myCharts.getDataURL()
},
exportHandle() {
this.download(this.alarmBaseInfo, '设备告警统计')
this.download(this.alarmBaseInfo, '服务器告警统计')
},
download(url, fileName) {
let x = new XMLHttpRequest()
......
src/pages/sys/point/add-or-update.vue
View file @ e0c37900
......@@ -76,6 +76,8 @@
div(slot='title')
span.title-bold 选择摄像头
div(id="mapDialog" style="width: 100%;height: 680px;position: relative;")
div.ol-popup(id="popup")
div#popup-content
span.dialog-footer(slot="footer")
el-button(@click="closeC" type='primary' size='medium') 取 消
el-button(@click="submitCamera" size='medium' type="primary" v-prevent-re-click) 确 定
......@@ -104,6 +106,7 @@ import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
......@@ -257,6 +260,18 @@ export default {
},
methods: {
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) {
this.mapDialog.removeLayer(this.imgLayer)
this.mapDialog.removeLayer(this.vectorLayer)
......@@ -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) {
this.dataForm = {}
......@@ -972,15 +1016,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
}
......@@ -1186,4 +1230,12 @@ export default {
padding: 0;
}
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/sys/point/index.vue
View file @ e0c37900
......@@ -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)")
el-row(style="padding-bottom:15px;" ,:span="24" :style="{height:currentHeight-200+'px'}")
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()
// 弹窗, 新增 / 修改
......@@ -82,6 +86,8 @@
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
......@@ -220,6 +226,18 @@
},
// 初始化地图
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
// 计算静态地图映射到地图上的范围
......@@ -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) {
if (this.editable) {
......@@ -505,15 +552,15 @@
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1965,4 +2012,12 @@
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</style>
src/pages/sys/region/index.vue
View file @ e0c37900
......@@ -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-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 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%")
//- //- el-image.my_img(:src="imageSrc")
//- img(style="pointer-events:none;width:100%;overflow: hidden;" :src="imageSrc")
......@@ -67,6 +70,8 @@ import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Overlay from 'ol/Overlay'
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
......@@ -208,8 +213,20 @@ export default {
this.epPatrolPointList()
},
methods: {
// 初始化地图
// 初始化地图
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
this.imgurl = url
// 计算静态地图映射到地图上的范围
......@@ -336,6 +353,35 @@ export default {
// // 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) {
let style = new OlStyleStyle({
......@@ -345,15 +391,15 @@ export default {
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
// text: new Text({
// text: name, // 添加文字描述
// font: '14px font-size', // 设置字体大小
// fill: new Fill({
// // 设置字体颜色
// color: 'black'
// }),
// offsetY: 30 // 设置文字偏移量
// })
})
return style
},
......@@ -1151,4 +1197,12 @@ export default {
}
}
}
#popup-content{
// height: 20px;
color: blue;
font-weight: bold;
text-align: center;
background: #fff;
padding:2px 5px;
}
</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