做网站多少钱啊,网址域名大全,人民网成功建设了哪些部委网站,nginx wordpress css目录
一、案例截图
二、安装OpenLayers库
三、代码实现
关键参数#xff1a;
实现思路#xff1a;
核心代码#xff1a;
完整代码#xff1a;
四、Gitee源码 一、案例截图 二、安装OpenLayers库
npm install ol
三、代码实现
覆盖物#xff08;Overlay#xf…目录
一、案例截图
二、安装OpenLayers库
三、代码实现
关键参数
实现思路
核心代码
完整代码
四、Gitee源码 一、案例截图 二、安装OpenLayers库
npm install ol
三、代码实现
覆盖物Overlay是用于在地图上显示额外的HTML元素如弹出窗口、信息框、控件等的层。与图层不同覆盖物不直接渲染地理要素而是用于展示与地图位置相关的HTML内容。
关键参数
element (必需)指定用于作为Overlay内容的DOM元素。通常是一个HTML元素例如div作为弹出框或工具提示等。
autoPan (可选) boolean 或 { animation: { duration: number } } 默认值false如果设置为 true地图将在Overlay显示时自动平移以确保Overlay的位置始终在视图范围内。如果设置为对象可以自定义平移时的动画效果。例如设置动画持续时间。
position (可选) [number, number]坐标数组 默认值undefined初始化时设置Overlay的位置指定为地图坐标系中的坐标。如果未指定Overlay不会显示。
stopEvent (可选) 默认值true确定Overlay的点击事件是否会停止事件传播。如果设置为 false点击 Overlay 的内容不会阻止点击事件向下传播到地图层。
offset (可选) 默认值[0, 0] 说明Overlay内容相对于指定位置的偏移量用于微调Overlay的显示位置。例如可以通过提供负值来向上或向左移动Overlay。
调用示例
let overlay new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},offset:[-5,-5],
});
实现思路
使用OpenLayers的Overlay类来实现弹出框展示信息
1、获取DOM元素用于展示信息。
2、在地图上添加Overlay。
3、在地图上点击事件中更新弹出框位置和内容。
核心代码
创建一个弹出框Overlay并将其添加到地图上。
div idpopup-box classpopup-boxbutton idclose-button classclose-buttontimes;/buttondiv idpopup-content classpopup-content/div
/div//其他代码省略...let popupBox document.getElementById(popup-box);
let popupContent document.getElementById(popup-content);
let closeButton document.getElementById(close-button)
let overlay new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},
});
this.map.addOverlay(overlay);
样式
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; /* 调整箭头与弹出框的间距 */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
地图点击事件
this.map.on(singleclick, (evt) { let lonLat evt.coordinate; popupContent.innerHTML div经度${lonLat[0]}/divdiv纬度${lonLat[1]}/div; overlay.setPosition(lonLat);
});
关闭弹出框的事件处理
closeButton.addEventListener(click, () { overlay.setPosition(undefined); // 关闭弹出框
});
完整代码
templatedivdiv idmap-container/divdiv idpopup-box classpopup-boxbutton idclose-button classclose-buttontimes;/buttondiv idpopup-content classpopup-content/div/div/div/template
script
import {Map,View} from ol
import { transform, fromLonLat, toLonLat } from ol/proj;
import { toStringHDMS } from ol/coordinate;
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;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,showPopup: false,popupPosition: { x: 0, y: 0 },}},mounted(){this.initMap() // 加载矢量底图},methods:{initMap() {const KEY 你申请的KEYthis.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: 经纬度投影 w: 球面墨卡托投影style: default,crossOrigin: anonymous, // 解决跨域问题 如无该需求可不添加format: tiles, //请求的图层格式这里指定为瓦片格式wrapX: true, // 允许地图在 X 方向重复环绕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]})})}),// 标注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: [113.082753,28.180449],projection: projection,zoom: 12,maxZoom: 17,minZoom: 1}),//加载控件到地图容器中controls: defaultControls({zoom: false,rotate: false,attribution: false})});let popupBox document.getElementById(popup-box);let popupContent document.getElementById(popup-content);let closeButton document.getElementById(close-button)let overlay new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},});this.map.addOverlay(overlay);// 添加地图点击事件this.map.on(singleclick, (evt) {let lonLat evt.coordinate;popupContent.innerHTML div经度${lonLat[0]}/divdiv纬度${lonLat[1]}/div;overlay.setPosition(lonLat);});// 关闭弹出框的事件处理closeButton.addEventListener(click, () {overlay.setPosition(undefined); // 关闭弹出框});},}
}
/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; /* 调整箭头与弹出框的间距 */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源码
Vue2OpenLayers使用Overlay实现点击获取当前经纬度信息
