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 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
vue实现五子棋游戏
May 28 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
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
咖啡与水的关系
2021/03/03 冲泡冲煮
php学习之数据类型之间的转换代码
2011/05/29 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
js停止输出代码
2008/07/20 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python合并同类型excel表格的方法
2018/04/01 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
办公自动化毕业生求职信
2014/03/09 职场文书
年会搞笑主持词
2014/03/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
JS实现扫雷项目总结
2021/05/19 Javascript
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技