(二十一)WebGIS中鹰眼的实现思路

简介: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现起来非常方便。

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景

鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现起来非常方便。当然,按照博主从底层谈WebGIS这套系列的风格,在这里还是跟大家一起探讨探讨不借助第三方框架开发鹰眼的简单实现思路。

2.鹰眼功能分析

                       

3.实现思路设计

3.1主图平移时与鹰眼图的联动

a.主图进行平移时,在平移完成后抛出地图平移事件,该事件中包含真实平移地理长度(GeoPanX,GeoPanY)参数。

b.鹰眼图监听到该平移事件,获取到平移地理长度后,换算出此时对应鹰眼地图的平移屏幕坐标(screenPanX,screenPanY),与鹰眼地图canvas的XY坐标进行相加,实现鹰眼地图的联动。

c.鹰眼地图平移超出缓存瓦片范围时,需要重新获取瓦片。

3.2主图缩放时鹰眼图范围重绘

a.主图缩放时会抛出地图缩放事件,该事件中会包含此时主图屏幕范围对应的真实地理范围参数(GeoScreenLeft,GeoScreenTop,GeoScreenRight,GeoScreenBottom)以及此时的地图级别(maplevel)。

b.鹰眼图监听该缩放事件,获取到此时主图的真实地理范围,以及主图地图级别。

c.判断此时主图级别是否满足绘制主图返回的参数设置,如果满足,则在鹰眼中绘制此时的主图范围。

d.将此时的主图地理范围坐标转换为鹰眼上的屏幕坐标,在鹰眼上进行绘制。

3.3鹰眼范围框拖拽是主图联动

a.鹰眼的范围框监听鼠标事件,响应拖拽操作。

b.范围框拖拽完毕后,会将拖拽的真实地理长度(eagleGeoPanX,eagleGeoPanY)以参数的形式随同鹰眼平移事件一起被触发。

c.主图监听鹰眼平移事件,获取到鹰眼真实平移地理长度后进行换算成与主图对应的屏幕平移坐标,对主图进行平移。

d.主图平移后,再次触发主图平移事件,如3.1中流程所描述,最后鹰眼也会进行平移联动。

3.4注意事项

a.鹰眼上地图不能相应鼠标事件(缩放、平移)。

b.鹰眼上的范围框颜色应该可以定制。

4.成果展示

 

 

                                                             -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

 

目录
相关文章
|
11月前
|
SQL 安全 算法
网络安全与信息安全的全面解析:应对漏洞、加密技术及提升安全意识的策略
本文深入探讨了网络安全和信息安全的重要性,详细分析了常见的网络安全漏洞以及其利用方式,介绍了当前流行的加密技术及其应用,并强调了培养良好安全意识的必要性。通过综合运用这些策略,可以有效提升个人和企业的网络安全防护水平。
|
数据采集 数据可视化 API
利用R语言和curl库实现网页爬虫的技术要点解析
利用R语言和curl库实现网页爬虫的技术要点解析
|
存储 人工智能 OLAP
LangChain+通义千问+AnalyticDB向量引擎保姆级教程
本文以构建AIGC落地应用ChatBot和构建AI Agent为例,从代码级别详细分享AI框架LangChain、阿里云通义大模型和AnalyticDB向量引擎的开发经验和最佳实践,给大家快速落地AIGC应用提供参考。
131560 94
|
数据采集 机器学习/深度学习 监控
Arm Coresight 介绍
Coresight 是 ARM 架构上的一款嵌入式系统监控和调试工具,能够为系统管理员和开发人员提供便捷的系统监控和调试功能。该平台可以实时追踪和分析处理器上的活动,以深入了解潜在的性能瓶颈和问题。本文将介绍Coresight的概念、优势及其安装、配置、故障排除和调试等方面的内容,并探讨其未来发展方向和重要性。
2126 1
|
编解码 算法 ice
Google Earth Engine ——MCD19A2 V6数据产品是MODIS Terra和Aqua结合的大气校正多角度实施(MAIAC)陆地气溶胶光学深度(AOD)网格化2级产品,1公里分辨率
Google Earth Engine ——MCD19A2 V6数据产品是MODIS Terra和Aqua结合的大气校正多角度实施(MAIAC)陆地气溶胶光学深度(AOD)网格化2级产品,1公里分辨率
1164 0
Google Earth Engine ——MCD19A2 V6数据产品是MODIS Terra和Aqua结合的大气校正多角度实施(MAIAC)陆地气溶胶光学深度(AOD)网格化2级产品,1公里分辨率
|
数据采集 机器学习/深度学习 算法
Matlab函数——mapminmax
Matlab函数——mapminmax
382 0
|
缓存 NoSQL 数据库
如何保证缓存(redis)与数据库(MySQL)的一致性
【说明】  对于热点数据(经常被查询,但不经常被修改的数据),我们可以将其放入redis缓存中,以增加查询效率,但需要保证从redis中读取的数据与数据库中存储的数据最终是一致的。本文基于“孤独烟”与“58沈剑”两位的文章,针对一致性的问题进行了汇总总结,两位的原文链接见文末。
25655 3
|
6月前
|
编解码 JSON 物联网
腾讯开源HunyuanVideo-I2V图生视频模型+LoRA训练脚本,社区部署、推理实战教程来啦!
继阿里的通义万相wan2.1模型之后,腾讯混元又出大招,重磅发布HunyuanVideo-I2V图生视频模型。
753 9
|
10月前
|
算法 安全 网络协议
政务网站使用的国密SSL证书申请
国密SSL证书采用我国自主研发的SM2公钥算法体系及国密SSL安全协议,符合国家政策与法规要求,提供身份验证、数据加密和完整性保护,广泛应用于政府机构的信息系统,确保政务数据安全。以下是申请步骤简介。
政务网站使用的国密SSL证书申请
|
11月前
|
SQL 关系型数据库 MySQL
Python中Pymysql库的常见用法和代码示例
`pymysql` 是一个用于连接 MySQL 数据库的 Python 库,支持 SQL 查询的执行和结果处理。通过 `pip install pymysql` 安装后,可使用 `connect()` 方法建立连接,`cursor()` 创建游标执行查询,包括数据的增删改查,并通过 `commit()` 和 `rollback()` 管理事务,最后需关闭游标和连接以释放资源。
517 0