Vue3+OpenLayers的简单使用详解
作者：竭点
本文介绍了如何在Vue3项目中使用OpenLayers实现地图展示功能,包括安装OpenLayers、创建地图组件、添加图层、修改地图样式以及实现地图点击等功能,通过完整的代码示例,展示了如何在地图上添加标注和连线,OpenLayers提供了丰富的API和组件,可以满足各种地图展示需求
在前端开发中，地图展示是一个常见的需求。OpenLayers 是一个功能强大的开源地图库，可以帮助我们在 Web 应用程序中展示地图并且进行交互。
本文将介绍如何在 Vue 3 项目中使用 OpenLayers，让您能够轻松实现地图展示功能
步骤一：安装 OpenLayers
首先，我们需要在 Vue 3 项目中安装 OpenLayers：
npm install ol
步骤二：创建地图组件
在 Vue 3 项目中创建一个地图组件，例如Map.vue：
在vue文件中创建两个图层，显示地图和地点
const tdtVectorLayer = new TileLayer({
title: "天地图矢量图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
})
});
const tdtVectorLabelLayer = new TileLayer({
title: "天地图矢量注记图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
})
});
然后将图层添加到openlayers提供map方法中
map = new Map({
layers: [tdtVectorLayer,tdtVectorLabelLayer],
target: mapCon.value,
view: new View({
center: beijing,
minZoom: 4,
zoom: 8,
}),
});
openlayers提供有修改地图样式的方法：
geoMarker.setStyle(styles.geoMarker)
const iconFeature = new Feature({
geometry: new Point(beijing),
});
iconFeature.setStyle(createLabelStyle(iconFeature));
完整的代码：
<template>
<div ref="mapCon" id="mapCon"></div>
</template>
<script>
import "ol/ol.css";
import { ref, onMounted } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import {LineString,Point } from 'ol/geom';
import { Icon, Style,Stroke,Circle,Fill } from "ol/style";
import yzm from '@/assets/stationicon.png'
export default {
setup() {
const mapCon = ref(null);
const speed = ref(null);
const animating = ref(false);
let routeCoords;
let routeLength;
const beijing = fromLonLat([116.28, 39.54]);
let map;
let clickedPoints = [fromLonLat([116.28, 39.54])];
const styles = {
geoMarker: new Style({
image: new Circle({
radius: 7,
snapToPixel: false,
fill: new Fill({ color: 'black' }),
stroke: new Stroke({
color: 'white',
width: 2
})
})
}),
};
const geoMarker = new Feature({
type: 'geoMarker',
geometry: new Point(beijing)
});
onMounted(() => {
const tdtVectorLayer = new TileLayer({
title: "天地图矢量图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
})
});
const tdtVectorLabelLayer = new TileLayer({
title: "天地图矢量注记图层",
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图申请的key",
})
});
map = new Map({
layers: [tdtVectorLayer,tdtVectorLabelLayer],
target: mapCon.value,
view: new View({
center: beijing,
minZoom: 4,
zoom: 8,
}),
});
const createLabelStyle = function (feature) {
return new Style({
image: new Icon({
anchor: [0.5, 60],
anchorOrigin: "top-right",
anchorXUnits: "fraction",
anchorYUnits: "pixels",
offsetOrigin: "top-right",
opacity: 0.75,
src: yzm,
}),
});
};
geoMarker.setStyle(styles.geoMarker)
const iconFeature = new Feature({
geometry: new Point(beijing),
});
iconFeature.setStyle(createLabelStyle(iconFeature));
const vectorSource = new VectorSource({
features: [iconFeature,geoMarker],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
map.addLayer(vectorLayer);
map.on("click", function (evt) {
const point = evt.coordinate;
addVectorLabel(point);
});
function addVectorLabel(coordinate) {
const newFeature = new Feature({
geometry: new Point(coordinate),
});
newFeature.setStyle(createLabelStyle(newFeature));
vectorSource.addFeature(newFeature);
clickedPoints.push(coordinate);
const route = new LineString([clickedPoints[clickedPoints.length - 2], coordinate]);
routeCoords = route.getCoordinates();
routeLength = routeCoords.length;
if (clickedPoints.length > 1) {
// 创建折线特征，连接点击的点
const lineStyle = new Style({
stroke: new Stroke({
width: 6,
color: [237, 212, 0, 0.8]
}),
});
const lineFeature = new Feature({
geometry: route,
});
lineFeature.setStyle(lineStyle);
vectorSource.addFeature(lineFeature);
}
}
});
return { mapCon,animating,startAnimation };
},
};
</script>
<style>
#menu{
margin-bottom: 20px;
}
#mapCon {
width: 70vw;
height: 500px;
}
</style>
本段代码主要实现在地图点击时，添加标注并给两点间连线
总结
通过以上步骤，我们成功地在 Vue 3 项目中使用 OpenLayers 来展示地图。
您也可以根据自己的需求来配置地图的样式和功能，OpenLayers 提供了丰富的 API 和组件来满足各种地图展示的需求。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。