GIS前端编程 地图常用操作

news2024/11/26 19:58:19

GIS前端编程 地图常用操作

    • 地图背景设置
    • 地图定位
    • 地图级数控制
    • 获取显示参数

地图操作是WebGIS应用的基本功能,如缩放、移动等操作。在实际WebGIS应用中,地图操作方式多种多样。下面主要介绍以下几种地图操作:地图背景设置、地图定位、地图级数控制、获取显示参数、图层探查、图层组控制、图层层级控制、导出图片、导出PDF、卷帘。

地图背景设置

地图背景可以用一张背景图片填充,当地图缩放的范围较大时,地图周围填充背景图片,避免出现空白,同时起到美化作用,效果如图
在这里插入图片描述
主要实现步骤如下。
(1)新建一个HTML页面,参照2.4.2节加载一幅天地图地图作为底图。
(2)在地图容器div中设置背景图片样式,即设置background-image为一张背景图片,该背景图片存储在网站的某一个目录下。
代码如下:
在这里插入图片描述

地图定位

地图定位与移动操作类似,目的是使地图自动移动到以某一个点为屏幕中心的位置。移动操作是通过鼠标交互任意移动地图,地图定位则有一个固定的目标位置,以某一个固定点为屏幕中心,将地图移动到目标位置上。地图定位功能可以调用Map类中的setView()方法实现。
使用地图定位,用户可以在当前显示级别下以某一个点为屏幕中心定位地图,也可以将地图定位到某一级别的目标位置。
本实例在天地图地图的基础上,实现地图的定位功能,主要实现步骤如下。
(1)新建一个HTML页面,加载一幅天地图地图作为底图。
(2)在地图容器的div中创建定位按钮,并为定位按钮添加相应的单击函数,在该单击函数中调用的定位方法为map.setView()。
代码如下
在这里插入图片描述

地图级数控制

地图级数控制,即根据需求更改地图视图的显示级数,用户可以通过Map类中的setView()方法实现。本实例在天地图地图的基础上,在文本框中输入参数,单击按钮后动态更改当前视图的显示级数,主要实现步骤如下。
(1)新建一个HTML页面,加载一幅天地图地图作为底图。
(2)在地图容器div中添加文本框及按钮,并为按钮添加单击事件,在该单击事件中实现地图显示级数控制的方法为map.setView()。
代码如下:
在这里插入图片描述

获取显示参数

获取显示参数,即获取当前地图视图的各种状态参数值,如当前中心、当前级数、当前地图范围、当前视口范围等。在Leaflet中可以通过Map类中的getCenter()、getZoom()、getBounds()、getSize()方法来获取这些参数。
本实例在天地图地图的基础上,通过单击按钮弹出对应的地图参数信息,主要实现步骤如下。
(1)新建一个HTML页面,
加载一幅天地图地图作为底图。
(2)在地图容器div中添加按钮,并为按钮添加单击事件,在该按钮的单击事件方法中分别调用Map类中的getCenter()、getZoom()、getBounds()、getSize()方法来获取相应的显示参数。
代码如下:
在这里插入图片描述
图层探查
图层探查,即对置于地图下方的图层进行一定范围的探查,以便用户查看到不易察觉的地理地况。
下面以Leaflet插件资源库中的插件为例,通过封装好的L.MagnifyingGlass类创建图层探查器,并设置探查图层、探查半径等参数,从而实现图层探查功能,主要实现步骤如下。
(1)新建一个HTML页面,加载一个天地图矢量图层和一个天地图影像图层。
(2)在区域中添加leaflet.magnifyingglass.css样式表和leaflet.magnifyingglass.js脚本库,插件下载地址为https://github.com/bbecquet/Leaflet.MagnifyingGlass。
(3)在加载地图的init()函数中,初始化图层探查器并将其添加到地图容器中。
代码如下:

在这里插入图片描述

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

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

相关文章

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)第一个案例…

ClientDataSet运行中出现“ClientDataSet:dataset not in edit or insert mode”

在打开数据表文件,对ClientDataSet执行Append或Insert时,“ClientDataSet:dataset not in edit or insert mode”: 一、搜索问题 1、执行“显示数据后”,再执行Append,出错,说明ClientDataSet处…

07-Redis缓存设计

上一篇:06-Redis缓存高可用集群 1.缓存穿透 缓存穿透是指查询一个根本不存在的数据, 缓存层和存储层都不会命中, 通常出于容错的考虑, 如果从存储层查不到数据则不写入缓存层。 缓存穿透将导致不存在的数据每次请求都要到存储…

身份和访问管理解决方案:混合型IAM

对于依赖于本地 IT 基础结构和传统安全模型的组织,可以更轻松地验证和授权企业网络内的所有内容,包括设备、用户、应用程序和服务器。尝试从公司网络外部获取访问权限的用户使用虚拟专用网络 (VPN) 和网络访问控制 (NA…

C# 嵌套循环

例子说明 循环遍历xml文件中的信息包括&#xff1a;节点名称&#xff08;一个&#xff09;&#xff0c;节点的串联值&#xff08;一个&#xff09;&#xff0c;节点的属性&#xff08;多个&#xff09; Xml文件 <?xml version"1.0" encoding"utf-8" …

djangoMTV初探

1.restful请求方式 一个视图对应多个操作&#xff08;增删改查&#xff09; 老的方式 views.py from django.shortcuts import render from django.http import HttpResponse,request,QueryDict, JsonResponse from myapp.models import User from django.views.generi…

zTasker—简洁易用强大的定时热键一体自动化工具,效率倍增器

软件名称 zTasker 应用平台 PC Windows7及以上 一句简介 市面上定时类软件很多&#xff0c;但无一例外功能都很单一&#xff0c;要完成不同的任务&#xff0c;需要不同的软件 市面上的热键软件&#xff0c;要么功能少&#xff0c;要么像是AutoHotKey这样对于一般用户太专业…

Flutter插件的制作和发布

Flutter制作插件有两种方式&#xff08;以下以android和ios为例&#xff09;&#xff1a; 目录 1.直接在主工程下的android和ios项目内写插件代码&#xff1a;2.创建独立Flutter Plugin项目&#xff0c;制作各端插件后&#xff0c;再引入项目&#xff1a;1. 创建Flutter Plugin…

《深入PostgreSQL的存储引擎:原理与性能》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

Multisim14.0仿真(十四)电压跟随器

一、仿真原理图&#xff1a; 二、仿真效果图&#xff1a;

Ae 效果详解:CC Pixel Polly

模拟/CC Pixel Polly Simulation/CC Pixel Polly CC Pixel Polly&#xff08;CC 像素多边形&#xff09;基于源图像分解成多个破碎的像素多边形&#xff0c;无需设置关键帧自动生成碎片飞散的动画效果。 ◆ ◆ ◆ 效果属性说明 Force 力量 用于控制像素分解的力量大小。 默认…