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


Posted in Javascript onMarch 31, 2017

1.前言

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

2.解决思路

2.1基于grahpic和symbol来解决

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继承AGS的Layer来自定义开发贴图图层

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

2.4总结

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

3.详细实现(继承AGS的Layer开发贴图图层)

3.1继承layer重写相关方法

在Map的DOM中新增一个DIV:

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

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

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

3.2监听缩放事件进行重绘

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

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

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

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

4.几点注意

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

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

5.结果展示

以归元寺为例子:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 #Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 #Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 #Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 #Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 #Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 #Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 #Javascript
You might like
php && 逻辑与运算符使用说明
2010/03/04 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python实现学员管理系统
2019/02/26 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python获取时间戳代码实例
2019/09/24 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
python 实现IP子网计算
2021/02/18 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
文秘求职信范文
2014/04/10 职场文书
安全目标责任书
2014/07/22 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python