admin管理员组

文章数量:821309

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>

本文标签: vue中使用openlayers离线地图添加标点(二)