<template>
<div class="mapCont">
<div id="map">
<div id="popup" ref="popup" class="ol-popup" v-show="vehiclePointInfo">
<div id="popup-closer" class="ol-popup-closer" @click="closePopup()"></div>
<div id="popup-content"> {{vehiclePointInfo.name}}</div>
</div>
</div>
</div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";
// import ImageWMS from "ol/source/ImageWMS";
import { fromLonLat } from 'ol/proj';
import Point from 'ol/geom/Point';
import Overlay from 'ol/Overlay'
import Feature from 'ol/Feature';
import {Icon, Style} from 'ol/style';
import {Modify} from 'ol/interaction';
import {Vector as VectorLayer} from 'ol/layer';
import { Vector as SourceVector } from 'ol/source'
export default {
data() {
return {
map: null,
target:null,
infoWindow: undefined,
sourceVector: new SourceVector({}),
markerList:[],
vehiclePointInfo:{},
listData:[
{
'id':'4545',
'name':'川A45235',
'selected':false,
'longitude':'104.065681',
'latitude':'30.653442'
},
{
'id':'42545',
'name':'川W45S44',
'selected':false,
'longitude':'104.088691',
'latitude':'30.664442'
}
]
};
},
created(){},
methods: {
init() {
const format = 'image/png';
const TileWMSLayer = new TileLayer({
source: new TileWMS({
url: "你的后台给你的地图地址",
// Layers需要指定要显示的图层名
params: {
'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"STYLES": '',
"LAYERS": 'osm:osm',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: -20037508.342789244 + "," + -20048966.1040146
}
})
})
/* const imageLayer = new TileLayer({
source: new ImageWMS({
ratio: 1,
url: process.env.VUE_APP_MAP_BASE_URL + "/geoserver/osm/wms",
params: {
'FORMAT': format,
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": 'osm:osm',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});*/
const diyMonitorMarkerLayer = new VectorLayer({
source: this.sourceVector
});
const target = document.getElementById('map');
this.target = target;
this.map = new Map({
layers: [TileWMSLayer,diyMonitorMarkerLayer],
target: target,
view: new View({
projection: "EPSG:4326",
center: [104.065681, 30.653442],
zoom: 12,
maxZoom: 18,
minZoom: 8
})
});
// this.focusIcon(this.sourceVector,diyMonitorMarkerLayer,target) // 鼠标移动到icon上 聚焦点展示
const popup = document.getElementById('popup')
if (!this.infoWindow) {
this.infoWindow = new Overlay({
id: 'infoWindow',
element: popup,
stopEvent: true,
insertFirst: true,
offset: [0, 0], // 气泡离icon标点的位置
autoPan: false,
className: 'overlay-popup'
})
}
},
// 初始化icon图标
createPointIcon (vehicleList) {
const markFeatures = [];
const markerList = [];
vehicleList.forEach(vehicle => {
const marker = this.createOverlay(vehicle);
const iconStyle = new Style({
image: new Icon({
src: '/img/car2.png',
scale: 0.8
})
});
// vector
const iconFeature = new Feature({
geometry: new Point([vehicle.longitude, vehicle.latitude]),
info: vehicle,
tooltip: marker
});
iconFeature.setStyle(iconStyle);
markFeatures.push(iconFeature);
markerList.push(marker)
});
this.sourceVector.addFeatures(markFeatures);
markerList.forEach(tooltip => {
this.map.addOverlay(tooltip) //*在地图上展示标签-addOverlay 全局保存到markerList 对应的-removeOverlay
});
this.markerList = markerList;
},
//点击标签 - 弹窗展示
createOverlay (vehicle) {
const element = document.createElement('div');
element.innerHTML = vehicle.name;
element.className = 'tooltip-Unline';
const that = this;
// that.map.getView().setCenter(fromLonLat([vehicle.longitude, Number(vehicle.latitude) - 0.006]))
// 更据selectedKeys是否有值，来判断是否点击tree name来自动弹框
element.addEventListener('click', function () {
// 获取当前icon弹框详情
that.vehiclePointInfo = vehicle;
that.map.removeOverlay(that.infoWindow);
that.map.addOverlay(that.infoWindow);
that.infoWindow.setPosition([vehicle.longitude, vehicle.latitude])
})
return new Overlay({
id: vehicle.id,
insertFirst: false,
element: element,
offset: [8, -12],
positioning: 'right-top',
position: [vehicle.longitude, vehicle.latitude]
})
},
// 鼠标移动到icon上 聚焦点展示
focusIcon (vectorSource,vectorLayer,target) {
const vm = this
const modify = new Modify({
hitDetection: vectorLayer,
source: vectorSource,
});
modify.on(['modifystart', 'modifyend'], function (evt) {
target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
});
const overlaySource = modify.getOverlay().getSource();
overlaySource.on(['addfeature', 'removefeature'], function (evt) {
target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
});
vm.map.addInteraction(modify);
},
// 气泡关闭
closePopup () {
this.infoWindow.setPosition(undefined)
this.map.removeOverlay(this.infoWindow)
this.$emit('closePopup', this.vehiclePointInfo)
},
},
mounted() {
this.init(); // 地图加载地图
this.createPointIcon(this.listData) // icon初始化
}
};
</script>
<style lang="less" scoped>
.mapCont{
height: 100%;
width: 48vw;
#map{
height: 100%;
width: 100%;
}
}
/deep/ .tooltip-Unline {
background: #fc6a3e!important;
padding: 0 8px;
color: #000000!important;
border-radius: 2px;
cursor: pointer;
margin-left: 2px;
z-index: 9999999;
}
/deep/ .overlay-popup {
z-index: 1000;
}
.ol-popup {
position: absolute;
z-index: 1000;
color: #001656;
background-color: #e8e8f7;
opacity: 1;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 24px;
left: -50px;
min-width: 200px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: #eeeeee;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
<style lang="less">
.ol-zoom {
top: auto;
bottom: .5em;
}
.ol-control button {
display: inline-block !important;
}
.ol-full-screen {
top: auto;
bottom: .5em;
}
</style>
