IT评测·应用市场-qidao123.com

标题: 99.在 Vue 3 中使用 OpenLayers 配置 Icon 和 Text 标注 [打印本页]
作者: 宝塔山    时间: 2025-3-12 20:48
标题: 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，欢迎交流讨论！



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4