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

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

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：

当图层从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/

                                                                           若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^