建网站 收费标准,app开发cms网站开发,天津市工程信息网,注册城乡规划师准考证打印时间上次是在地图上打点 这次鼠标移动在图标上面显示相关的信息 首先有两个事件 鼠标移入 和 鼠标移出事件 pointermove pointerout
鼠标放上去之前 放上去后 代码如下
templatediv classcontainerdiv idvue-openlayers classtemplatediv classcontainerdiv idvue-openlayers classmap-x/divdividinfo-boxclassinfo-boxstylewidth: 100px; height: 100px/divdiv idcanv stylewidth: 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?lenmdz{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 langscss
.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;}
}
/stylestyle scoped langscss
.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
