主要功能：初始化openlayers地圖，實現(xiàn)鼠標移入、點擊、右鍵等事件，以及獲取當前圖標的feature，將當前圖標信息以彈框方式進行展示；地圖上展示拾取到的經(jīng)緯度
前端使用的是vue技術(shù)棧
步驟一：將地圖的公用配置項單獨提出成一個js文件，方便打包后進行修改，代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-505244.html
import TileLayer from 'ol/layer/Tile'
import TileArcGISRest from 'ol/source/TileArcGISRest'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
//0表示部署的離線瓦片地圖，1表示OSM,2表示使用Arcgis在線午夜藍地圖服務
let streetMap=function(){
let mapLayer = null
switch(mapType){
case 0:
mapLayer=new TileLayer({
source: new XYZ({
// url:'http://你的地圖服務器地址:8080/geowebcache/service/wmts?tilematrix=EPSG%3A3857_google_rs%3A{z}&layer=google_rs&style=raster&tilerow={y}&tilecol={x}&tilematrixset=EPSG%3A3857_google_rs&format=image%2Fjpeg&service=WMTS&version=1.0.0&request=GetTile'
//mapUrl我提取到了公用全局變量里，內(nèi)容和上邊是一樣的
url: mapUrl
})
})
break
case 1:
mapLayer=new TileLayer({
source: new OSM()
})
break
case 2:
mapLayer=new TileLayer({
source:new TileArcGISRest({
url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
})
})
break
}
return [mapLayer]
}
let mapConfig = {
x: 115.8906,
y: 19.1597,
zoom: 6,//初始地圖級別
streetMap: streetMap
}
export default mapConfig
步驟二：初始化openlayers地圖文章來源地址http://www.zghlxwxcb.cn/news/detail-505244.html
<template>
<div class="map-view-wrapper">
<div class='olMap' ref='rootMap'></div>
<div id="mouse-position"></div>
<div id="popup" class="ol-popup">
<div class="ol-popup-title">
<span>{{popupText}}</span>
</div>
</div>
</div>
</template>
<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import {ScaleLine} from 'ol/control';
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';
import {defaults as defaultControls} from 'ol/control';
import mapConfig from "../../../config/mapconfig";
import Overlay from "ol/Overlay";
import {Icon, Style} from "ol/style";
export default {
name: 'MapView',
components:{},
props:{
},
watch:{
},
data () {
return {
map: null,
overlay:null,
popupCoordinates: "",
popupText: "",
moveFeature:null
}
},
mounted () {
this.initMap();
},
methods: {
initMap(){
let mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' ',
});
let mapContainer = this.$refs.rootMap;
this.map = new Map({
target: mapContainer,
controls: defaultControls().extend([mousePositionControl]),
layers: mapConfig.streetMap(),
view: new View({
projection: 'EPSG:4326',
//center: [113.960623, 22.546082],
center: [mapConfig.x, mapConfig.y],//讀取上邊mapConfig.js里內(nèi)容
zoom: mapConfig.zoom,
// minZoom:4,
maxZoom: 6,
})
})
//添加比例尺 //單位有5種：degrees imperial us nautical metric
this.map.addControl(new ScaleLine({units: 'metric'}));
let me = this;
//鼠標移入點是，展示的彈框
this.overlay = new Overlay({
element: document.getElementById('popup'),
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
this.map.addOverlay(this.overlay);
//設(shè)置地圖縮放監(jiān)聽
this.map.on("moveend", function (e) {
let zoom = me.map.getView().getZoom();
// console.log("zoom",zoom);
});
//鼠標移動
this.map.on('pointermove',function (e){
let feature = me.map.forEachFeatureAtPixel(e.pixel,function (feature,layer){
return feature;
})
if(feature){
if(feature.get("type")){
let types = feature.get("type").split("&");
if(!me.isEmpty(types[1])){
me.popupText = types[1];
me.popupCoordinates = feature.getGeometry().flatCoordinates;
// me.overlay.setPosition(me.popupCoordinates);
me.overlay.setPosition([parseFloat(me.popupCoordinates[0])+0.45,parseFloat(me.popupCoordinates[1])]);
}
}
me.map.getTargetElement().style.cursor="pointer";
}else{
//me.moveFeature && me.moveFeature.setStyle(me.setMapMoveStyle('out'));
me.map.getTargetElement().style.cursor="auto";
me.popupCoordinates && me.overlay.setPosition(undefined);
me.popupCoordinates = null;
}
})
//地圖點擊
me.map.on('click',function (e){
let feature = me.map.forEachFeatureAtPixel(e.pixel,function (feature,layer){
return feature;
})
if(feature){
me.$emit('click-icon',feature)
}
})
//右鍵事件
me.map.on('contextmenu',function (e){
e.preventDefault();
let feature = me.map.forEachFeatureAtPixel(e.pixel,function (feature,layer){
return feature;
})
if(feature){
// console.log("右擊地圖feature",feature);
me.moveFeature = feature;
feature.setStyle(me.setMapMoveStyle('in'));
//拋出右擊點擊
me.$emit('map-contextmenu',feature);
}
})
//因為我將地圖單獨封裝成了組件，所以這里將map emit出去，方便調(diào)用組件的頁面單獨使用
setTimeout(function () {
me.$emit('out-map',me.map)
},100)
},
//修改鼠標移入、移出的樣式
setMapMoveStyle(str){
let src = str === 'in' ? "./static/images/port-icon-select.png" : "./static/images/port-icon-new.png";
let iconStyle = new Style({
image: new Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: src,
})
});
return iconStyle;
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.map-view-wrapper{
width:100%;
height: 100%;
position: relative;
.olMap{
width:100%;
height: calc(100%);
}
.ol-popup{
background: rgba(32,100,176,.8);
color: #fff;
font-size: 14px;
padding: 2px 8px;
border: 1px solid #22CEFF;
border-radius: 6px;
}
#mouse-position{
position: absolute;
bottom: 5px;
right:20px;
}
}
</style>
到了這里，關(guān)于vue+openlayers，初始化openlayers地圖，實現(xiàn)鼠標移入、點擊、右鍵等事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
