99.在 Vue 3 中使用 OpenLayers 配置 Icon 和 Text 标注

在前端 GIS 开辟中，OpenLayers 是一款强盛且开源的舆图库，能够轻松实现 Web 端的舆图渲染和交互操纵。本文将基于 Vue 3，先容如安在 OpenLayers 中使用 Icon（图标） 和 Text（文本标注），并具体解析参数配置。

---

1. 环境准备

在 Vue 3 项目中使用 OpenLayers，须要先安装依赖：
npm install ol
假如你的项目是基于 Vite 构建的，默认支持 ESM 方式引入，无需额外配置。

---

2. 创建 OpenLayers 舆图

我们先初始化 OpenLayers 舆图，并在 onMounted 钩子中执行渲染逻辑。
完整代码

1. <!--
2. * @Author: 彭麒
3. * @Date: 2025/3/11
4. * @Email: 1062470959@qq.com
5. * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
6. -->
7. <template>
8.   <div class="container">
9.     <div class="w-full flex justify-center">
10.       <div class="font-bold text-[24px]">在Vue3中使用OpenLayers配置Icon和text的参数</div>
11.     </div>
12.     <div id="vue-openlayers"></div>
13.   </div>
14. </template>
16. <script setup>
17. import { onMounted, ref } from "vue";
18. import "ol/ol.css";
19. import { Map, View } from "ol";
20. import TileLayer from "ol/layer/Tile";
21. import VectorLayer from "ol/layer/Vector";
22. import VectorSource from "ol/source/Vector";
23. import OSM from "ol/source/OSM";
24. import Feature from "ol/Feature";
25. import { Point } from "ol/geom";
26. import { Circle, Fill, Icon, Stroke, Style, Text } from "ol/style";
28. const map = ref(null);
29. const dataSource = new VectorSource({ wrapX: false });
31. const showPoint = () => {
32.   const iconFeature = new Feature({
33.     geometry: new Point([116, 39]),
34.   });
36.   const iconStyle = new Style({
37.     image: new Icon({
38.       rotation: 45,
39.       crossOrigin: "anonymous",
40.       anchor: [0.5, 1.5],
41.       scale: 0.1,
42.       src: new URL("@/assets/OpenLayers/beijing.png", import.meta.url).href,
43.     }),
44.     text: new Text({
45.       text: "cuclife",
46.       anchor: [0.5, 1.5],
47.       rotation: 50,
48.       font: "bold 20px Arial, sans-serif",
49.       textAlign: "right",
50.       offsetX: -50,
51.       offsetY: 20,
52.       fill: new Fill({
53.         color: "red",
54.       }),
55.       stroke: new Stroke({
56.         color: "white",
57.         width: 2,
58.       }),
59.     }),
60.   });
62.   const pointStyle = new Style({
63.     image: new Circle({
64.       radius: 7,
65.       fill: new Fill({
66.         color: "red",
67.       }),
68.       stroke: new Stroke({
69.         color: "blue",
70.         width: 1,
71.       }),
72.     }),
73.   });
75.   iconFeature.setStyle([pointStyle, iconStyle]);
76.   dataSource.addFeature(iconFeature);
77. };
79. // 初始化地图
80. const initMap = () => {
81.   const OSM_Layer = new TileLayer({
82.     source: new OSM(),
83.   });
84.   const feature_Layer = new VectorLayer({
85.     source: dataSource,
86.   });
88.   map.value = new Map({
89.     target: "vue-openlayers",
90.     layers: [OSM_Layer, feature_Layer],
91.     view: new View({
92.       projection: "EPSG:4326",
93.       center: [116, 39],
94.       zoom: 14,
95.     }),
96.   });
97. };
99. onMounted(() => {
100.   initMap();
101.   showPoint();
102. });
103. </script>
105. <style scoped>
106. .container {
107.   width: 840px;
108.   height: 570px;
109.   margin: 50px auto;
110.   border: 1px solid #42B983;
111. }
113. #vue-openlayers {
114.   width: 800px;
115.   height: 450px;
116.   margin: 0 auto;
117.   border: 1px solid #42B983;
118.   position: relative;
119. }
120. </style>

复制代码

4. 运行效果

终极效果如下： ✅ 舆图居中在北京 ✅ 添加了赤色圆点 ✅ 显示图标（beijing.png），并带有旋转 ✅ 笔墨“北京”赤色显示，白色描边

---

5. 结语

通过本文，我们学习了： ✔ 在 Vue 3 项目中集成 OpenLayers
✔ 如何使用 Icon 配置舆图标注
✔ 如安在 OpenLayers 中添加 Text 并调解样式
希望这篇文章能帮助你更好地把握 OpenLayers，欢迎交流讨论！