基于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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python实现各种插值法(数值分析)
2019/07/30 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
大学生物业管理求职信
2013/10/24 职场文书
四查四看整改措施
2014/09/19 职场文书
优秀员工事迹材料
2014/12/20 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers