目錄

一、案例截圖

二、安裝OpenLayers庫

三、代碼實(shí)現(xiàn)

3.1、信息窗體DOM元素

3.2、創(chuàng)建Overlay

3.3、創(chuàng)建一個(gè)點(diǎn)

3.4、給點(diǎn)初始化點(diǎn)擊事件

3.5、完整代碼

四、Gitee源碼

---

一、案例截圖

二、安裝OpenLayers庫

npm install ol

三、代碼實(shí)現(xiàn)

初始化變量：

  data() {return {map:null,overLay:null,//所有點(diǎn)信息都放在這個(gè)圖層pointLayer: new VectorLayer({source: new VectorSource(),}),}},

3.1、信息窗體DOM元素

關(guān)鍵代碼：

  <div><div id="map-container"></div><div id="popup-box" class="popup-box"><button id="close-button" class="close-button">&times;</button><div id="popup-content" class="popup-content"></div></div></div>

css樣式：

<style scoped>#map-container {width: 100%;height: 100vh;
}
.popup-box {background: rgba(255, 255, 255, 0.95);border: 1px solid #ccc;border-radius: 8px;padding: 20px;z-index: 1000;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);transition: all 0.3s ease;max-width: 300px;font-family: 'Arial', sans-serif;position: absolute;transform: translate(-50%, -100%); /* 使彈出框上移并居中 */
}/* 添加箭頭樣式 */
.popup-box::after {content: "";position: absolute;top: 100%; /* 箭頭位于彈出框的底部 */left: 50%; /* 箭頭橫向居中 */margin-left: -6px; /* 調(diào)整箭頭與彈出框的間距 */border-width: 6px; /* 箭頭的大小 */border-style: solid;border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent; /* 箭頭的顏色 */
}.close-button {background: none;color: gray;border: none;font-size: 20px;position: absolute;top: 10px;right: 10px;cursor: pointer;
}.popup-content {width: 240px;margin-top: 10px;font-size: 16px;line-height: 1.5;
}
</style>

3.2、創(chuàng)建Overlay

覆蓋物（Overlay）是用于在地圖上顯示額外的HTML元素，如彈出窗口、信息框、控件等的層。與圖層不同，覆蓋物不直接渲染地理要素，而是用于展示與地圖位置相關(guān)的HTML內(nèi)容。

element (必需)：指定用于作為Overlay內(nèi)容的DOM元素。通常是一個(gè)HTML元素，例如div，作為彈出框或工具提示等。

autoPan (可選) ：boolean 或 { animation: { duration: number } } 默認(rèn)值：false，如果設(shè)置為 true，地圖將在Overlay顯示時(shí)自動(dòng)平移，以確保Overlay的位置始終在視圖范圍內(nèi)。如果設(shè)置為對(duì)象，可以自定義平移時(shí)的動(dòng)畫效果。例如，設(shè)置動(dòng)畫持續(xù)時(shí)間。

position (可選) ：[number, number]（坐標(biāo)數(shù)組） 默認(rèn)值：undefined，初始化時(shí)設(shè)置Overlay的位置，指定為地圖坐標(biāo)系中的坐標(biāo)。如果未指定，Overlay不會(huì)顯示。

stopEvent (可選) ：默認(rèn)值：true，確定Overlay的點(diǎn)擊事件是否會(huì)停止事件傳播。如果設(shè)置為 false，點(diǎn)擊 Overlay 的內(nèi)容不會(huì)阻止點(diǎn)擊事件向下傳播到地圖層。

offset (可選) ：默認(rèn)值：[0, 0] 說明：Overlay內(nèi)容相對(duì)于指定位置的偏移量，用于微調(diào)Overlay的顯示位置。例如，可以通過提供負(fù)值來向上或向左移動(dòng)Overlay。

關(guān)鍵代碼：

let popupBox = document.getElementById('popup-box');
let closeButton = document.getElementById('close-button');
//用于顯示詳情頁面的窗口（根據(jù)經(jīng)緯度來的，位置不固定）
this.overlay = new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},offset:[0,-20],
});
this.map.addOverlay(this.overlay);
// 關(guān)閉彈出框的事件處理
let _that = this;
closeButton.addEventListener('click', () => {_that.overlay.setPosition(undefined); // 關(guān)閉彈出框
});

3.3、創(chuàng)建一個(gè)點(diǎn)

關(guān)鍵代碼：

/*** 根據(jù)經(jīng)緯度坐標(biāo)添加自定義圖標(biāo) 支持base64*/
addPoints(coordinate) {// 創(chuàng)建feature要素，一個(gè)feature就是一個(gè)點(diǎn)坐標(biāo)信息let feature = new Feature({geometry: new Point(coordinate),});// 設(shè)置要素的圖標(biāo)feature.setStyle(new Style({// 設(shè)置圖片效果image: new Icon({src: 'http://api.tianditu.gov.cn/img/map/markerA.png',// anchor: [0.5, 0.5],scale: 1,}),}),);return feature;
},

將其添加到圖層上，再將圖層添加到地圖上。

let feature = this.addPoints([118.958412, 32.119130]);
this.pointLayer.getSource().addFeature(feature);
this.map.addLayer(this.pointLayer);feature = this.addPoints([118.948627, 32.120428]);
this.pointLayer.getSource().addFeature(feature);

3.4、給點(diǎn)初始化點(diǎn)擊事件

思路就是遍歷地圖上所有圖層中的Feature，并為它們添加點(diǎn)擊事件。

關(guān)鍵代碼：

initPointEvent(){let _that = this;//給點(diǎn)初始化點(diǎn)擊事件this.map.on("singleclick", (e) => {let pixel = this.map.getEventPixel(e.originalEvent);let feature = this.map.forEachFeatureAtPixel(pixel, function(feature) { return feature; });if(feature){// 獲取 Feature 的幾何體const geometry = feature.getGeometry();// 獲取坐標(biāo)const coordinates = geometry.getCoordinates();// 更新 Overlay 位置_that.overlay.setPosition(coordinates);_that.overlay.getElement().style.display = 'block';let popupContent = document.getElementById('popup-content');popupContent.innerHTML = `<div>經(jīng)度：${coordinates[0]}</div><div>緯度：${coordinates[1]}</div>`;}});
}

3.5、完整代碼

<template><div><div id="map-container"></div><div id="popup-box" class="popup-box"><button id="close-button" class="close-button">&times;</button><div id="popup-content" class="popup-content"></div></div></div>
</template>
<script>
import {Feature, Map, View} from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import Overlay from 'ol/Overlay';
import {Point} from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {Icon, Style} from "ol/style";export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);
}export default {data() {return {map:null,overLay:null,//所有點(diǎn)信息都放在這個(gè)圖層pointLayer: new VectorLayer({source: new VectorSource(),}),}},mounted(){this.initMap() // 加載矢量底圖},methods:{initMap() {const KEY = '你申請(qǐng)的KEY'this.map = new Map({target: 'map-container',layers: [// 底圖new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,layer: 'vec', // 矢量底圖matrixSet: 'c', // c: 經(jīng)緯度投影 w: 球面墨卡托投影style: "default",crossOrigin: 'anonymous', // 解決跨域問題 如無該需求可不添加format: "tiles", //請(qǐng)求的圖層格式，這里指定為瓦片格式wrapX: true, // 允許地圖在 X 方向重復(fù)（環(huán)繞）tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})}),// 標(biāo)注new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,layer: 'cva', //矢量注記matrixSet: 'c',style: "default",crossOrigin: 'anonymous',format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})})],view: new View({center: [118.958366,32.119577],projection: projection,zoom: 12,maxZoom: 17,minZoom: 1}),//加載控件到地圖容器中controls: defaultControls({zoom: false,rotate: false,attribution: false})});let popupBox = document.getElementById('popup-box');let closeButton = document.getElementById('close-button');//用于顯示詳情頁面的窗口（根據(jù)經(jīng)緯度來的，位置不固定）this.overlay = new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},offset:[0,-20],});this.map.addOverlay(this.overlay);// 關(guān)閉彈出框的事件處理let _that = this;closeButton.addEventListener('click', () => {_that.overlay.setPosition(undefined); // 關(guān)閉彈出框});let feature = this.addPoints([118.958412, 32.119130]);this.pointLayer.getSource().addFeature(feature);this.map.addLayer(this.pointLayer);feature = this.addPoints([118.948627, 32.120428]);this.pointLayer.getSource().addFeature(feature);this.initPointEvent();},/*** 根據(jù)經(jīng)緯度坐標(biāo)添加自定義圖標(biāo) 支持base64*/addPoints(coordinate) {// 創(chuàng)建feature要素，一個(gè)feature就是一個(gè)點(diǎn)坐標(biāo)信息let feature = new Feature({geometry: new Point(coordinate),});// 設(shè)置要素的圖標(biāo)feature.setStyle(new Style({// 設(shè)置圖片效果image: new Icon({src: 'http://api.tianditu.gov.cn/img/map/markerA.png',// anchor: [0.5, 0.5],scale: 1,}),}),);return feature;},initPointEvent(){let _that = this;//給點(diǎn)初始化點(diǎn)擊事件this.map.on("singleclick", (e) => {let pixel = this.map.getEventPixel(e.originalEvent);let feature = this.map.forEachFeatureAtPixel(pixel, function(feature) { return feature; });if(feature){// 獲取 Feature 的幾何體const geometry = feature.getGeometry();// 獲取坐標(biāo)const coordinates = geometry.getCoordinates();// 更新 Overlay 位置_that.overlay.setPosition(coordinates);_that.overlay.getElement().style.display = 'block';let popupContent = document.getElementById('popup-content');popupContent.innerHTML = `<div>經(jīng)度：${coordinates[0]}</div><div>緯度：${coordinates[1]}</div>`;}});}}
}
</script>
<style scoped>#map-container {width: 100%;height: 100vh;
}
.popup-box {background: rgba(255, 255, 255, 0.95);border: 1px solid #ccc;border-radius: 8px;padding: 20px;z-index: 1000;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);transition: all 0.3s ease;max-width: 300px;font-family: 'Arial', sans-serif;position: absolute;transform: translate(-50%, -100%); /* 使彈出框上移并居中 */
}/* 添加箭頭樣式 */
.popup-box::after {content: "";position: absolute;top: 100%; /* 箭頭位于彈出框的底部 */left: 50%; /* 箭頭橫向居中 */margin-left: -6px; /* 調(diào)整箭頭與彈出框的間距 */border-width: 6px; /* 箭頭的大小 */border-style: solid;border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent; /* 箭頭的顏色 */
}.close-button {background: none;color: gray;border: none;font-size: 20px;position: absolute;top: 10px;right: 10px;cursor: pointer;
}.popup-content {width: 240px;margin-top: 10px;font-size: 16px;line-height: 1.5;
}
</style>

四、Gitee源碼

地址：?Vue2+OpenLayers給標(biāo)點(diǎn)Feature添加信息窗體