openLayer4实现动态改变标注图标

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

  });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS代码实现百度地图 画圆 删除标注

    JS代码实现百度地图 画圆 删除标注

    把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc

  • 百度地图api应用标注地理位置信息(js版)

    百度地图api应用标注地理位置信息(js版)

    有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/  示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/   里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息

  • 一款基于jQuery的图片场景标注提示弹窗特效

    一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"

  • Google Map API更新实现用户自定义标注坐标

    演示地址:http://www.yaohaixiao.com/effects/google-map.html 复制代码 代码如下: if(typeof GoogleMap === 'undefined'){ var GoogleMap = {}; } (function(){ if (!document.getElementById("fgmap")) { return false; } else { // 是否可创建Google地图控件 var isCompatible = new

  • 一款简单的jQuery图片标注效果附源码下载

    一款简单的jQuery图片标注效果附源码下载

    为了提高用户体验度,在一些电商网站和家居网站上我们会看到,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,设计非常的人性化,今天我们通过实例给大家分享使用jQuery插件来实现这一效果. 先给大家展示下效果图: 效果演示          源码下载 HTML 首先,我们加载jQuery库和easypin插件. <script src="jquery.min.js"></script> <script src="jqu

  • js 调用百度地图api并在地图上进行打点添加标注

    js 调用百度地图api并在地图上进行打点添加标注

    最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die

  • openLayer4实现动态改变标注图标

    本文实例为大家分享了openLayer4动态改变标注图标的具体代码,供大家参考,具体内容如下 地图上经常需要标出标注,标注点击之后要有相应的变化来达到一定的效果.此实例即在地图上添加图片标注,点击标注,更换标注图片,再点击其他标注,上一个标注恢复原来的标注图片. /*初始化地图*/ var map; function initmap(){ map= new ol.Map({ layers: layers, target: 'mapContainer', view: new ol.View({ /

  • Android实现动态改变app图标的示例代码

    本文介绍了动态改变app图标,分享给大家,具体如下: 代码实现如下: <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"&

  • Android如何动态改变App桌面图标

    Android如何动态改变App桌面图标

    时不时的我们就会发现,一些我们常见的应用,比如某宝,某东,在一些特殊的日子中,比如双十一,元旦,为了迎合这样一个日子的气氛,在桌面的应用图标就会发生改变,其实对于这样的一个桌面图标更换,Android中为我们提供了AndroidManifest.xml里的<activity-alias>标签实现方式(更多文章请关注我的微信公众账号,左边二维码). 我们知道,我们每写一个 Activity就要在AndroidManifest进行配置一下,我们才可以正常的启动它,除此之外,我们还可以对它设置一个别

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea

  • Android 动态改变布局实例详解

    Android 动态改变布局实例详解

    Android 动态改变布局                最近项目需求,动态的改变布局,为了增加客户体验,尤其是在输入框出现小键盘的时候,为了避免小键盘遮挡APP内容就需要动态改变布局: 先看下实现效果图: 其实是一个软件的登录界面,初始是第一个图的样子,当软键盘弹出后变为第二个图的样子,因为登录界面有用户名.密码.登录按钮,不这样的话软键盘弹出后会遮住登录按钮(其实之前的实现放到了ScrollView里面,监听软键盘弹出后滚动到底部,软键盘隐藏后滚动到顶部,也是可以的). 最简单的方法就是多

  • Android实现动态改变shape.xml中图形的颜色

    在Android开发过程中我们常遇到将某个图形的颜色改变(例如用圆点的不同颜色来代表不同的状态) 像这样的需求,一般我们使用android的shape就可以实现,比如 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval&qu

  • Qt编写地图实现动态点位标注的示例代码

    Qt编写地图实现动态点位标注的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 动态点位标注是定制的一个功能模块,提供直接地图上选点设置标记点,点位信息用结构体存储,其中包括了经度.纬度.速度.时间等信息,单击对应的标注点可以显示详细的弹框信息,弹框信息采用自定义的html格式显示,而不是地图自带的格式,这样显示更方便,比如可控不同行不同颜色或者加粗.标注点可选是否标记,标记的话就是一个设备图标显示,不标记的就普通的显示,一般在明显的拐弯的地方建议设置标记. 近期在动态点位标注功能中还增加了新增

  • 微信小程序中如何实现动态改变SVG颜色和尺寸

    微信小程序中如何实现动态改变SVG颜色和尺寸

    目录 前言 1. 创建一个微信小程序项目,准备好SVG素材 2. 封装修改svg颜色的工厂函数 3. 封装一个自定义组件,方便使用svg图标 4. 注册组件,使用 结语 总结 前言 最近在做项目的时候总是因为组件库的图标无法满足需求而烦恼,而每次需要新的图标又要去找字体图标.生成新的css代码而苦恼. 所以想到用svg来代替,体积也小,主要就是方便一点,不用每次还重新生成代码.但是一个最重要的问题也随之出现,小程序中不支持svg代码....但是也有曲线救国的方式,image可以显示svg,还好没

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

  • jQuery实现鼠标滚轮动态改变样式或效果

    代码如下: 复制代码 代码如下: $(window).scroll(function() {             var scrolls = $(this).scrollTop();             $(".context_block").each(function(){ //类名为"context_block"的块级元素                 var height = $(this).height();                 if(

随机推荐