OpenLayers简单地图标记

html代码

<template>
  <div>
    <div id="map" style="width: 100%; height: 500px;" />
    <div ref="popup" class="ol-popup">
      <div ref="content" />
    </div>
  </div>
</template>

js：导入所需api

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Point, LineString } from 'ol/geom'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource, XYZ } from 'ol/source'
import { fromLonLat } from 'ol/proj'
import Feature from 'ol/Feature'
import { Style, Circle, Fill, Stroke, Text, Icon } from 'ol/style'

data

data() {
    return {
      // 地图坐标
      list: [{
          map: [118.1802200000, 39.6304500000],
          time: '2020-1-10',
          origin: '陕西省'
        }, {
          map: [118.1902200000, 39.5304500000],
          text: '2020-4-2',
          origin: '山西市 山西市'
        }, {
          map: [118.1702200007, 39.6304500000],
          text: '2020-5-4',
          origin: '陕西省 陕西省'
        }
        ],
      // 保存坐标
      feature: [],
      // 连线
      geometry: []
    }

mounted：

// 展示坐标
    this.showCoordinate()
    // 加载瓦片，使用XYZ格式
    const raster = new TileLayer({
      source: new XYZ({
        attributions: 'Tiles © <a href=" ' +
            'rest/services/World_Topo_Map/MapServer">ArcGIS</a >',
        url: 'http://192.168.31.85:9988/map/Tiles_BIGEMAP/{z}/{x}/{y}.png'
      })
    })
    // 标记-点
    const source = new VectorSource({ features: this.feature })
    // 标记点-层openlayer就是由一个一个的层形成的
    const vector = new VectorLayer({
      source: source
    })
    // 路径-数据源
    const layerSource = new VectorSource()
    // 路径-具有几何和其他属性属性的地理要素的矢量对象
    const feature = new Feature({
      geometry: new LineString(this.geometry)
    })
    layerSource.addFeature(feature)
    // 标记路线-层openlayer就是由一个一个的层形成的
    const layer = new VectorLayer({
      source: layerSource,
      style: this.styleFunction(feature)
    })
    // 实例化地图
    new Map({
      // 让id为map的div作为地图的容器
      target: 'map',
      // 设置地图图层
      layers: [raster, vector, layer],
      // 设置显示地图的视图
      view: new View({
        center: fromLonLat([118.1802200000, 39.6304500000]), // 地图中心点坐标
        zoom: 13 // 地图缩放
      })
    })

methods

// 展示坐标信息
    showCoordinate() {
      this.list.forEach((res, index) => {
        this.geometry.push(fromLonLat(res.map))
        // 获取所有坐标
        this.feature.push(new Feature({
          geometry: new Point(fromLonLat(res.map))
        }))
        // 给每个坐标添加样式
        this.feature[index].setStyle(new Style({
          image: new Circle({
            radius: 4,
            fill: new Fill({
              color: '#fff'
            }),
            stroke: new Stroke({ color: '#2D8CF0', width: 5 })
          }),
          text: new Text({
            text: `${res.text} ${res.origin}`,
            font: '12px PingFangSC-Regular,PingFang SC',
            textAlign: 'end',
            textBaseline: 'top',
            offsetX: '10',
            offsetY: '5',
            backgroundFill: new Fill({
              color: '#fff'
            })
          })
        }))
      })
    },
    styleFunction(feature) {
      // 线段样式
      const styles = [        new Style({          stroke: new Stroke({            lineDash: [1, 3, 5],
            width: 1,
            color: '#2D8CF0'
          })
        })
      ]
      const geometry = feature.getGeometry()
      geometry.forEachSegment(function(start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        console.log(end)
        var rotation = Math.atan2(dy, dx)
        styles.push(new Style({
          geometry: new Point(end),
          image: new Icon({
            src: '@/assets/image/path.png',
            anchor: [1, 0.5],
            rotateWithView: true,
            rotation: -rotation
          })
        }))
      })
      return styles
    }
  }

css

<style lang="scss" scoped>
.map {
  width: 100%;
  height:400px;
}
.ol-popup > span{
  color: blue;
  margin-right: 10px;
}
</style>