场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图

在上面加载地图显示的基础上，实现矩形闪烁显示效果。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、绘制图形

        //绘制图形dispLayer= L.rectangle([[36.08, 120.36], [36.10, 120.37]], {//颜色color: "red"}).addTo(map);

2、在setInterval()函数中反复添加、删除该图层，以达到闪烁的效果

        startFeatureFlash();/**开始闪烁*/function startFeatureFlash() {//flag为ture时，图形消失；反之，图形显现var flag = true;//开启计时器id = setInterval(function () {if (flag) {//移除图形map.removeLayer(dispLayer);flag = false;}else {//添加图形map.addLayer(dispLayer);flag = true;}}, 500);}

3、完整示例代码

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet要素动画</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//绘制图形dispLayer= L.rectangle([[36.08, 120.36], [36.10, 120.37]], {//颜色color: "red"}).addTo(map);startFeatureFlash();/**开始闪烁*/function startFeatureFlash() {//flag为ture时，图形消失；反之，图形显现var flag = true;//开启计时器id = setInterval(function () {if (flag) {//移除图形map.removeLayer(dispLayer);flag = false;}else {//添加图形map.addLayer(dispLayer);flag = true;}}, 500);}</script>
</body></html>

Leaflet中实现矩形闪烁动画效果相关推荐

高逼格UILabel的闪烁动画效果
高逼格UILabel的闪烁动画效果最终效果图如下: 源码: YXLabel.h 与 YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...
android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果
有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...
CSS3实现闪烁动画效果
给class属性名为className的元素添加闪烁动画效果 .className{ -webkit-animation: twinkling 1s infinite ease-in-out ...
css3 div跳动动画_CSS3实现闪烁动画效果
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -web ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
直播视频源码中“孔雀开屏”的动画效果
在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute(builder: (context){return ...
Three.js中实现ASCII文本动画效果
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...
闪烁点击效果css,CSS3自定义闪烁动画效果实例
都说HTML5和CSS3的出现直接终结了FLASH时代,不管这其中有没有夸张的成分,但是CSS3的动画功力还真不可小觑.下面我们就分享一下CSS3的自定义闪烁动画实现方法,先定义好动画样式代码:@-w ...

Leaflet中实现矩形闪烁动画效果

场景

实现

Leaflet中实现矩形闪烁动画效果相关推荐

最新文章

热门文章