61.在 Vue 3 中使用 OpenLayers 根据坐标回显点、线、多边形、圆形-EW帮帮网

前言

在现代 Web 开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库，支持多种地图源和地图操作。结合 Vue 3 的响应式特性，我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayers 根据坐标回显点、线、多边形和圆形。

技术栈

Vue 3：用于构建用户界面。
OpenLayers：用于地图渲染和图形绘制。
Element Plus：用于 UI 组件（如按钮）。

实现步骤

1. 环境准备

首先，确保你已经创建了一个 Vue 3 项目。如果还没有，可以通过以下命令创建一个：

npm create vue@latest

然后安装 OpenLayers 和 Element Plus：

npm install ol element-plus

2. 项目结构

在项目中创建一个组件，例如 OpenLayersShapes.vue，用于实现地图绘制功能。

3. 代码实现

以下是完整的代码实现：

<!--
 * @Author: 彭麒
 * @Date: 2025/1/7
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers根据坐标，回显点、线、多边形、圆形</div>
    </div>
    <h4>
      <el-button type="primary" size="small" @click="showPoint">显示点</el-button>
      <el-button type="primary" size="small" @click="showLine">显示线</el-button>
      <el-button type="primary" size="small" @click="showCircle">显示圆</el-button>
      <el-button type="primary" size="small" @click="showPolygon">显示多边形</el-button>
      <el-button type="primary" size="small" @click="clearLayer">清除图层</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import { Point, LineString, Circle, Polygon } from 'ol/geom';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import CircleStyle from 'ol/style/Circle';

// 定义地图和数据源
const map = ref(null);
const dataSource = new VectorSource({ wrapX: false });

// 定义坐标数据
const pointData = [116, 39];
const lineData = [
  [116, 39],
  [116.005, 39],
  [116.005, 39.005],
];
const polygonData = [
  [
    [116.005, 39.005],
    [116.006, 39.008],
    [116.008, 39.008],
    [116.005, 39.005],
  ],
];
const circleData = {
  circleCenter: [115.992, 39],
  circleRadius: 0.005,
};

// 设置矢量图层的样式
const featureStyle = () => {
  return new Style({
    fill: new Fill({
      color: '#00f',
    }),
    stroke: new Stroke({
      width: 2,
      color: '#0f0',
    }),
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({
        color: '#ff0000',
      }),
    }),
  });
};

// 清除矢量数据源
const clearLayer = () => {
  dataSource.clear();
};

// 显示点
const showPoint = () => {
  const pointFeature = new Feature({
    geometry: new Point(pointData),
  });
  dataSource.addFeature(pointFeature);
};

// 显示线段
const showLine = () => {
  const lineFeature = new Feature({
    geometry: new LineString(lineData),
  });
  dataSource.addFeature(lineFeature);
};

// 显示圆形
const showCircle = () => {
  const circleFeature = new Feature({
    geometry: new Circle(circleData.circleCenter, circleData.circleRadius),
  });
  dataSource.addFeature(circleFeature);
};

// 显示多边形
const showPolygon = () => {
  const polygonFeature = new Feature({
    geometry: new Polygon(polygonData),
  });
  dataSource.addFeature(polygonFeature);
};

// 初始化地图
const initMap = () => {
  const OSM_Layer = new TileLayer({
    source: new OSM(),
  });

  const feature_Layer = new VectorLayer({
    source: dataSource,
    style: featureStyle(), // 统一设置矢量样式
  });

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [OSM_Layer, feature_Layer],
    view: new View({
      projection: 'EPSG:4326',
      center: [116, 39],
      zoom: 14,
    }),
  });
};

// 组件挂载后初始化地图
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42b983;
}

#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
</style>

4. 代码详解

4.1 地图初始化

使用 Map 和 View 创建地图实例。
添加 OSM 底图和矢量图层。
设置地图的中心点和缩放级别。

4.2 显示图形

使用 Feature 和 Geometry 创建点、线段、圆形和多边形。
通过 dataSource.addFeature 将图形添加到矢量数据源中。

4.3 清除图层

使用 dataSource.clear 清除矢量数据源中的所有图形。

4.4 样式设置

使用 Style 设置矢量图形的填充颜色、边框颜色和点样式。

5. 运行效果

运行项目后，页面会显示一个地图和一组按钮。用户可以通过按钮显示点、线段、圆形或多边形，也可以清除所有图形。

总结

本文详细介绍了如何在 Vue 3 中使用 OpenLayers 根据坐标回显点、线、多边形和圆形。通过结合 Vue 3 的 Composition API 和 OpenLayers 的强大功能，我们可以轻松实现复杂的地图交互。希望本文对你有所帮助，欢迎在评论区交流讨论！

希望这篇博文能帮助你在 CSDN 上分享你的技术经验！如果有其他问题，欢迎随时提问！

61.在 Vue 3 中使用 OpenLayers 根据坐标回显点、线、多边形、圆形

前言

技术栈