GIS前端编程 地图常用操作

简介: 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()函数中,初始化图层探查器并将其添加到地图容器中。

代码如下:

目录
相关文章
|
7月前
|
缓存 前端开发 JavaScript
【面试题】4月面经 前端常考JS编程题
【面试题】4月面经 前端常考JS编程题
|
2月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
91 1
|
4月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
595 1
|
6月前
|
机器学习/深度学习 人工智能 前端开发
未来趋势下的前端开发:可视化编程的崛起
随着人工智能和机器学习技术的不断发展,前端开发领域也在逐渐迎来变革。本文探讨了未来趋势下前端开发的发展方向,重点介绍了可视化编程在前端开发中的应用和优势,以及对传统前端开发方式的影响。
|
6月前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
61 3
|
7月前
|
SQL 机器学习/深度学习 前端开发
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
|
7月前
|
前端开发
前端常见编程题一
前端常见编程题一
|
7月前
|
存储 前端开发 JavaScript
前端常见编程题二
前端常见编程题二
|
7月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
108 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
下一篇
DataWorks