Openlayers自定义简单popup
OpenLayers中可以使用很多种类型的popup,大家可以到Openlayers的 popupMatrix.html示例中看。之前存在这样一个错误的想法:popup和marker是绑定的,要有popup就必须有marker。然后最近为了实现这样一样需求:在接图表的网格中点击,产生相应的一个简单的popup只有一个些简单的信息,不需要和其他项目中的nestpupop那么多的内容。经过自己的摸索后,终于实现。先展示下效果图:
实现方法不难,主要如下:
1.给地图map对象添加click事件
map.events.register('click', map, function (e) {
var position = map.getLonLatFromPixel(e.xy);
dealwithMapClick(position);
});
2.地图点击事件处理,dealwithMapClick
/在地图上添加操作的气泡
function dealwithMapClick(pos){
var lonlat = new OpenLayers.LonLat(pos.lon, pos.lat);
var size=new OpenLayers.Size(110,155);
var popup = new OpenLayers.Popup.Anchored('12', lonlat, size, getPopupCon(), null, false, null);
var popups = map.popups;
for (var i = 0; i < popups.length; i ) {
popups[i].destroy();
}
map.addPopup(popup);
initPopupBtnEvents();
}
3.popup内容填充
/*填充popup的内容*/
function getPopupCon() {
var str = '<div id="selectedAreaPopup">'
'<div class=areaPopupHead>'
data.name
'</div>'
'<div class="areaPopupItem">'
'<div class="left">'
'<img src="' baseUrl 'Content/images/indexMap/showReport.png"/>'
'</div>'
'<div class="right">'
'<label>查看报告</label>'
'</div>'
'</div>'
'<div class="areaPopupItem abled">'
'<div class="left">'
'<img src="' baseUrl 'Content/images/indexMap/closePopup.png"/>'
'</div>'
'<div class="right">'
'<label>关闭气泡</label>'
'</div>'
'</div>'
'<div id="noReportTips">报告建设中,不可查看</div>'
'</div>';
return str;
}
这个效果相对nestpupop来说,比例简单。没有锚点,只能适合简单的使用。
Openlayers自定义简单popup的更多相关文章
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Java自定义简单标签
Java自定义简单标签可以方便的在页面输出信息,并且对于权限的控制,和对于Jsp标签和servlet代码的分离有着很好的作用. 下面将以权限的控制为例自定义一个标签: 一.标签类型 <wxt: ...
- JSP自定义简单标签入门之带有属性
上面写的那个简单标签来控制页面中标签内容的重复次数是固定的,这就是权限"写死了",这是非常不好的行为,因为其灵活性太差.所以下面就介绍一种使用属性来控制标签内容输出次数的方法. 准 ...
- 自定义简单版本python线程池
python未提供线程池模块,在python3上用threading和queue模块自定义简单线程池,代码如下: #用threading queue 做线程池 import queue import ...
- 基于django的自定义简单session功能
基于django的自定义简单session功能 简单思路: 1.建立自定义session数据库 2.登入时将用户名和密码存入session库 3.将自定义的随机session_id写入cookie中 ...
- openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
- svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- 自定义简单的struts2的s标签
一:自定标签前需要了解的知识: BodyTagSupport类的方法: 编写标签对应的实现类时,需要重载BodyTagSupport类几个方法:doStartTag(), setBodyContent ...
- WPF自定义分页控件,样式自定义,简单易用
WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...
随机推荐
- Angular动态编译Html
//取得scope,有时可以使用this var scope=angular.element(this).scope(); var el= $compile(html)(scope); //加入到Do ...
- cygwin E437
这个简单错误居然查到了 报错E437: terminal capability "cm" required 执行:# export TERM=xterm
- Spark on Yarn:任务提交参数配置
当在YARN上运行Spark作业,每个Spark executor作为一个YARN容器运行.Spark可以使得多个Tasks在同一个容器里面运行. 以下参数配置为例子: spark-submit -- ...
- Design and Analysis of Algorithms_Brute Froce
I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- windows批处理的介绍
扩展名是bat(在nt/2000/xp/2003下也可以是cmd)的文件就是批处理文件. 首先批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命 ...
- 夺命雷公狗----Git---6---GitHub基本使用
github不是git. git是一个版本控制系统,是一个版本控制软件,从而完善共同开发... github是一个网站,基于git的,主要作用是代码托管的.... 托管的几层含义如下: 1:将自己平常 ...
- 桌面显卡天梯图和桌面cpu天梯图
桌面cpu天梯图: 桌面显卡天梯图:
- SQL2008完全卸载详解(图解)
一. SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板”
- 《C++ API设计》作者Martin Reddy访谈问题征集
Martin Reddy博士是软件行业的一名老兵,有着15年以上的从业经验,共撰写过40多篇论文,拥有3项软件专利,并与他人合著了Level of Detail for 3D Graphics.另外, ...