GIS前端-地图操作与交互

news2025/5/26 0:00:14

GIS地图操作与交互

    • 地图操作与交互基本原理
    • Leaflet提供的事件
    • 缩放控件

常用的基础功能通常是一个应用系统所必需的,如地图的缩放、导航、定位、弹出框等,它让一张静态的地图动起来,让地图承载更多的空间信息,并以友好的交互方式呈现给用户。例如,一个大众应用的旅游GIS系统,如果仅仅在Web端显示一张地图,那么这时只能看到一张静止的图片,用户无法提取更多的有用信息,没有太大的实用价值。如果在此基础上实现地图缩放控制、提供常用的测量等工具,并基于地图提供交通、饮食、住宿等一系列旅行信息的定位功能,同时实现兴趣点标注、导出图片等交互功能,才能使该旅游GIS系统富有生命力,能够为用户提供更多、更友好的地图服务。

地图操作与交互基本原理

在地图上的一切操作均要采用地图事件机制来实现,即通过鼠标的交互,使用地图相关事件触发回调函数,调用功能接口函数实现具体GIS功能。Leaflet作为新兴的前端开发框架,虽然设计简单,但拥有丰富的地图事件。Leaflet开发库的核心部分是在页面中创建地图并操纵地图,其框架如图
在这里插入图片描述

Leaflet提供的事件

包括浏览器事件和自定义的地图事件,主要由Handler类实现。浏览器事件为常用的鼠标事件,绑定到相应的DOM节点;地图事件即addLayer、addControl等,与Layer、Map等与地图相关的对象关联。在实现地图操作及地图相关功能时(如地图缩放操作与绘图、查询等WebGIS功能),通常需要添加事件监听,在事件处理方法中执行相关的功能函数。

在WebGIS二次开发中,涉及地图事件应用时,逻辑坐标与窗口坐标的转换也是一个非常关键的步骤。逻辑坐标是指地理坐标,表示真实的地理空间位置;窗口坐标是指网页中地图逻辑坐标对应的屏幕坐标,它是根据网页中地图容器布局(大小与位置),将地图逻辑坐标转换得到的。

例如,一个常见的矩形查询,需要使用鼠标在地图上绘制一个矩形,查询矩形范围内的空间要素。在实现矩形查询功能时,首先设置鼠标操作状态为矩形绘制状态;然后添加一个地图事件的监听,即添加矩形绘制鼠标弹起的事件监听,在监听事件的处理函数中获取绘制矩形的窗口坐标,将其转换为地图逻辑坐标;最后把得到的地图逻辑坐标范围作为查询条件,查询矩形范围内的空间要素。

缩放控件

放控件的主要功能是实现地图的放大和缩小操作,单击缩放控件上的加号按钮实现放大操作,单击缩放控件上的减号按钮实现缩小操作。Leaflet开发库提供的缩放控件为L.Control.Zoom,基于Leaflet开发库调用地图,地图左上角会默认显示一个缩放控件。如果想要隐藏缩放控件,则在Map容器中增加属性设置zoomControl: false即可。
本实例在天地图地图的基础上,加载Leaflet开发库中的缩放控件,主要实现步骤如下。
(1)新建一个HTML页面,加载一幅天地图地图作为底图。
(2)在加载地图的init()函数中,初始化zoomControl控件,并通过Map的addControl()方法将其加载到地图容器中。
代码如下:
在这里插入图片描述
本实例介绍的缩放控件是Leaflet封装好的功能,我们可以直接调用。但是在应用和开发时,有时需要根据实际情况对功能进行调整,那么如何实现自定义的缩放控件呢?根据对Leaflet脚本库的学习,我们发现缩放控件的实现就是对L.Control.Zoom各种参数的设置和实现,下面介绍自定义缩放控件的实例。
代码如下:
在这里插入图片描述

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

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

相关文章

YOLOv5:修改backbone为ConvNeXt

YOLOv5:修改backbone为ConvNeXt 前言前提条件相关介绍ConvNeXtYOLOv5修改backbone为ConvNeXt修改common.py修改yolo.py修改yolov5.yaml配置 参考 前言 记录在YOLOv5修改backbone操作,方便自己查阅。由于本人水平有限,难免出现错漏&#xff0c…

算法分析与设计编程题 回溯法

装载问题 题目描述 解题代码 递归回溯 // goods[i]表示货物i的重量, c1,c2分别表示货船1和货船2的载重量 vector<vector<int>> optimalLoading(vector<int>& goods, int c1, int c2) {int n goods.size(); // 货物数量int maxSum 0; // 当前最大载货…

穿山甲报错 splashAdLoadFail data analysis error

使用swift接入穿山甲&#xff0c;未接入GroMore&#xff0c;这个时候如果代码位配置错误会导致如下错误&#xff1a; splashAdLoadFail(_:error:) Optional(“Error Domaincom.buadsdk Code98764 “data analysis error” UserInfo{NSLocalizedDescriptiondata analysis error,…

基于YOLOv8模型的海洋生物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的海洋生物目标检测系统可用于日常生活中检测与定位海洋生物目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训…

贝类包纳米虫病诊断方法

声明 本文是学习GB-T 42821-2023 贝类包纳米虫病诊断方法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 242 g 57.1 mL 100 mL 1000 mL A.9 1 电泳缓冲液 50电泳缓冲液 加水定容至 室温贮存。 A.10 苏木精染液的配制方法 苏木精 无水乙醇 …

第36章_瑞萨MCU零基础入门系列教程之步进电机控制实验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

基于Python的UG二次开发入门

文章目录 基于Python的UG二次开发入门1 二次开发环境搭建1.1 安装UG1.2 安装Pycharm1.3 环境配置1.4 测试 2 NX Open介绍2.1 基础架构2.1.1 Sessions and Parts2.1.2 Objects and Tags2.1.3 Factory Objects&#xff08;工厂对象&#xff09;2.1.4 Builder Objects&#xff08;…

科兴未来 | 第十届中国(泰州)国际大健康产业高层次人才创新创业大赛公告

为加快推进青年和人才友好型城市建设&#xff0c;吸引和集聚更多海内外生物医药高层次人才来泰创新创业&#xff0c;推动大健康产业高质量发展&#xff0c;全力建设“健康名城、幸福泰州”&#xff0c;现举办第十届中国&#xff08;泰州&#xff09;国际大健康产业高层次人才创…

15W sip网络有源音箱,可外接15W无源副音箱

SV-7042VP 15W sip网络有源音箱,可外接15W无源副音箱 一、描述 SV-7042VP是深圳锐科达电子有限公司的一款壁挂式SIP网络有源音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率15W。同时它可以外接一个15W的…

STM32WB55开发(4)----配置串口打印Debug调试信息

STM32WB55开发----4.配置串口打印Debug调试信息 概述硬件准备视频教学样品申请选择芯片型号配置时钟源配置时钟树RTC时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙开启串口调试配置蓝牙参数设置工程信息工程文件设置Keil工程配置代码配置结果演示 概述…

000_差分信号

1.什么是差分信号 差分信号又叫做差模信号&#xff0c;使用差分信号传输时&#xff0c;需要2根信号线&#xff0c;这2根信号线的振幅相等&#xff0c;相位相反&#xff0c;通过2根信号线的电压差值来表示逻辑0和逻辑1。 差分信号表示逻辑值如下图&#xff1a; 2.差分信号的特…

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

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

深兰科技入围“虎嗅·大鲸榜2023工业AI高成长科技公司TOP30”

9月7日&#xff0c;虎嗅智库主办的“虎嗅2023工业AI大会”&#xff0c;在苏州工业园顺利召开&#xff0c;众多优秀工业和AI企业齐聚一堂&#xff0c;共同探讨当下人工智能在工业制造各场景、环节中所发挥的重要作用以及未来发展等重要问题。 在本次大会上&#xff0c;虎嗅正式发…

PIMPL技巧

PIMPL&#xff08;Pointer to IMPLementation&#xff09;是一种设计模式&#xff0c;也被称为“编译器实现”或“Opaque Pointer”模式。它是一种用于隐藏类的内部实现细节的C编程技巧。PIMPL的核心思想是将类的实现细节封装在一个独立的私有类中&#xff0c;并在公共接口类中…

左孩子右兄弟(2023寒假每日一题 18)

对于一棵多叉树&#xff0c;我们可以通过 “左孩子右兄弟” 表示法&#xff0c;将其转化成一棵二叉树。 如果我们认为每个结点的子结点是无序的&#xff0c;那么得到的二叉树可能不唯一。 换句话说&#xff0c;每个结点可以选任意子结点作为左孩子&#xff0c;并按任意顺序连…

【antd】使用antd的table组件onChange事件中,无法正确获取到父组件的最新state问题

先说结论 是闭包的原因导致我们的state数据在useEffect注入依赖后&#xff0c;打印的是最新值&#xff0c;而在onTableChange事件中打印获取的是闭包时的缓存值。 解决办法 引入useRef去保存state&#xff0c;这样就能确保每次拿到的引用都是新的唯一的最新值。 代码示例&a…

C++之调试内存访问错误(二百一十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

PythonUI自动化测试 —— 浏览器启动参数设置

网上的文章对小白不友好呀&#xff0c;都是给你一堆参数&#xff0c;都不教你怎么使用&#xff0c;直接跳过了最重要的部分&#xff0c;写下该文章希望对后续人有指导性作用 什么参数都不设置时的启动方式 import time from selenium import webdriver# 创建浏览器驱动参数对象…

NSSCTF之Misc篇刷题记录(16)

NSSCTF之Misc篇刷题记录&#xff08;16&#xff09; [黑盾杯 2020]encrypt[UTCTF 2020]Spectre[UTCTF 2020]Observe closely NSSCTF平台&#xff1a;https://www.nssctf.cn/ PS&#xff1a;所有FLAG改为NSSCTF [黑盾杯 2020]encrypt UTAxSlUwTkRWRVo3Um1GclpWOWxibU55ZVhCMGFX…

选择离子风棒需要注意什么?

离子风棒是一种固定式静电消除器&#xff0c;具有铜质外壳、铝制外壳、不锈钢外壳、坚固美观、风力强劲、经久耐用、耐酸碱、耐腐蚀、除静电除尘快的特点&#xff0c;适用于自动除静电除灰尘装置。 作用原理&#xff1a;离子风棒可产生大量的带正负电荷的气团&#xff0c;可以…