openLayer4实现动态改变标注图标


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了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);

  });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
openlayers4实现点动态扩散
Aug 17 #Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
vue-model实现简易计算器
Aug 17 #Javascript
Vue实现手机计算器
Aug 17 #Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
You might like
php中simplexml_load_file函数用法实例
2014/11/12 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python读写Excel文件方法介绍
2014/11/22 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python中类的属性和方法介绍
2018/11/27 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python decimal模块使用方法详解
2020/06/08 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
介绍下WebSphere的安全性
2013/01/31 面试题
存储过程和sql语句的优缺点
2014/07/02 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
员工团队活动方案
2014/08/28 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS