品牌网站建设權威大蝌蚪,长春二手房,网站建设如何去找客户,一站式网站建设服务目录
一、案例截图
二、安装OpenLayers库
三、代码实现
3.1、信息窗体DOM元素
3.2、创建Overlay
3.3、创建一个点
3.4、给点初始化点击事件
3.5、完整代码
四、Gitee源码 一、案例截图 二、安装OpenLayers库
npm install ol
三、代码实现
初始化变量#xff1a; d…目录
一、案例截图
二、安装OpenLayers库
三、代码实现
3.1、信息窗体DOM元素
3.2、创建Overlay
3.3、创建一个点
3.4、给点初始化点击事件
3.5、完整代码
四、Gitee源码 一、案例截图 二、安装OpenLayers库
npm install ol
三、代码实现
初始化变量 data() {return {map:null,overLay:null,//所有点信息都放在这个图层pointLayer: new VectorLayer({source: new VectorSource(),}),}},
3.1、信息窗体DOM元素
关键代码 divdiv idmap-container/divdiv idpopup-box classpopup-boxbutton idclose-button classclose-buttontimes;/buttondiv idpopup-content classpopup-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; /* 调整箭头与弹出框的间距 */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、创建Overlay
覆盖物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 popupBox document.getElementById(popup-box);
let closeButton document.getElementById(close-button);
//用于显示详情页面的窗口根据经纬度来的位置不固定
this.overlay new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},offset:[0,-20],
});
this.map.addOverlay(this.overlay);
// 关闭弹出框的事件处理
let _that this;
closeButton.addEventListener(click, () {_that.overlay.setPosition(undefined); // 关闭弹出框
});
3.3、创建一个点
关键代码
/*** 根据经纬度坐标添加自定义图标 支持base64*/
addPoints(coordinate) {// 创建feature要素一个feature就是一个点坐标信息let feature new Feature({geometry: new Point(coordinate),});// 设置要素的图标feature.setStyle(new Style({// 设置图片效果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、给点初始化点击事件
思路就是遍历地图上所有图层中的Feature并为它们添加点击事件。
关键代码
initPointEvent(){let _that this;//给点初始化点击事件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();// 获取坐标const coordinates geometry.getCoordinates();// 更新 Overlay 位置_that.overlay.setPosition(coordinates);_that.overlay.getElement().style.display block;let popupContent document.getElementById(popup-content);popupContent.innerHTML div经度${coordinates[0]}/divdiv纬度${coordinates[1]}/div;}});
}
3.5、完整代码
templatedivdiv idmap-container/divdiv idpopup-box classpopup-boxbutton idclose-button classclose-buttontimes;/buttondiv idpopup-content classpopup-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,//所有点信息都放在这个图层pointLayer: new VectorLayer({source: new VectorSource(),}),}},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: [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);//用于显示详情页面的窗口根据经纬度来的位置不固定this.overlay new Overlay({element: popupBox,autoPan: {animation: {duration: 250,},},offset:[0,-20],});this.map.addOverlay(this.overlay);// 关闭弹出框的事件处理let _that this;closeButton.addEventListener(click, () {_that.overlay.setPosition(undefined); // 关闭弹出框});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();},/*** 根据经纬度坐标添加自定义图标 支持base64*/addPoints(coordinate) {// 创建feature要素一个feature就是一个点坐标信息let feature new Feature({geometry: new Point(coordinate),});// 设置要素的图标feature.setStyle(new Style({// 设置图片效果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;//给点初始化点击事件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();// 获取坐标const coordinates geometry.getCoordinates();// 更新 Overlay 位置_that.overlay.setPosition(coordinates);_that.overlay.getElement().style.display block;let popupContent document.getElementById(popup-content);popupContent.innerHTML div经度${coordinates[0]}/divdiv纬度${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; /* 调整箭头与弹出框的间距 */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给标点Feature添加信息窗体
