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.结果展示

以归元寺为例子：

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

# AGS  # JS  # 贴图图层  # arcgis for js栅格图层叠加(Raster Layer)问题  # 微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍  # js实现点击按钮后给Div图层设置随机背景颜色的方法  # 运用js实现图层拖拽的功能  # 的是  # 图层  # 拖拽  # 太大  # 考虑到  # 二中  # 长宽  # 图上  # 鼠标  # 我和  # 都能  # 已有  # 则是  # 也能  # 要注意  # 三是  # 几种  # 几点  # 重写  # 在地 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速上传建站程序避免常见错误？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  轻松掌握MySQL函数中的last_insert_id()  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  javascript基本数据类型及类型检测常用方法小结  进行网站优化必须要坚持的四大原则  制作电商网页,电商供应链怎么做？  java获取注册ip实例  Linux安全能力提升路径_长期防护思维说明【指导】  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  C++时间戳转换成日期时间的步骤和示例代码  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  javascript基于原型链的继承及call和apply函数用法分析  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  香港服务器租用每月最低只需15元？  ,在苏州找工作，上哪个网站比较好？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  Laravel如何使用模型观察者？（Observer代码示例）  大学网站设计制作软件有哪些,如何将网站制作成自己app？  如何快速启动建站代理加盟业务？  ,南京靠谱的征婚网站？  如何在橙子建站中快速调整背景颜色？  如何在IIS中新建站点并配置端口与IP地址？  如何用AWS免费套餐快速搭建高效网站？  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  🚀拖拽式CMS建站能否实现高效与个性化并存？  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  晋江文学城电脑版官网 晋江文学城网页版直接进入  怎样使用JSON进行数据交换_它有什么限制  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  nginx修改上传文件大小限制的方法  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  PythonWeb开发入门教程_Flask快速构建Web应用  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  iOS发送验证码倒计时应用  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  网站制作免费,什么网站能看正片电影？  Laravel如何配置和使用缓存？（Redis代码示例）  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel如何实现API版本控制_Laravel版本化API设计方案  如何在阿里云ECS服务器部署织梦CMS网站？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）