利用Leaflet.js创建交互式地图:绘制多个多边形和点位

2024-08-31 18:20

本文主要是介绍利用Leaflet.js创建交互式地图:绘制多个多边形和点位,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言

        在地理信息系统(GIS)和地图可视化领域,Leaflet.js是一个轻量级但功能强大的JavaScript库,它提供了丰富的API来创建交互式地图。本文将通过一个实际的Vue组件示例,展示如何使用Leaflet.js在地图上绘制多边形和点位,并且实现多边形上文字的动态缩放效果。

功能概述

        1.地图初始化

                首先,我们需要在Vue组件中初始化地图,设置中心点、缩放级别,并添加地图瓦片。

        2.多边形绘制

                通过给定的坐标点数据,我们使用Leaflet.js的L.polygon方法在地图上绘制多边形区域。

        3.点位图标添加

                在地图上添加视频监控点位,使用自定义图标,并为每个点位添加点击事件。

        4.响应式文字显示

                根据地图的缩放级别,动态调整多边形上文字的显示和隐藏,提升用户体验。

实现步骤

        这里提供的代码块仅展示了部分关键功能,以帮助读者理解整个实现过程,完整的代码和项目资源可以在个人中心-资源库获取

        1. 地图初始化

                在Vue组件的mounted生命周期钩子中初始化地图,并添加地图瓦片

initMap() {this.map = L.map("mapRef", {center: [21.582007, 111.824558],zoom: 15,zoomControl: false,doubleClickZoom: false,attributionControl: false,});this.name = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {maxZoom: 19,attribution: '© OpenStreetMap contributors',}).addTo(this.map);
}

        2. 绘制多边形

                使用setBethAlreadyArea方法,将多边形数据转换为Leaflet.js所需的格式,并在地图上绘制。

setBethAlreadyArea(arr) {arr.map((item) => {let options = item.berthCoordinate.split(";").map((p) => p.split(",").map(Number));let marker = L.polygon(options, {color: item.lineColor,weight: item.lineFineness,fillColor: item.berthColour,fillOpacity: 0.5,}).addTo(this.map);// ...省略文字添加和事件绑定代码});
}

        3. 添加点位图标

                使用setVideoIcon方法,为每个视频监控点位添加图标,并绑定点击事件。

setVideoIcon(arr) {let videoIcon = L.icon({iconUrl: require("@/assets/images/berth/videoIcon.png"),iconSize: [25, 25],iconAnchor: [0, 0],popupAnchor: [-3, -76],});arr.map((item) => {let video = L.marker(item.position, { icon: videoIcon }).addTo(this.map).on("click", (e) => this.videoSurveillance(item));});
}

        4. 响应式文字显示

        根据地图的缩放级别,动态调整多边形上文字的显示。

handleZoomChange(e) {const zoomLevel = e.target._zoom;const minZoomToShowText = 15;this.map.eachLayer((layer) => {if (layer instanceof L.Marker && layer.options.icon.options.className === "my-div-icon") {layer.setOpacity(zoomLevel < minZoomToShowText ? 0 : 1);}});
}

        5. 自动调整地图大小

        使用MutationObserver监听DOM变化,自动调整地图大小以适应不同屏幕尺寸。

autoSize() {new MutationObserver(() => this.map.invalidateSize()).observe(this.$refs.mapRef, {attributes: true,attributeFilter: ["style"],});
}

结语

        通过上述步骤,我们成功实现了一个基于Vue.js和Leaflet.js的交互式地图组件,它不仅能够绘制多边形和点位,还能够根据用户的缩放操作动态调整文字的显示。这种类型的组件在渔业监控、城市管理、环境监测等领域有着广泛的应用前景。

这篇关于利用Leaflet.js创建交互式地图:绘制多个多边形和点位的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1124647

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

Codeforces Round #113 (Div. 2) B 判断多边形是否在凸包内

题目点击打开链接 凸多边形A, 多边形B, 判断B是否严格在A内。  注意AB有重点 。  将A,B上的点合在一起求凸包,如果凸包上的点是B的某个点,则B肯定不在A内。 或者说B上的某点在凸包的边上则也说明B不严格在A里面。 这个处理有个巧妙的方法,只需在求凸包的时候, <=  改成< 也就是说凸包一条边上的所有点都重复点都记录在凸包里面了。 另外不能去重点。 int