GIS前端-地图事件编程

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.hqwc.cn/news/108622.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openpnp - 设备电源抗干扰部件的选择

文章目录 openpnp - 设备电源抗干扰部件的选择概述END openpnp - 设备电源抗干扰部件的选择 概述 设备电源部分的干扰主要来自伺服和真空泵. 伺服是设备开机期间, 一直供电, 采用滤波器比较好. 型号为 CW4L2-10A-S(004)或者CW4-10A-S(004) CW4L2-10A-S(004)是二级滤波. CW4-1…

07 目标检测-YOLO的基本原理详解

一、YOLO的背景及分类模型 1、YOLO的背景 上图中是手机中的一个app,在任何场景下(工业场景,生活场景等等)都可以试试这个app和这个算法,这个app中间还有一个button,来调节app使用的模型的大小,更大的模型实时性差但精…

从零基础到精通Flutter开发:一步步打造跨平台应用

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 导言 Flutter是一种流行…

【HTML专栏2】VSCode的使用(新建HTML文件)

本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。 博客主页:Duck Bro 博客主页系列专栏:HTML/CS…

linux 多重启动grub2详解

https://www.gnu.org/software/grub/manual/grub/grub.pdf

合并单元格中自动填充数字序列的方法详解

我们如何在Excel中将序列号填充到不同大小的合并单元格列表中?我们首先想到的是拖动“自动填充”手柄来填充合并的单元格,但在这种情况下,我们将收到以下警告消息,并且无法填充合并的单元。 有没有一种方法可以在不必手动键入数字的情况下对合并的单元格进行编号? 例如,…

HTML基础标签 CSS选择器 JavaScript基础语法 WebAPI_ 页面设计 HTTP协议

第 1 题(简答题) 题目名称: 编写博客, 总结 HTML 中的常用标签用法 题目内容: 编写博客, 总结 HTML 中的常用标签用法 第 2 题(简答题) 题目名称: image 标签的 alt 和 title 属性有什么…

华为云云耀云服务器L实例评测|基于华为云云耀云服务器L实例搭建EMQX大规模分布式 MQTT 消息服务器场景体验

文章目录 前言一、😄华为云云耀服务器二、😄产品实例创建相关1、🧨开通华为云云耀服务器2、🧨创建华为云云耀服务器实例3、🧨终端登录4、🧨华为云云耀云服务器密码重置 三、😄安装开源产品EMQX四…

设计模式汇总

设计模式本质上是某类特定问题的代码设计解决方案,实际上是一套某类问题的代码设计经验总结。(前辈总结的解决某类问题的切实可行的套路) 问题 1、为什么要使用设计模式? 答:1、 提高代码复用率,降低开发成…

计算机系统的基本概念

计算机系统的基本概念 本文主要以hello.c这个程序的整个生命周期来简单了解一下计算机系统结构的基本概念。 #include <stdio.h>int main() {printf("hello, world\n");return 0; }gcc hello.c -o hello ./hello hello, world此刻&#xff0c;hello.c源程序…

【办公自动化】用Python批量从上市公司年报中获取主要业务信息

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【Proteus仿真】【STM32单片机】四驱寻迹避障小车

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后&#xff0c;LCD1602显示红外、超声波检测状态和距离、小车运行状态。可通过K1键可手动切换模式&#xff0c;寻迹、避障、蓝牙遥控&#xff1b;也可通过蓝牙发送指令切换模式&#xff1b; 当处…