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

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

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

以归元寺为例子:

              

-----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

时间: 2024-10-16 05:06:32

基于AGS JS开发自定义贴图图层的相关文章

fabric.js的简单上手及基于fabric.js的canvas切图工具:1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库. Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具.基于MIT协议开源,在github上有许多人贡献代码. 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍

KoaHub.JS基于Node.js开发的Koa 生成验证码插件代

ccap node.js generate captcha using c++ library CImg without install any other lib or software node-ccap -- node.js generate captcha using c++ library CImg. You can generate captcha without install any other libraries or software, only do npm install

基于Cordova5.0开发自定义插件(android)

1.开发插件java部分 2.配置java插件 3.编写js部分代码 4.js配置 5.html中调用 最重要的:源代码下载 版权声明:本文为博主原创文章,未经博主允许不得转载.

KoaHub平台基于Node.js开发的Koa router路由插件代码信息详情

koa-router Router middleware for koa. Provides RESTful resource routing. koa-router       Router middleware for koa Express-style routing using app.get, app.put, app.post, etc. Named URL parameters. Named routes with URL generation. Responds to OPTIO

KoaHub平台基于Node.js开发的Koa的skip插件代码详情

koahub-skip koahub skip middleware koahub skip Conditionally skip a middleware when a condition is met. Install npm i koahub-skip --save Usage With existing middlewares: var skip = require('koahub-skip'); var serve = require('koa-static'); var static

KoaHub.JS基于Node.js开发的处理和显示日期代码

moment Parse, validate, manipulate, and display dates      A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. Documentation Port to ECMAScript 6 (version 2.10.0) Moment 2.10.0 does not bring any new fea

KoaHub平台基于Node.js开发的Koa的简单包装到请求库的类似接口

co-request co-request promisify wrapper for request co-request Simple wrapper to the request library for co-like interface (node.js generator based code). You can use it with koa or co To install simply run: npm install co-request Require co first, a

KoaHub平台基于Node.js开发的Koa的rewrite and index support插件代码详情

koa-static-server Static file serving middleware for koa with directory, rewrite and index support koa-static-server static file serving middleware for koa with directory, rewrite and index support Installation $ npm install koa-static-server API var

Node.js开发入门—notepad++ for Node.js

对于Node.js开发,论IDE的话,Webstorm是不二的选择,但它是收费的(可免费使用30天).一开始,我们先将就一下,使用notepad++来编写Node.js应用.这样做还有一大好处:没有关于Node.js的代码高亮和自动补全,可以更好地敦促我们使用在线API文档记忆各种类库API.死磕自己吧,enjoy it. notepad++的安装与配置 到"https://notepad-plus-plus.org/download/v6.8.2.html"这里下载吧,6.8.2版本