本文探讨在AGS JS中展示随地图缩放的图片方案。对比基于Graphic/Symbol、直接添加DIV+IMG以及继承Layer三种方法。分析各自优劣后，重点介绍通过继承AGS Layer并重写相关方法实现自定义贴图图层的详细步骤，包括DOM创建、事件监听及重绘逻辑，以解决屏幕溢出和鼠标交互问题。
前言
1.前言
设想一个场景：景区需在地图上展示多张图片，且图片需随地图缩放而缩放（非气泡形式）。传统方案需对图片进行地理信息纠正、按地图级别切图，再以瓦片形式叠加，工作量巨大。若图片体积较小（小于3M），是否存在更优解？本文将探讨几种解决思路。
解决思路
2.解决思路
基于grahpic和symbol来解决
2.1基于grahpic和symbol来解决
2.1.1思路描述
核心在于获取图片左上角与右下角对应的地理坐标。将左上角坐标赋给graphic的geometry，将图片URL及通过地理坐标转换得到的两点间屏幕宽高（screenwidth和screenheight）赋予graphic的symbol。需注意symbol的xoffset和yoffset属性值应为（+screenwidth/2, -screenheight/2）。最后监听地图缩放事件，计算并更新symbol的width和height。
2.1.2讨论
优势是实现简单：
a.直接利用AGS已有对象完成。
b.不用考虑拖拽时的坐标变化等。
劣势：当地图放大到一定级别，symbol的长宽大过地图屏幕范围时则symbol将不再渲染。
直接添加DIV+IMG来解决
2.2直接添加DIV+IMG来解决
2.2.1思路描述
在Map所在的ParentDIV中为图片创建DIV+IMG。原理与思路一相同，通过换算地理坐标的屏幕坐标来设置各IMG的长宽以及DIV的left和top。需特别注意监听地图拖拽事件并进行相关处理。
2.2.2讨论
优势：地图缩放到任意级别都能同样缩放展示图片。
劣势：图片本身无法响应地图事件，比如当鼠标在图片上，缩放、拖拽均不能进行。
继承AGS的Layer来自定义开发贴图图层
2.3继承AGS的Layer来自定义开发贴图图层
除需要继承Layer外，其他思路与思路二没有太大区别。但是可以规避思路一中图片超过屏幕范围无法显示的问题，也能规避思路二中的鼠标在图片上时无法进行地图操作的问题。
2.4总结
考虑到思路一和思路二中的明显劣势问题，采用思路三是更好的选择。
详细实现（继承AGS的Layer开发贴图图层）
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.结果展示
以归元寺为例子：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。