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 】

相关推荐： 网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  如何快速使用云服务器搭建个人网站？  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  PHP 500报错的快速解决方法  如何快速生成凡客建站的专业级图册？  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  香港服务器租用每月最低只需15元？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  如何在建站之星绑定自定义域名？  三星、SK海力士获美批准：可向中国出口芯片制造设备  高端企业智能建站程序：SEO优化与响应式模板定制开发  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Android实现代码画虚线边框背景效果  零基础网站服务器架设实战：轻量应用与域名解析配置指南  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  Laravel如何使用Eloquent进行子查询  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  网页设计与网站制作内容,怎样注册网站？  如何在IIS7中新建站点？详细步骤解析  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  原生JS获取元素集合的子元素宽度实例  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  java获取注册ip实例  iOS验证手机号的正则表达式  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  如何在建站主机中优化服务器配置？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  如何快速搭建安全的FTP站点？  网站建设要注意的标准 促进网站用户好感度！  历史网站制作软件,华为如何找回被删除的网站？  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  如何快速搭建自助建站会员专属系统？  如何在阿里云高效完成企业建站全流程？  html5的keygen标签为什么废弃_替代方案说明【解答】  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  如何用低价快速搭建高质量网站？  如何安全更换建站之星模板并保留数据？  Swift中swift中的switch 语句  Angular 表单中正确绑定输入值以确保提交与验证正常工作  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】