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

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

以归元寺为例子：

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

赞 (0)

相关推荐

  • WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

    WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

    本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大

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

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

    1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示).如果利用传统方案,则是我们首先将图片纠正赋予地理信息,然后根据地图级别进行切图,最后以瓦片的形式叠加至地图上,工作量是很大的.然而考虑到图片本身不会太大(小于3M),那么有没有其他方法来解决呢.这里我和大家一起探讨几种解决思路. 2.解决思路 2.1基于grahpic和symbol来解决 2.1.1思路描述 简单说就是获取图片左上角和右下角对应的地理坐标,给grahpic的geometry赋上左

  • 分享五个Node.js开发的优秀实践 

    目录 1.分层组织代码 2.使用代码压缩 3.学会运用第三方解决方案 4.充分利用程序监控工具 5.保持你的代码整洁且易于复用 代码检查和格式化 代码风格指南 总结 前言: Node.js在全球开发者中非常流行,这种趋势极大地改变了Web开发的面貌.可以说,Node.js在实时Web应用开发中无所不能.使用这种技术并不难,懂得如何更好地构建代码结构,在开发过程中解决遇到的困难和错误,是你真正应该去做的事情. 在这篇文章中,我们列出了5个通用的优秀实践,需要我们在开发过程中牢记于心并尽可能的去实践

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)

    使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)

    前言 微信的接口调试工具可以编辑自定义菜单,不过是提交json格式数据创建菜单,非常的不方便还容易出错.网上的工具不好用,所以就自己写了一个. 正文 先用bootstrap排个页面框架出来,调用自定义菜单接口需要用到AccessToken,放个输入框输入AccessToken.也不排除想直接输入AppId和AppSecret来获取AccessToken的用户,所以还需要下拉菜单来选择是输入AccessToken还是直接获取AccessToken.为了兼顾微信企业号应用创建菜单还需要AgentId

  • 详解基于node.js的脚手架工具开发经历

    前言 我们团队的前端项目是基于一套内部的后台框架进行开发的,这套框架是基于vue和ElementUI进行了一些定制化包装,并加入了一些自己团队设计的模块,可以进一步简化后台页面的开发工作. 这套框架拆分为基础组件模块,用户权限模块,数据图表模块三个模块,后台业务层的开发至少要基于基础组件模块,可以根据具体需要加入用户权限模块或者数据图表模块.尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • Node.js开发教程之基于OnceIO框架实现文件上传和验证功能

    Node.js开发教程之基于OnceIO框架实现文件上传和验证功能

    OnceIO 是 OnceDoc 企业内容(网盘)的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只在第一次压缩),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,即一个扩展包里即包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.这里是介绍如何使用OnceIO的一系列文章. 在这一章节中,我们将为大家演示如何使用 OnceIO 实现文件

  • WPF 自定义雷达图开发实例教程

    WPF 自定义雷达图开发实例教程

    自定义雷达图表如下: 1.创建UserControl,名为"RadarChartControl" 前台: <UserControl x:Class="WpfApplication2.RadarChartControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/win

  • 基于JS开发微信网页录音功能的实例代码

    具体代码如下所示: wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener('touchstart', function (event) { event.preventDefault(); startTime = newDate().getTime(); // 延时后录音,避免误操作 recordTimer =

随机推荐