62.在 Vue 3 中使用 OpenLayers 设置不同的坐标点，用不同的颜色区分

前言

在现代 Web 开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库，支持多种地图源和地图操作。结合 Vue 3 的响应式特性，我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayers 设置不同的坐标点，并用不同的颜色区分这些点。

技术栈

Vue 3：用于构建用户界面。
OpenLayers：用于地图渲染和图形绘制。

实现步骤

1. 环境准备

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

npm create vue@latest

然后安装 OpenLayers：

npm install ol

2. 项目结构

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

3. 代码实现

以下是完整的代码实现：

<!--
 * @Author: 彭麒
 * @Date: 2025/1/8
 * @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>
    <div id="vue-openlayers" ref="map" class="map-x"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Style, Icon } from 'ol/style';
import Feature from 'ol/Feature';
import { Point } from 'ol/geom';
import maker from '@/assets/OpenLayers/maker.png';
// 定义地图实例
const map = ref(null);

// 创建不同颜色的点数据源
const diffPointColorSource = () => {
  // 定义三个点的坐标
  const rome = new Feature({
    geometry: new Point([12.5, 41.9]), // 罗马
  });

  const london = new Feature({
    geometry: new Point([-0.12755, 51.507222]), // 伦敦
  });

  const madrid = new Feature({
    geometry: new Point([-3.683333, 40.4]), // 马德里
  });

  // 设置罗马点的样式
  rome.setStyle(
    new Style({
      image: new Icon({
        color: '#f00', // 红色
        crossOrigin: 'anonymous',
        src: maker, // 图标路径
      }),
    })
  );

  // 设置伦敦点的样式
  london.setStyle(
    new Style({
      image: new Icon({
        color: 'Orange', // 橙色
        crossOrigin: 'anonymous',
        src: maker, // 图标路径
      }),
    })
  );

  // 设置马德里点的样式
  madrid.setStyle(
    new Style({
      image: new Icon({
        color: [0, 0, 255, 0.8], // 蓝色，透明度 0.8
        crossOrigin: 'anonymous',
        src: maker, // 图标路径
      }),
    })
  );

  // 创建矢量数据源并添加点
  const vectorSource = new VectorSource({
    features: [rome, london, madrid],
  });

  return vectorSource;
};

// 初始化地图
const initMap = () => {
  // 创建 OSM 底图
  const raster = new Tile({
    source: new OSM(),
  });

  // 创建矢量图层
  const vector = new VectorLayer({
    source: diffPointColorSource(), // 使用不同颜色的点数据源
  });

  // 创建地图实例
  map.value = new Map({
    target: 'vue-openlayers', // 地图容器
    layers: [raster, vector], // 添加底图和矢量图层
    view: new View({
      projection: 'EPSG:4326', // 坐标系
      center: [12.5, 41.9], // 初始中心点
      zoom: 4, // 初始缩放级别
    }),
  });
};

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

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

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