Vue2+OpenLayers添加/删除点、点击事件功能实现(提供Gitee源码)

devtools/2025/1/24 12:04:56/

目录

一、案例截图

二、安装OpenLayers库

三、安装Element-UI

四、代码实现

4.1、添加一个点

4.2、删除所有点

4.3、根据经纬度删除点

4.4、给点添加点击事件

4.5、完整代码 

五、Gitee源码


一、案例截图

可以新增/删除标记点,点击标记点可以获取到当前标记点的经纬度信息(绑定了点击事件)。

二、安装OpenLayers库

npm install ol

三、安装Element-UI

没安装的看官方文档:Element - The world's most popular Vue UI framework

四、代码实现

在OpenLayers中,Feature(要素)是地图上表示一个空间实体的对象,它包含的类型有: Point(点) LineString(线段) Polygon(多边形)。

VectorLayer是一个用于在地图上渲染矢量数据的层,支持显示点、线和面等几何图形。

4.1、添加一个点

首先新增一个图层,我们所有的点信息都存放在这个图层上,你也可以添加一个点就新增一个图层,看各自需求,然后初始化经纬度变量。

data() {return {map:null,//所有点信息都放在这个图层pointLayer: new VectorLayer({source: new VectorSource(),}),form:{lon:'',lat:'',},}
},

在地图初始化以后要把这个图层添加到地图上:

//把图层添加到地图上
this.map.addLayer(this.pointLayer);

新增一个点JS关键代码:

/*** 根据经纬度坐标添加自定义图标 支持base64*/
addPoints() {let coordinate = [this.form.lon,this.form.lat];// 创建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,}),}),);// 要素添加到地图图层上this.pointLayer.getSource().addFeature(feature);// 设置中心this.map.getView().setCenter(coordinate);
},

4.2、删除所有点

removeAllPoint(){// 从图层源中获取当前要素const features = this.pointLayer.getSource().getFeatures();// 遍历要素features.forEach(feature => {this.pointLayer.getSource().removeFeature(feature);});
}

4.3、根据经纬度删除点

删除一个点JS关键代码:

removePoint() {let coordinate = [this.form.lon,this.form.lat];// 从图层源中获取当前要素const features = this.pointLayer.getSource().getFeatures();let _that = this;// 遍历要素,查找匹配的坐标features.forEach(feature => {const geometry = feature.getGeometry();const featureCoordinates = geometry.getCoordinates();// 检查经纬度是否匹配if (featureCoordinates[0] == coordinate[0] && featureCoordinates[1] == coordinate[1]) {// 找到匹配的要素,移除它_that.pointLayer.getSource().removeFeature(feature);}});
},

4.4、给点添加点击事件

JS关键代码:

initPointEvent(){//给点初始化点击事件this.map.on("singleclick", (e) => {let pixel = this.map.getEventPixel(e.originalEvent);let feature = this.map.forEachFeatureAtPixel(pixel, function(feature) { return feature; });let coordinate = e.coordinate;if(feature){console.log("当前点击经纬度:"+coordinate);}});
}

4.5、完整代码 

<template><div><div style="margin-bottom: 10px"><el-button type="danger" @click="removeAllPoint">删除所有点标记</el-button><el-input v-model="form.lon" placeholder="经度" style="margin-left: 10px;width: 200px"></el-input><el-input v-model="form.lat" placeholder="纬度" style="margin-left: 10px;width: 200px"></el-input><el-button type="success" @click="addPoints" style="margin-left: 10px">新增</el-button><el-button type="warning" @click="removePoint" style="margin-left: 10px">删除</el-button></div><div id="map-container"></div></div></template>
<script>
import { Map, View,Feature } 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 VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {Point} from "ol/geom";
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,//所有点信息都放在这个图层pointLayer: new VectorLayer({source: new VectorSource(),}),form:{lon:'',lat:'',},}},mounted(){this.initMap() // 加载矢量底图},methods:{initMap() {const KEY = '你申请的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: 经纬度投影 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})})//把图层添加到地图上this.map.addLayer(this.pointLayer);//标记点初始化点击事件this.initPointEvent();},/*** 根据经纬度坐标添加自定义图标 支持base64*/addPoints() {let coordinate = [this.form.lon,this.form.lat];// 创建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,}),}),);// 要素添加到地图图层上this.pointLayer.getSource().addFeature(feature);// 设置中心this.map.getView().setCenter(coordinate);},removePoint() {let coordinate = [this.form.lon,this.form.lat];// 从图层源中获取当前要素const features = this.pointLayer.getSource().getFeatures();let _that = this;// 遍历要素,查找匹配的坐标features.forEach(feature => {const geometry = feature.getGeometry();const featureCoordinates = geometry.getCoordinates();// 检查经纬度是否匹配if (featureCoordinates[0] == coordinate[0] && featureCoordinates[1] == coordinate[1]) {// 找到匹配的要素,移除它_that.pointLayer.getSource().removeFeature(feature);}});},removeAllPoint(){// 从图层源中获取当前要素const features = this.pointLayer.getSource().getFeatures();// 遍历要素features.forEach(feature => {this.pointLayer.getSource().removeFeature(feature);});},initPointEvent(){//给点初始化点击事件this.map.on("singleclick", (e) => {let pixel = this.map.getEventPixel(e.originalEvent);let feature = this.map.forEachFeatureAtPixel(pixel, function(feature) { return feature; });let coordinate = e.coordinate;if(feature){console.log("当前点击经纬度:"+coordinate);}});}}
}
</script>
<style scoped>
#map-container {width: 100%;height: 100vh;
}
</style>

五、Gitee源码

地址:Vue2+OpenLayers添加+删除点+点击事件功能实现


http://www.ppmy.cn/devtools/150793.html

相关文章

(三)c#中const、static、readonly的区别

在 C# 中&#xff0c;const、static 和 readonly 都是用来定义不可变的值&#xff0c;但它们有一些关键的区别。让我们详细比较一下这三者的用途和特点&#xff1a; 1. const&#xff08;常量&#xff09; 编译时常量&#xff1a;const 用于声明常量&#xff0c;其值必须在编…

linux下给某个有线网卡配置DHCP服务(笔记)

最近有需求实现linux下配置有线网卡的dhcp服务&#xff0c;让linux电脑当做软路由使用* 简单记录一下具体的步骤和命令 安装必要包 sudo apt-get install isc-dhcp-server 配置网络接口 sudo nano /etc/default/isc-dhcp-server INTERFACE…

【ANGULAR网站开发】初始环境搭建(SpringBoot)

1. 初始化SpringBoot 1.1 创建SpringBoot项目 清理spring-boot-starter-test&#xff0c;有需要的可以留着 1.2 application.properties 将application.properties改为yaml&#xff0c;个人习惯问题&#xff0c;顺便设置端口8888&#xff0c;和前端设置的一样 server:por…

分布式组件底层逻辑是什么?

分布式组件是指在分布式系统中执行特定功能的模块&#xff0c;通常分布在多个物理节点上&#xff0c;共同协作完成任务。其底层逻辑包括多个方面&#xff0c;从通信和数据管理到一致性和容错设计&#xff0c;具体如下&#xff1a; 1.分布式组件的核心特点 分布性&#xff1a;功…

金融项目实战 06|Python实现接口自动化——日志、实名认证和开户接口

目录 一、日志封装及应用&#xff08;理解&#xff09; 二、认证开户接口脚本编写 1、代码编写 1️⃣api目录 2️⃣script目录 2、BeautifulSoup库 1️⃣简介及例子 2️⃣提取html数据工具封装 3、认证开户参数化 一、日志封装及应用&#xff08;理解&#xff09; &…

SQL刷题快速入门(二)

其他章节&#xff1a;SQL刷题快速入门&#xff08;一&#xff09; 承接上一章节&#xff0c;本章主要讲SQL的运算符、聚合函数、SQL保留小数的几种方式三个部分 运算符 SQL 支持多种运算符&#xff0c;用于执行各种操作&#xff0c;如算术运算、比较、赋值、逻辑运算等。以下…

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形,以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …

如何搭建 Vue.js 开源项目的 CI/CD 流水线

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…