46.在 Vue3 中使用 OpenLayers 双击鼠标显示品牌代言人名片

在现代 Web 开发中，地图可视化已成为非常常见的需求之一，尤其是在地理位置相关的应用中。OpenLayers 是一款强大的开源 JavaScript 库，能够帮助开发者在网页中实现各种地图功能。结合 Vue 3 的强大功能，我们可以轻松地将 OpenLayers 集成到 Vue 项目中，展示地图上的地理信息。

本文将介绍如何在 Vue 3 中使用 OpenLayers 实现一个双击鼠标显示品牌代言人名片的功能，帮助大家快速上手并实现交互效果。

需求背景

我们要实现的功能如下：

在地图上显示多个品牌代言人的位置。
每个代言人信息包括：名字、电话、邮箱以及头像。
用户可以通过双击代言人所在的位置，展示代言人的详细信息（如名片）。

技术栈

Vue 3：现代的前端框架，基于 Composition API 提供更简洁的代码结构。
OpenLayers：开源的地图展示库，支持丰富的地图功能和交互。
CSS：基本的样式设置，确保界面美观。

效果展示

1. 安装依赖

首先，我们需要安装 OpenLayers。你可以通过 npm 或 yarn 安装 OpenLayers：

npm install ol

2. 创建 Vue 组件

接下来，我们开始编写 Vue 组件来实现我们的需求。

代码实现

<!--* @Author: 彭麒* @Date: 2024/12/27* @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"></div><div id="popup-box" class="ol-popup"><div id="popup-content"><div class="left"><img :src="state.imgurl"/></div><div class="right"><div class="name">{{ state.name }}</div><div class="dec">{{ state.phone }}</div><div class="dec">{{ state.email }}</div></div></div></div></div>
</template><script setup>
import 'ol/ol.css';
import {reactive, onMounted} from 'vue';
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 * as Interaction from 'ol/interaction';
import person1 from '@/assets/OpenLayers/person1.jpg';
import person2 from '@/assets/OpenLayers/person2.jpg';
const state = reactive({map: null,overlayer: null,vsource: new VectorSource({}),imgurl: null,name: '',email: '',phone: '',citys: [{name: '阿米尔·汗',position: [73, 19],phone: '138****8888',email: 'amh@lante.info',imgurl: person1,},{name: '艾西瓦娅·雷',position: [77, 28],phone: '138****6666',email: 'axwy@lante.info',imgurl: person2,},],
});const pointStyle = (img) => {return [new Style({image: new Icon({src: img,anchor: [0.5, 0.5],scale: 0.05,}),}),];
};const companyPoint = () => {const features = state.citys.map((data) => {const feature = new Feature({geometry: new Point(data.position),persondata: data,});feature.setStyle(pointStyle(data.imgurl));return feature;});state.vsource.addFeatures(features);
};const clickPoint = () => {const box = document.getElementById('popup-box');state.overlayer = new Overlay({element: box,autoPan: {animation: {duration: 250,},},});state.map.addOverlay(state.overlayer);state.map.on('dblclick', (e) => {const feature = state.map.forEachFeatureAtPixel(e.pixel, (feature) => feature);if (feature) {const person = feature.get('persondata');state.name = person.name;state.imgurl = person.imgurl;state.phone = person.phone;state.email = person.email;state.overlayer.setPosition(e.coordinate);} else {state.overlayer.setPosition(undefined);}});
};const initMap = () => {const osmLayer = new Tile({source: new OSM()});const cityLayer = new VectorLayer({source: state.vsource});state.map = new Map({target: 'vue-openlayers',layers: [osmLayer, cityLayer],view: new View({center: [77, 28],zoom: 5,projection: 'EPSG:4326',}),interactions: new Interaction.defaults({doubleClickZoom: false,}),});clickPoint();
};onMounted(() => {initMap();companyPoint();
});</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(210, 105, 30, 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(210, 105, 30, 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;
}#popup-content {width: 270px;height: 120px;border-radius: 10px;
}#popup-content .left {width: 100px;height: 120px;float: right;
}#popup-content .left img {width: 100px;height: 120px;
}#popup-content .right {width: 160px;height: 120px;float: left;text-align: left;padding-left: 10px;
}#popup-content .right .name {line-height: 50px;font-size: 20px;
}#popup-content .right .dec {line-height: 30px;font-size: 14px;
}
</style>