(二十一)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/

 

目录
相关文章
|
3月前
|
数据采集 SQL 数据可视化
大数据可视化技巧:借助PowerBI提升数据故事讲述力
【4月更文挑战第8天】Power BI助力大数据可视化,支持多种数据源连接,如SQL Server、Excel,提供数据清洗与转换功能。通过选择合适图表类型、运用颜色和大小强化表达,创建交互式仪表板。讲述数据故事时,注重故事主线设计,利用叙事技巧引导观众,并添加文本说明。分享已完成报告,提升数据驱动决策能力。动手实践,体验Power BI的强大与易用。
107 0
|
10月前
|
存储 前端开发 JavaScript
潮玩宇宙大逃杀无聊猿卷轴模式系统开发详细规则丨步骤需求丨方案项目丨技术架构丨源码功能
确定游戏类型和规则:明确无聊猿卷轴模式游戏类型和游戏规则,包括敌人类型、地图设计、任务类型、战斗机制等。
|
20天前
|
开发框架 前端开发 JavaScript
看图知义,Winform开发的技术特点分析
看图知义,Winform开发的技术特点分析
|
2月前
|
C++
经验大分享:QtQwdget汽车仪表知识点拆解6自定义控件
经验大分享:QtQwdget汽车仪表知识点拆解6自定义控件
15 2
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-旅游地图重构2
前端学习笔记202305学习笔记第二十三天-旅游地图重构2
43 0
前端学习笔记202305学习笔记第二十三天-旅游地图重构2
|
11月前
|
机器学习/深度学习 传感器 安全
2023年高教杯A题定日镜场的优化设计思路及参考代码(持续更新)
2023年高教杯A题定日镜场的优化设计思路及参考代码(持续更新)
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-旅游地图重构
前端学习笔记202305学习笔记第二十三天-旅游地图重构
38 0
|
编解码 iOS开发
一节微课诞生的全过程(无保留分享,望收藏)
本来是想以直播的方式把制作这节微课的过程分享出来,但考虑到大家的时间不统一,制作过程太长,这节微课录音之后制作动画就足足用了两天
172 0
|
存储 编译器
IAT表入门简析【滴水逆向三期52笔记】
IAT表入门简析【滴水逆向三期52笔记】
|
Android开发 容器
深度好文|Android事件分发机制分析(已重新排版)
深度好文|Android事件分发机制分析(已重新排版)
深度好文|Android事件分发机制分析(已重新排版)