基于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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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检测网页是否被百度收录的函数代码
2013/10/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
Expandable "Detail" Table Rows
2007/08/29 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
公务员综合考察材料
2014/02/01 职场文书
实习指导老师评语
2014/04/26 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers