基于AGS JS开发自定义地图图�

1.前言

假设一个景点有很多图片需要显示在地图上，并且随着地图的缩放比例进行缩放(不是简单的用气泡显示)。如果采用传统的方案，先将图片校正到地理信息上，再根据地图级别对图片进行裁剪，最后以瓦片的形式叠加到地图上，工作量很大。但是考虑到画面本身不算太大(不到3M)，有没有其他办法解决？这里我就和大家讨论几个解决方案。

2.解决方法

2.1基于grahpic和符号求解

2.1.1思路描述

简单来说，获取图片左上角和右下角对应的地理坐标，将左上角坐标赋给grahpic的几何图形，将图片的url赋给grahpic的符号，通过地理坐标变换得到两个屏幕坐标之间的屏幕宽度和屏幕高度。应特别注意符号xoffset和yoffset的两个属性值(screenwidth/2，-screenheight/2)。最后，监控地图的缩放事件，并计算相关符号的宽度和高度。

讨论

优点是实现简单：

A.直接使用AGS现有的物体。

B.不需要考虑拖放过程中的坐标变化。

缺点：当地图放大到一定程度，符号的长度和宽度大于地图屏幕的范围时，符号将不再被渲染。

2.2直接添加DIV IMG解决

2.2.1思路描述

直接为地图所在的父分区中的图片创建的DIVIG与第一个想法的原理相同。每个IMG的长度和宽度以及DIV的左侧和顶部是通过转换地理坐标的屏幕坐标来设置的。特别需要注意的是，地图拖动事件也需要监控和处理。

讨论

优点：地图可以缩放到任何级别，以同样的方式显示图片。

缺点：图片本身无法响应地图事件。例如，当鼠标在图片上时，既不能缩放也不能拖动。

2.3继承AGS图层定制开发地图图层

除了继承Layer，其他想法和第二个想法没有太大区别。但是可以避免第一个想法中画面无法显示出屏幕范围之外的问题，也可以避免第二个想法中鼠标在画面上无法进行地图操作的问题。

2.4总结

考虑到思路1和思路2的明显缺点，采用思路3是更好的选择。

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

3.1继承层重写相关方法

在地图的DOM中添加一个DIV:

从地图中移除图层时，移除所有监听事件：

3.2监控重绘的缩放事件

每个IMG的宽度和高度应根据当前四角坐标对应的屏幕坐标进行转换：

3.3监控坐标变化的翻译事件

4.几个音符

A.继承Layer时，DOJO生成的DIV必须由setMap函数返回。如果继承了GraphicLayer，则无法返回DIV，因为graphiclayer是SVG结构。

B.为了提高显示效率，最好的翻译和重绘方式是直接改变DIV左上角的位置，而不是删除和重新添加所有IMG。

5.显示结果

以归元寺为例：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。