GIS前端—地图标注

简介: GIS前端—地图标注

地图标注原理

地图标注是将空间位置信息点与地图关联,通过图标、窗口等形式把点相关的信息展现在地图上。地图标注是WebGIS应用的核心功能之一,在大众应用中十分常见。基于地图标注可以为用户提供更多个性化的地图服务,如标注兴趣点、标注目的地等。


地图标注的应用比较灵活,如果用户已知标注点准确的位置信息,则可以直接在该位置添加标注。如果用户只知道标注点的大概位置,则可以通过鼠标交互式添加标注。另外,地图标注具有多样化的显示形式,常用的标注类型有图片标注、矢量图形标注、Popup标注视图、聚合标注等。合理使用这些标注,可极大地丰富WebGIS应用,给用户耳目一新的感觉。


Leaflet提供了结构完整的地图标注类,供用户创建各种类型的标注。例如,使用L.Marker和L.Icon添加图片标注及自定义标注;使用L.Popup添加Popup标注视图;使用L.Tooltip添加提示框和文本标注;使用L.VideoOverlay实现视频展示等。Leaflet各标注类的关系图

图片标注

简单的图片标注,即用一个小图片作为标注点,在地图上叠加显示。图片标注是地图标注的基本形式之一,也是其他自定义标注的基础。Leaflet提供了L.Marker对象,供用户添加图片标注。

其构造方法为:

Latlng表示添加图片标注的坐标位置;options表示图片标注的参数设置项,如是否允许使用鼠标拖曳图片标注、设置图片标注透明度、自定义图片标注等。

本实例以天地图地图作为底图,在底图上添加一个图片标注,主要实现步骤如下。

(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。

(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。

(3)通过L.TileLayer加载一幅天地图地图进行显示。

(4)调用L.Marker添加一个图片标注。

代码如下:

文本标注

文本标注,即在地图上添加一个文本信息,用于展示地物的名称、属性、介绍等文本内容。Leaflet提供了L.Tooltip对象供用户添加文本信息,该对象需要结合图片标注L.Marker对象一起使用,通过使用bindTooltip()方法进行绑定。如果只想显示文本标注,则将图片标注的透明度设置为0。本实例以天地图地图作为底图,添加一个文本标注进行显示,主要实现步骤如下。

(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。

(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。

(3)通过L.TileLayer加载一幅天地图地图进行显示。

(4)添加L.Marker并设置透明度为0,通过bindTooltip()方法添加一个文本标注。

(5)在className属性中,设置文本标注所关联的CSS样式类名,自定义设置文本标注的外观。

代码如下:

矢量图形标注

矢量图形标注,即使用鼠标在已绘制的矢量图形上单击或进行光标悬浮时,弹出Popup标注提示该矢量图形的信息。

本实例以天地图地图作为底图,在地图上绘制一个矩形和一条折线。当使用鼠标在图形上单击或进行光标悬浮时,弹出Popup标注提示图形信息,主要实现步骤如下。

(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。

(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。

(3)通过L.TileLayer加载一幅天地图地图进行显示。

(4)在地图上绘制一个矩形和一条折线。

(5)监听图形的鼠标单击事件和鼠标悬浮事件,在事件响应函数中获取鼠标位置,在该位置上添加Popup标注,展示该图形信息。

代码如下:

目录
相关文章
|
存储 前端开发 JavaScript
GIS前端编程-Leaflet插件发布
GIS前端编程-Leaflet插件发布
120 0
|
前端开发 JavaScript 定位技术
GIS前端编程-Leaflet插件扩展
GIS前端编程-Leaflet插件扩展
182 0
|
前端开发 JavaScript 定位技术
GIS前端编程-地理事件动态模拟
GIS前端编程-地理事件动态模拟
106 0
|
前端开发 搜索推荐 定位技术
GIS前端—Popup标注视图
GIS前端—Popup标注视图
114 0
|
前端开发 数据可视化 网络协议
GIS前端-图形样式编辑
GIS前端-图形样式编辑
89 0
|
5月前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
39 0
|
8月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
121 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
8月前
|
前端开发 定位技术
前端知识笔记(十七)———地图多点标注功能
前端知识笔记(十七)———地图多点标注功能
164 1
|
存储 算法 前端开发
GIS前端编程-Leaflet前端扩展开发实践
GIS前端编程-Leaflet前端扩展开发实践
175 0
GIS前端编程-Leaflet前端扩展开发实践
|
JSON 前端开发 JavaScript
GIS前端编程-航线动态模拟
GIS前端编程-航线动态模拟
146 0

热门文章

最新文章