vue+ openlayers + GeoServer 地图初始化 标点加弹窗看详情

<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>