openLayer4实现动态改变标注图标
更新时间:2020年8月18日 08:07 点击:1916
本文实例为大家分享了openLayer4动态改变标注图标的具体代码,供大家参考,具体内容如下
地图上经常需要标出标注,标注点击之后要有相应的变化来达到一定的效果。此实例即在地图上添加图片标注,点击标注,更换标注图片,再点击其他标注,上一个标注恢复原来的标注图片。
/*初始化地图*/ var map; function initmap(){ map= new ol.Map({ layers: layers, target: 'mapContainer', view: new ol.View({ //地图中心坐标 center: new ol.proj.fromLonLat([117.191166, 34.289749],'EPSG:3857'), zoom: 13//地图缩放级别 }) }); //添加标注 addFeature(); } /*添加标注信息*/ function addFeature(){ //数据太多,放json里读取,里面是标注的坐标信息 $.get('./featureData.json').done(function(data){ var data = eval(data); var lon = 0; var lat = 0; var romeArr = []; for(var i=0;i<data .length;i++){ lon = parseFloat(data [i].lon); lat = parseFloat(data [i].lat); name = data[i].name; var rome = new ol.Feature({ geometry:new ol.geom.Point(new ol.proj.fromLonLat([lon,lat],'EPSG:3857')), name:name }); //标注样式设置 rome.setStyle(new ol.style.Style({ image: new ol.style.Icon(({ crossOrigin: 'anonymous', scale:0.3, //标注图标大小 src: 'images/vtourskin_mapspot.png' })) })); romeArr.push(rome); } //定义select控制器,点击标注后的事件 var select= new ol.interaction.Select(); //map加载该控件,默认是激活可用的 map.addInteraction(select); select.on('select', function(e) { /*恢复其他图标样式*/ romeArr.forEach(function(ele){ ele.setStyle(new ol.style.Style({ image: new ol.style.Icon(({ crossOrigin: 'anonymous', scale:0.3, src: 'images/vtourskin_mapspot.png' })) })); }) console.log(e.selected); //打印已选择的Feature /*当前选择的图标变化,在此仅改变了图片路径以显示不同的图标,可以根据自己的需要进行设置*/ var currentRome = e.selected[0]; currentRome.setStyle(new ol.style.Style({ image: new ol.style.Icon(({ crossOrigin: 'anonymous', scale:0.3, src: 'images/vtourskin_mapspotactive.png' })) })); }); vectorSource = new ol.source.Vector({ features: romeArr }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程,各位想知道具体绘制方法的使用者们,那么下面就来看一下小编给大家分...2016-09-14
python Matplotlib基础--如何添加文本和标注
这篇文章主要介绍了python Matplotlib基础--如何添加文本和标注,帮助大家更好的利用Matplotlib绘制图表,感兴趣的朋友可以了解下...2021-01-26- 小米在3月9日下午5点推送了小米5的MIUI8.2更新,这次升级最大的改变是核心变成了Android7.0,因此加入了不少新功能。从MIUI1到MIUI8,历经了好几年了,下面小编为大家整理MIUI八个历史版本的系统图标,来看看吧...2017-07-06
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
- Font字体小图标应用其实是在以前我们常用的css sprite进行升级了,我们可以直接在css中调用字体了,下面我们来看一篇关于Font字体小图标应用例子。 我们知道在页面上...2016-09-14
- 这篇文章主要介绍了Delphi使用大图标编译程序的方法,需要的朋友可以参考下...2020-06-30
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说快速制作出斜面浮雕效果的小图标的教程,各位想知道具体绘制方法的使用者,那么下面就快来跟着小编一起...2016-09-14
- 这篇文章主要介绍了如何使用C#实现带消息数的App图标的方法,并附上全部源码,分享给大家,有需要的小伙伴可以参考下。...2020-06-25
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制SVG圣诞图标的教程,各位想知道具体绘制方法的使用者,那么下面就快来跟着小编看看教程吧。 给...2016-09-14
- 本教程为大家带来图层样式的运用,做出调节旋钮的图标,希望大家喜欢。 1、新建一个渐变调整层,做一个45度的从 #a1a5ae 到 #eef2f3 的线性渐变。 2、。复制一层渐变...2016-12-31
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说绘制一个可爱的卡通铅笔图标的教程,各位想知道具体绘制方法的使用者们,那么下面就快来跟着小编一起看...2016-09-14
- 这篇文章主要介绍了c# 数据标注与数据校验的相关资料,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-10-09
openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)
这篇文章主要介绍了openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本),主要讲overlay三种最常用的案例,感兴趣的朋友一起看看吧...2021-09-15- 有些站点,访问时会在地址栏地址前显出小图标,添加到收藏夹后也在收 藏栏中显示图标,这样很好的与其它站点有了区别。 要达到这个效果,先需做出这个图标文...2016-09-20
- 这篇文章主要介绍了PyQt 5 设置Logo图标和Title标题的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 字体图标是在 Web 项目中使用的图标字体。接下来通过本文给大家介绍BootStrap glyphicons 字体图标实现方法,需要的朋友参考下...2016-05-04
- 这篇文章主要为大家详细介绍了DataGridView带图标的单元格的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- asp.net 图标提取以及图标转换的实例代码,需要的朋友可以参考一下...2021-09-22
- 这篇文章主要为大家详细介绍了xmlplus组件设计系列之图标ICON的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
IDEA中application.properties的图标显示不正常的问题及解决方法
这篇文章主要介绍了IDEA中application.properties的图标显示不正常的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-29