vue+openlayers，初始化openlayers地图，实现鼠标移入、点击、右键等事件

主要功能：初始化openlayers地图，实现鼠标移入、点击、右键等事件，以及获取当前图标的feature，将当前图标信息以弹框方式进行展示；地图上展示拾取到的经纬度
前端使用的是vue技术栈
步骤一：将地图的公用配置项单独提出成一个js文件，方便打包后进行修改，代码如下

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我提取到了公用全局变量里，内容和上边是一样的
          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地图

<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: '&nbsp;',
        });
        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里内容
            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);
        //设置地图缩放监听
        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出去，方便调用组件的页面单独使用
        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>