当前位置：首页 > article >正文

48.在 Vue 3 中使用 OpenLayers 实现鼠标悬停显示城市名片

article 2025/1/1 22:08:44

在现代前端开发中，Vue 3 和 OpenLayers 是两个强大的工具。Vue 3 提供了简洁高效的前端框架，而 OpenLayers 则在地图应用领域表现优异。本篇文章将详细介绍如何结合 Vue 3 和 OpenLayers，实现一个简单的鼠标悬停地图上的点位，显示城市名片的功能。

实现效果

地图加载成功后，显示中国的部分城市点位，如北京、大连和天津。
当鼠标移动到某个城市点位时，会弹出一个包含该城市名称、图片和简介的悬浮窗口。
鼠标移出点位时，悬浮窗口会自动关闭。

实现步骤

1. 项目初始化

在开始前，请确保你的项目已经配置好 Vue 3 环境，并安装了 OpenLayers：

npm install ol

2. Vue 3 和 OpenLayers 的代码实现

以下是完整代码，包括地图初始化、点位加载以及鼠标悬停事件处理：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/28
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <button class="back-button" @click="goBack">返回</button>
  <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"></div>
    <div id="popup-box" class="ol-popup">
      <div id="popup-content"></div>
    </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 Overlay from 'ol/Overlay';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import Feature from 'ol/Feature';
import {Point} from 'ol/geom';
import dalianImg from '@/assets/OpenLayers/dalian.png';
import beijingImg from '@/assets/OpenLayers/beijing.png';
import tianjinImg from '@/assets/OpenLayers/tianjin.png';
import maker from '@/assets/OpenLayers/maker.png';
import router from "@/router";

const goBack = () => {
  router.push('/OpenLayers');
};

const map = ref(null);
const overlayer = ref(null);
const vsource = new VectorSource();
const citys = [
  {
    name: '大连',
    position: [121.63, 38.90],
    desc: '滨城、浪漫之都，辽宁省辖地级市、副省级市。',
    imgurl: dalianImg
  },
  {
    name: '北京',
    position: [116.40, 39.91],
    desc: '中华人民共和国的首都、中国政治、文化中心。',
    imgurl: beijingImg
  },
  {
    name: '天津',
    position: [117.21, 39.09],
    desc: '简称“津”，中华人民共和国省级行政区、直辖市。',
    imgurl: tianjinImg
  },
];

const createCityPointFeatures = () => {
  const features = citys.map((city) => {
    const feature = new Feature({
      geometry: new Point(city.position),
      citydata: city
    });
    feature.setStyle(createPointStyle());
    return feature;
  });
  vsource.addFeatures(features);
};

const createPointStyle = () => {
  return new Style({
    image: new Icon({
      src: maker,
      anchor: [0.5, 0.5],
      scale: 1
    })
  });
};

const setupHoverInteraction = () => {
  const box = document.getElementById('popup-box');
  const content = document.getElementById('popup-content');

  overlayer.value = new Overlay({
    element: box,
    autoPan: {
      animation: {
        duration: 250
      }
    }
  });
  map.value.addOverlay(overlayer.value);

  map.value.on('pointermove', (e) => {
    if (e.dragging) return;

    const feature = map.value.forEachFeatureAtPixel(e.pixel, (feat) => feat);

    if (feature) {
      const cityInfo = feature.get('citydata');
      content.innerHTML = `<h3>${cityInfo.name}</h3><div><img src="${cityInfo.imgurl}"></div> <p>${cityInfo.desc}</p>`;
      overlayer.value.setPosition(e.coordinate);
    } else {
      overlayer.value.setPosition(undefined);
    }
  });
};

const initializeMap = () => {
  const osmLayer = new Tile({
    source: new OSM()
  });

  const cityLayer = new VectorLayer({
    source: vsource
  });

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [osmLayer, cityLayer],
    view: new View({
      center: [116.389, 39.903],
      zoom: 6,
      projection: 'EPSG:4326'
    })
  });

  setupHoverInteraction();
};

onMounted(() => {
  initializeMap();
  createCityPointFeatures();
});

</script>

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

#vue-openlayers {
  width: 800px;
  height: 470px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}

.ol-popup {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.8);
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  color: #FFFFFF;
  min-width: 200px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: rgba(255, 0, 0, 0.8);
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
</style>