使用ol2中经常会碰到添加marker数据,并在数据之上提供marker的鼠标点击事件,弹出popup详细信息,对此进行了简单封装,详见:
1、marker的数据元素
/** * Class: MarkersLayer.Source */ MarkersLayer.Source = OpenLayers.Class({ lonlat:null , //坐标 icon:null, //marker的icon地址 title:null, //marker的title 不为空时存在marker点击事件,弹出的popup的title description:null, //title不为空时点击出现的popup中的描述信息 initialize: function(lonlat ,icon,title, description) { this.lonlat = lonlat; this.icon = icon ; this.title = title; this.description = description ; }, CLASS_NAME: 'MarkersLayer.Source' });
2、markers的marker集合图层,继承自OpenLayers.Layer.Markers,只是做了简单封装
/** * Marker集合图层,从layer中继承 */ OpenLayers.Layer.MarkersLayer = OpenLayers.Class(OpenLayers.Layer.Markers, { /** * 所有的maker集合 */ ms :null , //是否加载 loaded:false, putMarkers:function(_markers) { this.ms = _markers ; if(this.loaded) for(var i in _markers) { //创建marker var marker = this.createMarker(_markers[i]); this.addMarker(marker); } }, moveTo : function(bounds, zoomChanged, minor) { OpenLayers.Layer.Markers.prototype.moveTo.apply(this, arguments); //判断是否要加载markers if(this.visibility && !this.loaded && this.ms && this.ms.length > 0){ this.loaded = true; for(var i in this.ms) { //创建marker var marker = this.createMarker(this.ms[i]); this.addMarker(marker); } } }, /** *当前显示的popup buffer */ show_pp : null , createMarker:function(m) { var _map = this.map; var lonlat = m.lonlat; var icon_url = m.icon ; var desc = m.description; var title = m.title ; var size = new OpenLayers.Size(18, 32); var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); //var mark_url = '../resource/js/ol/img/' + icon_url; var mark_url = icon_url; var icon = new OpenLayers.Icon(mark_url, size, offset); var marker = new OpenLayers.Marker(lonlat, icon); //拼接提示信息 if(title ) { //此处优化为点击后在去创建popup 而不是提前都创建好,优化加载速度 marker.title = title; marker.desc = desc; marker.layer = this ; marker.events.register("click", marker, this.clickEvent); } return marker ; } , /** * marker 点击事件 */ clickEvent:function(evt){ var sp = this.layer.show_pp; var m_popup = this.popup ; //如果当前已经弹出和待弹出的不是一个 则隐藏已经弹出的 if (sp && sp != m_popup) { sp.hide(); } //判断marker是否包含popup if(!m_popup) { //创建popup var innerhtml = "<table class='poptable'>"; innerhtml += "<tr><td style='text-align:left'> " + this.title + "</td> </tr>"; innerhtml += "<tr><td style='text-align:left'> " + this.desc + " </td></tr>"; innerhtml += "</td></tr></table>"; m_popup = new OpenLayers.Popup("click", this.lonlat, null, innerhtml, true); m_popup.panMapIfOutOfView = true; m_popup.autoSize = true; m_popup.hide(); this.map.addPopup(m_popup); this.popup = m_popup ; } m_popup.toggle(); this.layer.show_pp = m_popup; OpenLayers.Event.stop(evt); }, getDataExtent: function () { var maxExtent = null; var _map = this.map ; if (_map && this.ms && (this.ms.length > 0)) { var maxExtent = new OpenLayers.Bounds(); for(var i=0, len=this.ms.length; i<len; i++) { var m = this.ms[i]; maxExtent.extend(m.lonlat); } } return maxExtent; }, CLASS_NAME: "OpenLayers.Layer.MarkersLayer" });
3、调用:
var ms = new Array(); //marker.souces for(var i = 0 ; i < 100 ; i++) { var lon = 120 + Math.random() * 0.5 ; //经纬随机 var lat = 30 + Math.random() * 0.5;//纬度随机 var icon = Math.random() > 0.5 ? 'img/marker-blue.png' : 'img/marker-green.png' ; var lonlat = new OpenLayers.LonLat(lon, lat).transform(_displayProjection, _projection); var marker = new MarkersLayer.Source(lonlat , icon , 'test title ' + i , 'test descrition ' + lon + "," +lat); ms.push(marker); } var ml = new OpenLayers.Layer.MarkersLayer('test markerlayer'); ml.putMarkers(ms); //压入数据
附件里有demo可以直接查看
相关推荐
openlayers 添加标注 markers 怎么给Google地图添加标注
该资源适合初级同学对geosever图层进行编辑的功能,可以下载使用,该资源能满足openlayers对geoserver图层的查询、编辑、新增,删除等操作
Openlayers虽然提供了很多方法, 一般是从图层(Layer)获取获取元素(feature),或者从元素(Feature)获取坐标(Coordinate)。获取到的一般都是集合。但是想要反着通过元素(feature)获取图层(Layer).OL选择...
iClient for OpenLayers控制图层组显隐方式的实现步骤。 下载后直接运行目录下:example\示例\图层组控制.html(需要修改里面的服务地址url为自己发布的服务信息)
openlayers3 显示静态地图,从后台查询点数据(后台java代码没有提交,太简单了。。。)展示到地图并添加标注,给标注添加点击事件并展示标注信息,初次接触开源GIS,代码中有错误还请各位看官指正,感谢!
OpenLayers地图加入google图层 OpenLayers google layer 自己可以用google账号登录申请特定域名的地图key.
openlayers 中利用矢量图层添加注记的示例。
开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的扩展,是在源代码里添加对grouplayer的操作和事件支持. 对layerSwitcher....
ol-ext插件,具体实现过程见使用openlayers的扩展插件实现矢量图层的3D渲染
Openlayers扩展插件ol-ext ,2022年4月版本
openlayers图层开关控件,支持图层开关,增删图层控件自动联动,支持openlayers4、openlayers5版本
主要为大家详细介绍了OpenLayers实现图层切换控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
openlayers 鹰眼示例,包含图层选择
openlayers控件扩展,导航条扩展,鹰眼工具扩展,放大效果扩展
解决openlayers跨域访问的解决方案,按照附件中说明.txt中步骤操作应该是没问题的,我已经测试过。
OpenLayers3.x使用features集群实现同一markers层添加多marker标记,效果演示以及源代码,文章链接https://blog.csdn.net/YZero_cn/article/details/120385516
图标编码-纹理坐标映射数据,规格为50X50共2500个图标编码和纹理位置,按两行为一组分组共25组+默认值,键名为字母a~y(25个)+默认值z。
openlayers 自定义相关内容 以及 对定义内容的引用
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签