vue中使用openlayers离线地图添加标点（二）

接上一篇初始化地图文章

很多时候我们不只是需要单纯的看地图，那就太没意思了，当有标点位需求的时候呢就可以往下看啦。

1、需要引入标点所需的方法

这里替换上篇文章的引入即可

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

import { onMounted, reactive, ref } from 'vue'

2、然后就可以创建标点方法啦

这里是 vue3 setup 的写法，vue2 可以修改

// 添加点位
const addLayer = (v) => {
  const layer = new VectorLayer({
    source: new VectorSource()
  })
  // 添加图层
  map.value.addLayer(layer)
  // 创建 feature 坐标信息
  const feature = new Feature({
    // 经纬度转换成坐标信息
    geometry: new Point(fromLonLat(v.long)),
    // 可以带别的参数，key 可以随便写，不冲突就行，这里将所有的参数都放进来，供后续使用
    ...v
  })
  feature.setStyle(
    new Style({
      // 标点的图片，如果要标不同类型的点，这个图片可以判断加
      image: new Icon({
        src: require('../assets/people_mark.png')
      }),
      // 标点的文字
      text: new Text({
        // 文字
        text: v.name,
        // 文字样式
        fill: new Fill({
          color: 'red'
        }),
        font: '20px Calibri',
        // 偏移量
        offsetY: 20
      })
    })
  )
  // 将 feature 坐标信息添加在地图上
  layer.getSource().addFeatures([feature])
}

3、在初始化地图之后就可以调用添加标点的方法

这里同样也是 vue3 setup 的写法，vue2 可以修改

onMounted(() => {
  // 初始化地图
  init()
  // 创建点位数组
  const peoples = [
    {
      name: '张三',
      title: '化工大院',
      long: [108.93311, 34.272099]
    },
    {
      name: '李四',
      title: '东仪小区',
      long: [108.936751, 34.209511]
    },
    {
      name: '王五',
      title: '紫郡长安',
      long: [108.937921, 34.189151]
    }
  ]
  // 循环将每个人都添加在地图上
  peoples.forEach((v) => {
    addLayer(v)
  })
})

4、此时点就已经标在地图上啦，看看效果

5、完整代码

<template>
  <div id="map" />
</template>

<script setup>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature } from 'ol'
import { Style, Fill, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { fromLonLat } from 'ol/proj'

import { onMounted, reactive, ref } from 'vue'

const mapView = reactive({
  center: fromLonLat([108.939062, 34.374741]), // 地图中心点
  zoom: 11, // 初始缩放级别
  minZoom: 10, // 最小缩放级别
  maxZoom: 17 // 最大缩放级别
})
let map = ref(null)

// 初始化地图
const init = () => {
  const tileLayer = new TileLayer({
    source: new XYZ({
      // 此处瓦片地址和 vue2 中的一样，可在本地测
      url: 'http://127.0.0.1:9098/arcgis/{z}/{x}/{y}.png'
    })
  })
  map.value = new Map({
    layers: [tileLayer],
    view: new View(mapView),
    target: 'map'
  })
}
// 添加点位
const addLayer = (v) => {
  const layer = new VectorLayer({
    source: new VectorSource()
  })
  // 添加图层
  map.value.addLayer(layer)
  // 创建 feature 坐标信息
  const feature = new Feature({
    // 经纬度转换成坐标信息
    geometry: new Point(fromLonLat(v.long)),
    // 可以带别的参数，key 可以随便写，不冲突就行，这里将所有的参数都放进来，供后续使用
    ...v
  })
  feature.setStyle(
    new Style({
      // 标点的图片，如果要标不同类型的点，这个图片可以判断加
      image: new Icon({
        crossOrigin: 'anonymous',
        src: require('../assets/people_mark.png')
      }),
      // 标点的文字
      text: new Text({
        // 文字
        text: v.name,
        // 文字样式
        fill: new Fill({
          color: 'red'
        }),
        font: '20px Calibri',
        // 偏移量
        offsetY: 20
      })
    })
  )
  // 将 feature 坐标信息添加在地图上
  layer.getSource().addFeatures([feature])
}

onMounted(() => {
  // 初始化地图
  init()
  // 创建点位数组
  const peoples = [
    {
      name: '张三',
      title: '化工大院',
      long: [108.93311, 34.272099]
    },
    {
      name: '李四',
      title: '东仪小区',
      long: [108.936751, 34.209511]
    },
    {
      name: '王五',
      title: '紫郡长安',
      long: [108.937921, 34.189151]
    }
  ]
  // 循环将每个人都添加在地图上
  peoples.forEach((v) => {
    addLayer(v)
  })
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>