哈尔滨免费网站制作,国家住房和城乡建设网站,营销推广渠道,网站一体化建设文章目录 简介overlay 实现popup弹窗overlay 实现label 标注信息overlay实现 text 文本信息完整代码 简介 常见的地图覆盖物为这三种类型#xff0c;如#xff1a;popup弹窗、label标注信息、text文本信息等。
overlay 实现popup弹窗
方法详解
实例一个 new Overlay()如popup弹窗、label标注信息、text文本信息等。
overlay 实现popup弹窗
方法详解
实例一个 new Overlay()设置相关的属性element 是和页面的 最外层弹窗的dom进行绑定通过 map.addOverlay(this.overlay) 把 overlay弹窗添加到页面closer.onclick 添加一个 x 关闭弹窗事件通过 this.map.on(“singleclick”, function(evt) 事件点击地图触发弹窗效果 overlay 实现label 标注信息
// 创建一个标注信息
const addMarker () {var marker new Overlay({position: fromLonLat([104.043505, 30.58165]),positioning: center-center,element: document.getElementById(marker),stopEvent: false,});map.value.addOverlay(marker);
};overlay实现 text 文本信息
// 创建文字标签 label
const addText () {var textInfo new Overlay({position: fromLonLat([104.043505, 30.58165]),offset: [20, -20],element: document.getElementById(textInfo),});map.value.addOverlay(textInfo);
};完整代码
!--* Author: zhangchao zhang_chao96163.com* Date: 2023-07-05 15:20:38* LastEditors: zhangchao zhang_chao96163.com* LastEditTime: 2023-07-06 15:46:16* FilePath: \v3_test\src\views\index.vue* Description: 这是默认设置,请设置customMade, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--
templatediv idcontentdiv idmarker/divdiv idmap/divdiv idtextInfo我是text文本信息/divdiv idpopup classol-popupa href# idpopup-closer classol-popup-closer/adiv idpopup-content classpopup-content/div/div/div
/template
script setup
import { ref, onMounted } from vue;
import ol/ol.css;
import { Map, View } from ol;
import { defaults as defaultControls } from ol/control;
import Tile from ol/layer/Tile;
import { fromLonLat, transform, toLonLat } from ol/proj;
import OSM from ol/source/OSM;
import Overlay from ol/Overlay;
import { toStringHDMS } from ol/coordinate;
const map ref();
const initMap () {let titleLayer [new Tile({source: new OSM(),}),];let view new View({center: fromLonLat([104.912777, 34.730746]), //地图中心坐标zoom: 4.5,});map.value new Map({target: map,layers: titleLayer,view: view,});
};
// 创建一个标注信息
const addMarker () {var marker new Overlay({position: fromLonLat([104.043505, 30.58165]),positioning: center-center,element: document.getElementById(marker),stopEvent: false,});map.value.addOverlay(marker);
};
// 创建文字标签 label
const addText () {var textInfo new Overlay({position: fromLonLat([104.043505, 30.58165]),offset: [20, -20],element: document.getElementById(textInfo),});map.value.addOverlay(textInfo);
};
// 弹框
const overlay ref();
const addPopup () {// 使用变量存储弹窗所需的 DOM 对象var container document.getElementById(popup);var closer document.getElementById(popup-closer);var content document.getElementById(popup-content);overlay.value new Overlay({element: container, //绑定 Overlay 对象和 DOM 对象的autoPan: false, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果autoPanAnimation: {duration: 250, //自动平移效果的动画时间 9毫秒},});map.value.addOverlay(overlay.value);closer.onclick function () {overlay.value.setPosition(undefined);closer.blur();return false;};map.value.on(singleclick, function (evt) {let coordinate transform(evt.coordinate, EPSG:3857, EPSG:4326);// 点击尺 这里是尺(米)并不是经纬度;let hdms toStringHDMS(toLonLat(evt.coordinate)); // 转换为经纬度显示content.innerHTML p你点击了这里/pp经纬度pcode ${hdms} /code pp坐标/pX${coordinate[0]} nbsp;nbsp; Y: ${coordinate[1]};overlay.value.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标});
};
onMounted(() {initMap();addMarker();addText();addPopup();
});
/script
style langscss scoped
#content,
#map {height: 100%;
}
#marker {width: 20px;height: 20px;background: red;border-radius: 50%;
}
#textInfo {width: 200px;height: 40px;line-height: 40px;background: burlywood;color: yellow;text-align: center;font-size: 20px;
}.ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;
}
.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: white;border-width: 10px;left: 48px;margin-left: -10px;
}
.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;
}
.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;
}
.popup-content {width: 400px;
}
.ol-popup-closer:after {content: ✖;
}
/style
