Openlayers 定位，添加自定义图标，点击图标弹框

之前已经把地图展示出来，现在可以在地图上做相关操作。

首先定义一个位置图层,这样可以动态操作

import Feature from 'ol/Feature'

import {Vector as VectorLayer} from 'ol/layer'

import GeoJSON from 'ol/format/GeoJSON'

import VectorSource from 'ol/source/Vector'

import Point from 'ol/geom/Point'

import { Style, Icon, Stroke } from 'ol/style'

 

  data () {
    return {
      positionLayer: null
    }
  }

 

这里只添加了一个位置图标, 通过传入坐标位置，就可以在该位置加载出图标，

    // 位置图标显示
    positionIcon (center) {
      var iconFeature = new Feature({
        geometry: new Point(center),
        name: '当前位置',
        population: 4000,
        rainfall: 500
      })
      var iconStyle = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          scale: 0.4,
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: '/static/images/dingwei.png'
        })
      })
      iconFeature.setStyle(iconStyle)
      var vectorSource = new VectorSource({
        features: [iconFeature]
      })
      this.positionLayer = new VectorLayer({
        source: vectorSource
      })

      this.map.addLayer(this.positionLayer)
    }

效果图

 

 

 如需要定位到指定坐标，则使用OpenLayers的animate方法

    // center 坐标数组
    setPosition (center) {
      this.view.animate({
        center: center,
        duration: 1500
      })
    }

点击坐标弹出框查看信息，需要加弹出框

  <div class="main">
    <div id="map" class="map" ></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <el-button type="primary" @click="positionIcon([104.089175, 30.650451])">定位</el-button>
  </div>

弹框css样式
<style>
  .map {
    width: 100%;
    height: 100vh;
  }
  .main {
    position: relative;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
  }
  .loading p {
    width: 100px;
    margin: 50% auto 0;
  }
  .ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .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: white;
    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>

 

弹框的js我定义了一个方法，在地图加载完成过后就调用该方法

    popup () {
      let _this = this
      var container = document.getElementById('popup')
      var content = document.getElementById('popup-content')
      var closer = document.getElementById('popup-closer')
      _this.popupLayer = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      closer.onclick = function () {
        _this.popupLayer.setPosition(undefined)
        closer.blur()
        return false
      }
      _this.map.addOverlay(_this.popupLayer)
      // display popup on click
      _this.map.on('singleclick', function (evt) {
        var coordinate = evt.coordinate
        var hdms = toStringHDMS(toLonLat(coordinate))
        console.log('coordinate', coordinate)
        content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'
        var feature = _this.map.forEachFeatureAtPixel(evt.pixel,
          function (feature) {
            return feature
          })
        if (feature) {
          console.log('feature.values_', feature.values_)
          var coordinates = feature.getGeometry().getCoordinates()
          _this.popupLayer.setPosition(coordinates)
        }
      })
    }

效果图