网站架构策划私人小型服务器

上次是在地图上打点 这次鼠标移动在图标上面显示相关的信息
首先有两个事件 鼠标移入 和 鼠标移出事件
pointermove pointerout

鼠标放上去之前

放上去后

代码如下

<template><div class="container"><div id="vue-openlayers" class="map-x"></div><divid="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv" style="width: 100px; height: 100px"></div></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import s40s from "@/assets/img/404.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";export default {name: "FirstMap",data() {return {map: null,draw: null,maskLayer: null,logo,s40s,layers: [],};},methods: {initMap() {let that = this;// 将图标样式应用到点要素const features = [];const point = new Point([108.56, 34.15]); // 修改坐标格式const feature = new Feature({geometry: point,custom: { data: "123", type: "icon" },type: "icon",});feature.setStyle([new Style({image: new Icon({crossOrigin: "anonymous",src: this.logo,// size: [40, 40],scale: 0.2, // 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源const source = new VectorSource({features,});let markLayerPoints = new VectorLayer({source: source,});let map = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new XYZ({url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",}),}),markLayerPoints, // 确保图层顺序正确// vectorLayers,],view: new View({projection: "EPSG:4326",center: [108.56, 34.15], // 修改中心坐标格式zoom: 6,}),});this.map = map;// 定义变量来跟踪是否鼠标悬停在图标上var infoBox = document.getElementById("info-box");let pointFeatures;var iconStyleDefault = new Style({image: new Icon({src: this.logo, // 图标图片的路径crossOrigin: "anonymous",scale: 0.2, // 图标缩放比例}),});map.on("pointermove", function (event) {if (pointFeatures) {infoBox.style.display = "none"; // 隐藏信息盒子pointFeatures.setStyle(iconStyleDefault);}map.forEachFeatureAtPixel(event.pixel, function (feature) {console.log("进入11111111111111111111");// 这里 feature 就是当前悬停的要素if (feature.values_.type == "icon") {var coord = feature.getGeometry().getCoordinates(); //地理坐标，也就是经纬度var pixel = map.getPixelFromCoordinate(coord); //像素是屏幕上的位置   像素坐标pointFeatures = feature; // 当前的图层// 设置文本样式，显示在图标旁边var textStyle = new Text({text: "文本", // 要显示的文本font: "14px sans-serif", // 字体样式fill: new Fill({color: "black", // 文本颜色}),stroke: new Stroke({color: "white", // 文本轮廓颜色，使文本更突出width: 2,}),// 将文本底部对齐到点的坐标位置textBaseline: "bottom",// 根据需要调整文本的水平对齐方式，'center' 表示文本居中对齐textAlign: "center",});var iconStyleHover1 = new Style({image: new Icon({src: that.s40s, // 图标图片的路径crossOrigin: "anonymous",// anchor: [0.5, 46], // 图标锚点，相对于图标大小的百分比scale: 0.2, // 图标缩放比例textBaseline: "top",}),text: textStyle,});pointFeatures.setStyle(iconStyleHover1);console.log(infoBox, "infoBoxinfoBox");infoBox.style.display = "block"; // 显示信息盒子infoBox.style.left = pixel[0] + 10 + "px"; // 设置信息盒子位置infoBox.style.top = pixel[1] - 5 - infoBox.offsetHeight + "px"; // 防止信息盒子被图标遮挡infoBox.innerHTML = "这里是信息+" + feature.values_.custom.data; // 设置信息盒子内容'; // 设置信息盒子内容}});});// 添加鼠标离开图层监听器markLayerPoints.on("pointerout", function (event) {if (pointFeatures) {pointFeatures.setStyle(iconStyleDefault);pointFeatures = null;infoBox.style.display = "none"; // 隐藏信息盒子}});},
},mounted() {this.initMap();},
};
</script>
<style scoped lang="scss">
.input {position: fixed;top: 10px;right: 10px;border-radius: 10px;background: #fff;display: flex;flex-direction: column;padding: 5px;padding-bottom: 10px;> * {margin-top: 10px;display: flex;align-items: center;}
}
</style><style scoped lang="scss">
.container {position: relative;.btn {position: absolute;left: 4%;top: 1%;}
}#vue-openlayers {width: 100vw;height: 100vh;
}h3 {line-height: 40px;
}/* 隐藏信息盒子的初始样式 */
#info-box {display: none;position: absolute;background: white;border: 1px solid black;padding: 10px;border-radius: 5px;font-size: 14px;pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>