leaflet.js 原生实现地图上的圆圈闪烁动画

最新推荐文章于 2024-07-20 18:16:53 发布

IT博客技术分享

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量1k

点赞数

分类专栏： vue-leaflet 文章标签：前端

本文链接：https://blog.csdn.net/qq_41646249/article/details/127615176

版权

vue-leaflet 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先上截图：

圆圈闪烁

实现的原理：

就是往一个标记的位置添加一个 circle，然后通过定时器，一会儿添加circle，一会儿移除circle。

主要code：

    // 绘制图形
    dispLayer= L.circle([36.08, 120.36],{radius: 200 }).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)
    }

全部code：目前是用原生的写法实现的

<!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.circle([36.08, 120.36],{radius: 200 }).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>