基于AGS JS开发自定义贴图图层

简介: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/1.前言假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示)。

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

1.前言

假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示)。如果利用传统方案,则是我们首先将图片纠正赋予地理信息,然后根据地图级别进行切图,最后以瓦片的形式叠加至地图上,工作量是很大的。然而考虑到图片本身不会太大(小于3M),那么有没有其他方法来解决呢。这里我和大家一起探讨几种解决思路。

2.解决思路

2.1基于grahpicsymbol来解决

2.1.1思路描述

简单说就是获取图片左上角和右下角对应的地理坐标,给grahpic的geometry赋上左上角坐标,grahpic的symbol赋予图片的url、以及通过地理坐标转换获取到的两点屏幕坐标间的screenwidth和screenheight。这里尤其要注意symbol的xoffset和yoffset两个属性值需(+screenwidth/2,-screenheight/2)。最后监听地图的缩放事件,做相关的symbol的width和height计算即可。

2.1.2讨论

优势是实现简单:

a.直接利用AGS已有对象完成。

b.不用考虑拖拽时的坐标变化等。

劣势:当地图放大到一定级别,symbol的长宽大过地图屏幕范围时则symbol将不再渲染。

2.2直接添加DIV+IMG来解决

2.2.1思路描述

直接在Map所在的ParentDIV中为图片创建的DIV+IMG,原理与思路一相同,通过换算地理坐标的屏幕坐标来设置各IMG的长宽以及DIV的left和top。这里尤其需要注意的是对地图拖拽事件同样需要监听并进行相关处理。

2.2.2讨论

优势:地图缩放到任意级别都能同样缩放展示图片。

劣势:图片本身无法响应地图事件,比如当鼠标在图片上,缩放、拖拽均不能进行。

2.3继承AGSLayer来自定义开发贴图图层

除需要继承Layer外,其他思路与思路二没有太大区别。但是可以规避思路一中图片超过屏幕范围无法显示的问题,也能规避思路二中的鼠标在图片上时无法进行地图操作的问题。

2.4总结

考虑到思路一和思路二中的明显劣势问题,采用思路三是更好的选择。

3.详细实现(继承AGSLayer开发贴图图层)

3.1继承layer重写相关方法

  在Map的DOM中新增一个DIV:

当图层从Map中去除时去掉所有监听事件:

3.2监听缩放事件进行重绘

对于每一个IMG的width和height要根据目前四角坐标对应的屏幕坐标进行换算:

3.3监听平移事件进行坐标变化

4.几点注意

a.当继承的是Layer时,setMap函数需要返回的必须是用DOJO生成的DIV。假如继承的是GraphicLayer,返回的不能为DIV,因为GrahpicLayer其是SVG构造。

b.为提高显示效率,平移重绘的最好方法是直接改变DIV的左上角位置,而不是对所有IMG进行删除再重新添加。

5.结果展示

以归元寺为例子:

                                   

 

 

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

                                                                           如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                                                                                                    

目录
相关文章
|
8天前
|
Web App开发 缓存 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第26天】本文将引导你了解Node.js的基本原理,并通过实际案例展示如何在后端开发中应用它。我们将从Node.js的核心概念讲起,逐步深入到构建一个完整的后端服务,最后探讨如何优化你的Node.js应用。准备好让你的开发技能更上一层楼了吗?让我们一起潜入Node.js的世界!
|
11天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第23天】在这篇文章中,我们将探索Node.js的世界,了解它如何改变后端开发的面貌。通过实际案例和代码示例,我们不仅学习Node.js的核心概念,还会深入探讨它的高级特性,如异步编程、事件驱动模型以及微服务架构的应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和实用技能,帮助你构建更高效、可扩展的后端系统。
44 19
|
9天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第57天】本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
7天前
|
Web App开发 JavaScript 前端开发
探索现代JavaScript开发:ECMAScript提案的未来
JavaScript是最受欢迎的编程语言之一,其发展迅速。ECMAScript(JS的标准化版本)的提案和更新为其带来了诸多新特性和改进。本文将介绍值得关注的ECMAScript提案,如可选链、空值合并运算符、逻辑赋值运算符、类字段和顶级Await,并展示如何利用这些新特性提升开发效率和代码质量。通过关注TC39提案流程、使用Babel和TypeScript等工具,开发者可以提前体验并利用这些新特性。随着JavaScript的不断进步,未来将有更多令人期待的功能加入。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第25天】本文将带你了解Node.js的基本概念和核心优势,同时提供一些实际的代码示例来加深理解。无论你是初学者还是有一定经验的开发者,都能通过本文获得有价值的信息和技巧。让我们一起探索Node.js的世界吧!
|
19天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第15天】在数字化浪潮中,Node.js作为一颗耀眼的星辰,为后端开发领域注入了活力与创新。本文将带你领略Node.js的魅力所在,探索其架构设计、性能优化及实战应用,让你在轻松愉快的氛围中掌握Node.js后端开发的精髓。
|
23天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
21天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第13天】本文将带你进入Node.js的世界,从基础概念到实际案例,深入浅出地探讨如何利用Node.js进行后端开发。通过本文的学习,你将了解Node.js的工作原理、核心模块、以及如何构建一个简单的Web应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
23天前
|
Web App开发 JavaScript NoSQL
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为技术支柱之一,承载着数据处理和业务逻辑实现的重要任务。本文将通过浅显易懂的方式,带你走进Node.js的世界,从基础概念到实战应用,逐步揭开后端开发的神秘面纱。无论你是编程新手还是希望扩展技术栈的开发者,这篇文章都将为你提供有价值的指导和启示。让我们一起探索如何在不断变化的技术环境中,保持初心,寻找属于自己的方向,并成为希望在世界上看到的改变。
32 1
|
23天前
|
缓存 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你进入Node.js的世界,探索其背后的哲学、核心概念以及如何利用它来构建高效、可扩展的后端服务。无论你是前端开发者寻求全栈技能,还是后端开发者希望拓宽技术栈,这篇文章都将为你提供价值。我们将从基础讲起,逐步深入到实战应用,让你对Node.js有一个全面而深刻的理解。
32 2
下一篇
无影云桌面