vue 使用openlayers加载图片,并实现图片上标点,点击弹窗

vue 使用openlayers加载图片,并实现图片上标点,点击弹窗

• 安装

npm install ol@7.5.1 --save

• vue组件

<template>
<div class="generalized">
<div id="map" ref="myMap" style="width: 100%; height: 100%"></div>

<div v-if="isShowPopup" class="popup" :style="{ left: left + 'px', top: top + 'px' }">
<div class="p-header">
{{ selectRow.name }}
<div class="close" @click="isShowPopup = false">x</div>
</div>
<div class="p-content">
<div class="p-row">
<span>点位信息1:</span>
<span>1111</span>
</div>
<div class="p-row">
<span>点位信息2:</span>
<span>2222</span>
</div>
</div>
</div>

</div>
</template>
<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Point } from 'ol/geom'
import * as olInteraction from 'ol/interaction'
import DragRotateAndZoom from 'ol/interaction/DragRotateAndZoom'
import ImageLayer from 'ol/layer/Image'
import { ImageStatic } from 'ol/source'
import { getCenter } from 'ol/extent'
import { Projection } from 'ol/proj'
import { Icon, Style, Text } from 'ol/style'
import Fill from 'ol/style/Fill'
import Feature from 'ol/Feature'
import Stroke from 'ol/style/Stroke'
//导入相关模块
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { TileWMS, Vector as VectorSource } from 'ol/source'
export default {
data() {
return {
map: null, // map地图
imgy: '',
imgx: '',
// 图标管理器
iconLayer: '',
// 图标集合
featureList: [],
// 点位列表
pointsList: [
{
x: 157,
y: 616,
zIndex: 2,
icon: require('../../assets/marker1.png'),
name: '点位1',
pointId: 1,
alarmFlag: false,
},
{
x: 157,
y: 686,
zIndex: 2,
icon: require('../../assets/marker2.png'),
name: '点位2',
pointId: 2,
alarmFlag: false,
},
],
left: 0,
top: 0,
isShowPopup: false,
selectRow: {},
}
},
mounted() {
this.initMap()
},
methods: {
/**
* 初始化地图
*/
initMap() {
// 图片的宽高
this.imgy = 992
this.imgx = 3557
let extent = [0, 0,  this.imgx, this.imgy]
let projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent,
})
this.map = new Map({
//地图容器ID
target: 'map',
interactions: olInteraction.defaults().extend([new DragRotateAndZoom()]),
//引入地图
layers: [
new ImageLayer({
source: new ImageStatic({
url: require('@/assets/要加载的图片.jpg'),
projection: projection,
imageExtent: extent,
}),
}),
],
view: new View({
projection: projection,
center: [this.imgx * 0.5, this.imgy * 0.6],
// 当前缩放倍数
zoom: 2.5,
// 最大缩放倍数
maxZoom: 7,
// 最小缩放倍数
minZoom: 1,
}),
})
/**
* 添加图标
*/
this.pointsList.forEach((item) => {
this.addDevicePoint(item)
})
const vectorSource = new VectorSource()
this.iconLayer = new VectorLayer({
source: vectorSource,
})
// 将图标数组添加到图层中
this.iconLayer.getSource().addFeatures(this.featureList)
// 添加图层
this.map.addLayer(this.iconLayer)
this.mapClick()
},
// 添加图标
addDevicePoint(item) {
// 设置图片位置
const iconFeature = new Feature({
geometry: new Point([item.x, item.y]),
})
// 设置样式，这里使用图片
iconFeature.setStyle([
new Style({
image: new Icon({
// 指定锚 x 值的单位。的值'fraction'表示 x 值是图标的一部分。的值'pixels'表示以像素为单位的 x 值。
anchorXUnits: 'fraction',
// 左下角为原点
anchorOrigin: 'bottom-left',
anchorYUnits: 'fraction',
anchor: [0.5, 0],
src: item.icon,
scale: 0.6,
}),
zIndex: item.zIndex,
}),
new Style({
text: new Text({
text: '',
font: '14px Microsoft YaHei',
offsetY: -15,
offsetX: 15,
padding: [5, 10, 5, 15],
textAlign: 'left',
backgroundFill: new Fill({
color: item.alarmFlag ? 'rgba(249, 88, 87, 0.5)' : 'rgba(0,111,255,0.5)', //提示背景色
}),
fill: new Fill({
color: '#fff',
}),
}),
zIndex: item.zIndex,
}),
])
// 给图层设置设备图标name和id属性，用作独立 区分
iconFeature.name = item.name
iconFeature.id_ = item.pointId
// 将图片Feature添加到Source
this.featureList.push(iconFeature)
},
// 监听地图点击事件
mapClick() {
var _this = this
this.map.on('singleclick', (evt) => {
console.log(evt.coordinate, evt)
this.left = evt.pixel_[0]
this.top = evt.pixel_[1]
var feature = _this.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature
})
if (feature) {
var id_ = feature.id_
this.pointsList.forEach((element) => {
if (element.pointId == id_) {
this.selectRow = element
}
})
console.log(id_)
} else {
this.selectRow = {}
}
this.isShowPopup = feature ? true : false
console.log('feature:', feature)
})
},
},
}
</script>
<style lang="less" scoped>
.generalized {
width: 100%;
height: 100%;
position: relative;
}
.popup {
position: absolute;
padding: 5px;
left: 0px;
top: 0px;
width: 140px;
height: auto;
background: #2a76d8;
color: #fff;
border-radius: 5px;
.p-header {
font-size: 14px;
padding: 5px 5px;
position: relative;
.close {
position: absolute;
right: -5px;
top: -5px;
font-size: 12px;
padding: 0px 5px;
color: #fff;
cursor: pointer;
}
}
.p-content {
background: #fff;
padding: 5px;
border-radius: 5px;
}
.p-row {
font-size: 12px;
color: #000;
display: flex;
justify-content: space-between;
}
}
.red {
background: #ff1b1b;
}
</style>