openlayers 显示闪烁的图标点

思路：需要在html代码生成N个要闪烁的点通过遍历生成html代码，然后再通过坐标定位点到相应的位置

$("#map").append("<div id='css_animation" + i + "' ><span class='pulse-icon1' style='background-color: #d0639c;z-index:9999999'><span class='item' style='box-shadow: 0 0 5px 2px #2f8'></span></span><div>");

var point_div = document.getElementById("css_animation" + i);

var point_overlay = new ol.Overlay({

element: point_div,

positioning: 'center-center'

});

map.addOverlay(point_overlay);

point_overlay.setPosition(p);

样式文件

.pulse-icon1 {

display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: red;
z-index: 999999;
position: relative;
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);

}

.item {

box-shadow: 0 0 6px 2px #2f8;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 300%;
width: 300%;
animation: pulsate 2s infinite;
position: absolute;
margin: -100% 0 0 -100%;

}

效果

openlayers 显示闪烁的图标点相关推荐

echarts 折线面积区域绘制+手机端四川地图的实现+折线图标点闪烁
第一次接触echarts,之前也没了解过.但是老大突然来需求让画图-没办法菜鸟只能现学现用了 (一直在放弃的边缘徘徊) 简单记录一下自己这两天画的两个图: 用filter函数设置点在分区段不同的设置 ...
Cesium Primitives加载大量图标点
Cesium Primitives加载大量图标点前言效果关键代码前言使用entity的方式加载大量图标点会出现卡顿现象,cesium提供了BillboardCollection可以实现大量图 ...
html引导蒙层,web开发中实现图标点击态蒙层
原标题:web开发中实现图标点击态蒙层 webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要 ...
加载网络图片Glide+圆角 fragment的动态添加底部图标点击选中
一.加载网络图片Glide+圆角 1.添加网络请求. <uses-permission android:name="android.permiss ...
win7下,为何右击桌面计算机图标,单击管理,打不开,电脑图标点不了怎么办啊
1.电脑桌面上的图标点不开了是怎么回事刚打开电脑点击桌面图标发现无法打开,桌面图标无法打开怎么办呢?400pc小编教你如何解决桌面图标无法打开. 方法1 双击打开桌面上"我的电脑" ...
【Android 性能优化】应用启动优化 ( 安卓应用启动分析 | Launcher 应用简介 | Launcher 应用源码简介 | Launcher 应用快捷方式图标点击方法分析 )
文章目录一. Launcher 应用简介二. Launcher 应用源码简介三. Launcher 图标点击方法分析一. Launcher 应用简介 Launcher 应用 : Android ...
UIScrollerView当前显示3张图
代码地址如下: http://www.demodashi.com/demo/11173.html WSLScrollView 功能描述:这是在继承UIView的基础上利用UIScrollerView进 ...
ios html gif 显示,iOS gif图显示问题
问题有时候需要显示gif动态图,让界面更加的绚丽,但是iOS默认只支持png,gpg图片.那么如何才能显示gif图呢? 解决方式添加框架 CoreGraphics.framework ImageI ...
本地通用验证码识别DLL/通用滑块识别/文字点选/图标点选/OCR文字识别/本地识别DLL
背景验证码识别一直都是一个重要的话题,近日有一些公司询问本地DLL验证码识别定制的事,可以联系QQ:[167231471]定制本地离线DLL验证码识别.另外给大家普及一下通用验证码识别和滑块缺口检 ...

openlayers 显示闪烁的图标点

openlayers 显示闪烁的图标点相关推荐

最新文章

热门文章