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的更多相关文章

  1. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. Java自定义简单标签

     Java自定义简单标签可以方便的在页面输出信息,并且对于权限的控制,和对于Jsp标签和servlet代码的分离有着很好的作用. 下面将以权限的控制为例自定义一个标签: 一.标签类型 <wxt: ...

  3. JSP自定义简单标签入门之带有属性

    上面写的那个简单标签来控制页面中标签内容的重复次数是固定的,这就是权限"写死了",这是非常不好的行为,因为其灵活性太差.所以下面就介绍一种使用属性来控制标签内容输出次数的方法. 准 ...

  4. 自定义简单版本python线程池

    python未提供线程池模块,在python3上用threading和queue模块自定义简单线程池,代码如下: #用threading queue 做线程池 import queue import ...

  5. 基于django的自定义简单session功能

    基于django的自定义简单session功能 简单思路: 1.建立自定义session数据库 2.登入时将用户名和密码存入session库 3.将自定义的随机session_id写入cookie中 ...

  6. openlayers自定义图层控制的实现

    好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...

  7. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  8. 自定义简单的struts2的s标签

    一:自定标签前需要了解的知识: BodyTagSupport类的方法: 编写标签对应的实现类时,需要重载BodyTagSupport类几个方法:doStartTag(), setBodyContent ...

  9. WPF自定义分页控件,样式自定义,简单易用

    WPF自定义分页控件 做了许久伸手党,终于有机会贡献一波,搜索一下WPF分页控件,还是多,但是不太通用,主要就是样式问题,这个WPF很好解决,还有一个就是分页控件嘛,只关心几个数字的变动就行了,把页码 ...

随机推荐

  1. [Git] Ubuntu 升级 git 版本

    $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git

  2. NET基础(3):is 和 as 操作符

    在C#语言中进行类型转换的另外一种方式是使用is和as操作符.is检查对象是否兼容于指定类型,返回Boolean值true或false.注意,is操作符永远不抛出异常,例如以下代码: Object o ...

  3. ibatis输入多个参数

    ibatis输入多个参数     在ibatis中,会发现其输入参数只能有一个,于是当出现需要进行多个输入参数的时候,就要想点办法了,我看到的有以下两种比较好的方法能够解决这个问题1) 用String ...

  4. 闭包内的微观世界和js垃圾回收机制

    一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...

  5. The connection to adb is down,and a server error has occured.解决办法---------------------亲测有效

    认真读error: 办法一: 点击项目右键->Android tools ->Fix Project Properties,检查项目属性 办法二: 设备管理器,查看是否存在adb进程 如果 ...

  6. Extjs swfUpload 多图片上传

    一.属性介绍   类型 默认值 描述 upload_url String   处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 p ...

  7. 笔记本中的archlinux调节亮度

    参考了archlinux的wiki:https://wiki.archlinux.org/index.php/Backlight 说一下情况:/sys/class/backlight/acpi_vid ...

  8. 在Eclipse下搭建Android开发环境教程

    我们昨天向各位介绍了<在NetBeans上搭建Android SDK环境>,前不久也介绍过<在MyEclipse 8.6上搭建Android开发环境>, 都受到了读者的欢迎.但 ...

  9. Highcharts使用教程(1):制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  10. vc6 使用的那些事

    VC6.0中Release下调试模式设置 http://blog.csdn.net/wangqinghao/article/details/7730428