接上一篇初始化地图文章
很多时候我们不只是需要单纯的看地图,那就太没意思了,当有标点位需求的时候呢就可以往下看啦。
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>