GIS前端-地图事件编程

news2024/11/26 17:23:34

GIS前端-地图事件编程

    • 图层操作事件
    • 地图状态事件
    • 交互事件
    • 弹出框事件
    • 导出PDF

在地图上的一切操作均要采用地图事件机制来实现,即通过鼠标、键盘等交互,触发地图相关事件,进而调用相关功能接口函数实现相应的GIS功能。在具体的实现过程中,我们需要对地图的操作行为进行事件监听,有关Map对象的事件监听方法如表
在这里插入图片描述
有关Map对象的事件注册及注销代码如下:
在这里插入图片描述
上述代码介绍了给Map对象添加事件、移除事件、激发事件的方法。如果读者感兴趣,则可以参考Leaflet官网(https://leafletjs.com)查看更详细的内容。其实,所有事件调用的方法都是相似的,复杂的事件可以被看成多个简单事件的组合。Leaflet的地图事件主要有以下几类:图层操作事件、地图状态事件、交互事件和弹出框事件

图层操作事件

图层操作事件,即对地图容器中的图层进行操作的事件。Leaflet开发库中包含的图层操作事件及其说明
在这里插入图片描述
在这里插入图片描述

地图状态事件

地图状态事件,即地图状态改变时触发的一系列事件。Leaflet开发库中包含的地图状态事件及其说明如
在这里插入图片描述
地图移动结束事件代码如下:
在这里插入图片描述

交互事件

交互事件包括鼠标事件和键盘事件,即通过鼠标或键盘触发的事件。Leaflet开发库中的鼠标事件和键盘事件及其说明在这里插入图片描述

弹出框事件

弹出框事件,即某种行为触发的弹出框行为事件,常见的弹出框事件及其说明
在这里插入图片描述

弹出框弹出事件与关闭事件代码如下:
在这里插入图片描述
对Leaflet的地图控件、地图操作和地图事件有了一定程度的了解,结合丰富的实例读者也会掌握各个基础功能的具体实现方法。基础功能对一个WebGIS应用来说至关重要,它能让一张静态的地图动起来,让地图承载更多的空间信息,并以友好的交互方式呈现给用户。

导出PDF

,即把地图中所显示的内容以PDF格式导出到本地。下面以Leaflet插件资源库中的leaflet.browser.print插件为例,创建L.control.browserPrint类对象,通过printModes设置PDF导出模式,将导出控件添加至地图中,主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)在区域中添加导出PDF功能所需的leaflet.browser.print.min.js脚本库,该脚本库下载地址为https://github.com/Igor-Vladyka/leaflet.browser.print。
(3)在加载地图的init()函数中,初始化插件库中的导出PDF控件L.controlbrowserPrint,并将其添加到地图容器中。
代码如下:
在这里插入图片描述
卷帘
卷帘,即地图的遮罩效果,用户可以通过一个滑动按钮来控制图层之间的DOM样式,进而动态改变地图显示的范围。下面以Leaflet插件资源库中的Leaflet.Control.SideBySide插件为例(下载地址为https://github.com/digidem/leaflet-side-by-side),分别加载显示天地图矢量图层和天地图影像图层,通过插件封装的L.Control.SideBySide类创建卷帘控件并添加至地图中,从而实现卷帘效果,如
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1009089.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

logstash无法精确到毫秒级解决方案

问题描述 最近遇到这样一个问题:logstash想要动态更新数据库内容,常用的方法是在conf文件里设置。这里我选择用timestamp记录 # 数据追踪 # 追踪的字段 tracking_column > "update_time" tracking_column_type > "timestamp"…

【LeetCode-中等题】 454. 四数相加 II

文章目录 题目方法一:哈希表 题目 方法一:哈希表 哈希表记录前两个数组的和以及出现次数,然后记录后面两个数组的和,成功将四数之和转换为两数之和 因为本题特殊在和是为0 的 所以后面的两个数组之和取反 如果能在map的key中存在…

关于rsync用不了之后

1.尝试找出rsync使用错误原因: 我遇见一个问题:rsync:read errors mapping:communication error on send (70),我查了一下这个问题很大可能是网络链接导致的,然后我用nslookup指令查看了/train2…

python-爬虫-爬取中华人民共和国农业农村部网站公开的农产品批发价格中的蔬菜价格周数据

中华人民共和国农业农村部 http://www.moa.gov.cn/ 点击数据 → 点击周度数据 → 跳转网页 http://zdscxx.moa.gov.cn:8080/nyb/pc/frequency.jsp 分析 抓包,发现getFrequencyData里面有我们想要的数据 查看请求的提交参数 使用postman接口测试工具测试验证ge…

华为云征文|华为云云耀云服务器L实例使用教学

目录 国内免费云服务器(体验) 认识国内免费云服务器 如何开通国内免费云服务器 云耀云服务器 HECS HECS适用于哪些场景? 网站搭建 电商建设 开发测试环境 云端学习环境 为什么选择华为云耀云服务器 HECS 国内免费云服务器&#xff…

MES管理系统和ERP系统在生产制造管理中的应用

MES生产管理系统通过过程管理、质量管理、设备管理、产品跟踪和溯源、性能分析和物料管理等方面来管理生产制造,旨在建立规范的生产管理信息平台,提高企业核心竞争力。ERP系统则通过制定生产计划、细分物料需求计划、车间订单下达和生产回报等步骤进行生…

推荐9个好玩的AI作图网站

1、Mental AI Mental AI是一款国产的AI作图网站,它访问方便,使用简单,是更适合国内设计师使用的AI作图网站推荐。在Mental AI中,设计师既可以使用文字描述的方式来生成图片,也可以使用叠加模型的方式来生成图片&#x…

点击劫持概念及解决办法

1.点击劫持的概念 点击劫持 (Clickjacking) 技术又称为界面伪装攻击 (UI redress attack ),是一种视觉上的欺骗手段。攻击者使用一个或多个透明的 iframe 覆盖在一个正常的网页上,然后诱使用户在该网页上进行操作,当用户在不知情的情况下点击…

靶场上新:Openfire身份认证绕过

本文由掌控安全学院-江月投稿 封神台新上线漏洞复现靶场:Openfire身份认证绕过。 漏洞详情: Openfire是采用Java编程语言开发的实时协作服务器,Openfire的管理控制台是一个基于Web的应用程序,被发现可以使用路径遍历的方式绕过…

GIS前端编程 地图常用操作

GIS前端编程 地图常用操作 地图背景设置地图定位地图级数控制获取显示参数 地图操作是WebGIS应用的基本功能,如缩放、移动等操作。在实际WebGIS应用中,地图操作方式多种多样。下面主要介绍以下几种地图操作:地图背景设置、地图定位、地图级数…

WebDAV之π-Disk派盘 + BubbleUPnP

BubbleUPnP是一款功能强大的Android播放器,支持UPnP/DLNA多屏互动。它可以将手机内容投屏到电视大屏上,与家人和朋友一起共享。此外,BubbleUPnP还提供了丰富的音乐和影视资源,您可以在线搜索并播放喜欢的内容。 以下是BubbleUPnP的一些主要特点: 1. 支持Chromecast和转码…

2023 致远OA-任意用户密码重置漏洞

一、致远OA 致远OA是一款企业级办公自动化软件,它提供了一系列的办公自动化解决方案,包括文档管理、流程管理、协同办公、知识管理、人力资源管理等功能。致远OA可以帮助企业实现信息化管理,提高工作效率和管理水平,同时也可以提高…

【Linux 运维必备的 13 款实用工具,赶紧收藏~】

转载:https://blog.csdn.net/jb19900111/article/details/17756183 本文介绍几款Linux运维比较实用的工具,希望对Linux管理员有所帮助。 1、查看进程占用带宽情况-Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽。 …

【教学类-32-03】20230906十二生肖3.0上课版(绘画+手工+排序+左右分类+玩牌)(大班:《我是中国人》偏科学-数)

背景需求: 8月30日收到一个信息技术比赛的通知,9月10日前完工,单位里大活动很多,人手极度不足。作为信息员,只能自己顶上,做课件、开录课,完成这来之不易的KPI(去年疫情&#xff0c…

【Prometheus】Prometheus+Grafana部署

Prometheus 概述 官网https://prometheus.io/docs/introduction/overview/ Prometheus 是一款基于时序数据库的开源监控告警系统,非常适合Kubernetes集群的监控。Prometheus的基本原理是通过HTTP协议周期性抓取被监控组件的状态,任意组件只要提供对应的…

批量处理长视频,提高视频制作效率的技巧分享

在视频制作过程中,我们常常需要处理大量的长视频,例如从拍摄的整个影片中剪出某些特定的片段,或者需要把一个长的视频分割成多个小片段。这个过程可以是极其耗时和困难的,但幸运的是,现在有许多工具可以帮助我们自动化…

Biome-BGC生态系统模型与Python融合

目录 一 模式讲解 二 学习基础 三 数据处理 四 单点的模拟 五 区域模拟-1 六 长时间序列模拟案例 七 分析 Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数,模拟日尺度碳、水和氮通量的有效模型,其研究的空间尺度可以从点尺度扩展到陆地…

堆的实现(C版)

普通的二叉树是不适合用数组来存储的,因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆(一种二叉树)使用顺序结构的数组来存储,需要注意的是这里的堆和操作系统虚拟进程地址空间中的堆是两回事,一个是…

2023 年最新 Docker 容器技术基础详细教程(更新中)

Docker 基本概述 Docker 是一个开源的应用容器引擎,它让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux 或 Windows 操作系统的机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间…

【PickerView案例08-国旗搭建界面加载数据 Objective-C预言】

一、来看我们第三个案例 1.来看我们第三个关于PickerView的一个案例, 首先呢,我要问大家一下, 咱们这个是几组数据呢, 这是一个pickerView,只不过,它显示的是什么,一个界面, 前面两个案例,都是文字 这个案例,开始有图片了, 总结一下这三个案例: 1)第一个案例…