leaft.js L.blinkMarker 方法实现加载闪烁标记

先上效果图：

blinkMarker

先创建一个本地的css： blinkmarker.css

.pulse-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: red;
  position: relative;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.dive-icon {
  content: "";
  box-shadow: 0 0 6px 2px red;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.1s;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 200%;
  width: 200%;
  animation: pulsate 2s infinite;
  position: absolute;
  margin: -50% 0 0 -50%;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  100% {
    transform: scale(1.2,1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

然后创建一个js：blinkmarker.js

L.blinkMarker = function (point, property) {
  // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
  var tempDivEle = document.createElement("div")
  var divEle = document.createElement("div")
  var spanEl = document.createElement("span")
  var aEl = document.createElement("a")
  tempDivEle.append(divEle)
  divEle.append(spanEl)
  spanEl.append(aEl)
  // 设置上基础的样式
  spanEl.classList.add("pulse-icon")
  aEl.classList.add("dive-icon")
  // 操作样式
  var style = document.createElement("style")
  style.type = "text/css"
  document.head.appendChild(style)
  sheet = style.sheet
  // 主体颜色
  if (property) {
    if (property.color) {
      spanEl.style.backgroundColor = property.color
      if (!property.diveColor) {
        aEl.style.boxShadow = "0 0 6px 2px " + property.color
      }
    }
    // 标记大小
    if (property.iconSize) {
      spanEl.style.width = property.iconSize[0] + "px"
      spanEl.style.height = property.iconSize[1] + "px"
    }
    // 发散的color
    if (property.diveColor) {
      // 发散的重度
      if (property.level) {
        aEl.style.boxShadow =
          "0 0 " +
          property.level * 3 +
          "px " +
          property.level +
          "px " +
          property.diveColor
      } else {
        aEl.style.boxShadow = "0 0 6px 2px " + property.diveColor
      }
    }
    // 发散的重度
    if (property.level) {
      if (property.diveColor) {
        aEl.style.boxShadow =
          "0 0 " +
          property.level * 3 +
          "px " +
          property.level +
          "px " +
          property.diveColor
      } else if (property.color) {
        aEl.style.boxShadow =
          "0 0 " +
          property.level * 3 +
          "px " +
          property.level +
          "px " +
          property.color
      } else {
        aEl.style.boxShadow =
          "0 0 " + property.level * 3 + "px " + property.level + "px red"
      }
    }

    // 闪烁的速度
    if (property.speedTime) {
      aEl.style.setProperty(
        "animation",
        "pulsate " + property.speedTime + "s infinite"
      )
    }
  }
  var myIcon = L.divIcon({
    className: "my-div-icon",
    html: tempDivEle.innerHTML
  })
  var marker = L.marker(point, { icon: myIcon, title: property.title })
  return marker
}

然后就是创建 blinkmarker.html

主要实现code：

    L.blinkMarker([36.694, 118.587], {
      iconSize: [50, 50],
      color: 'green',
      diveColor: 'blue',
      level: '3',
      speedTime: 2,
      title: "啦啦啦" }).addTo(map)
    L.blinkMarker([34.694, 112.587], { iconSize: [12, 12], color: 'green',speedTime: 0.5}).addTo(map)
    L.blinkMarker([35.694, 113.587], { iconSize: [18, 18], diveColor: 'aqua' }).addTo(map)
    L.blinkMarker([32.694, 116.587], { iconSize: [25, 25], level: '3', speedTime: 1 }).addTo(map)

全部代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>闪烁点</title>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
  <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 引入闪烁marker -->
  <link rel="stylesheet" type="text/css" href="./blinkmarker.css">
  <script type="text/javascript" src="./blinkmarker.js"></script>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }

    html,
    body,
    #map {
      height: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
</body>
<script type="text/javascript">
    /**
     * 这一部分用于加载地图,我这里用的是离线地图,需要适当修改
     */
    var url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    var map = L.map('map', {
      center: [34.694, 113.587],
      zoom: 6,
      zoomControl: false
    })
    // 将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
      maxZoom: 18,
      minZoom: 3
    }).addTo(map)

    // 以下是加载闪烁标记
    // 支持以下属性iconSize: 主体大小(默认15,15),color:主体颜色(默认红色),diveColor: 发散颜色(red),title: 标题,level: 闪烁的粗细(2),speedTime: 发散闪烁的速度(2)
    /**
     L.blinkMarker(LatLng,{iconSize: [50,50],color: 'green',diveColor: 'blue',title: "啦啦啦"})
      */
    L.blinkMarker([36.694, 118.587], {
      iconSize: [50, 50],
      color: 'green',
      diveColor: 'blue',
      level: '3',
      speedTime: 2,
      title: "啦啦啦" }).addTo(map)
    L.blinkMarker([34.694, 112.587], { iconSize: [12, 12], color: 'green',speedTime: 0.5}).addTo(map)
    L.blinkMarker([35.694, 113.587], { iconSize: [18, 18], diveColor: 'aqua' }).addTo(map)
    L.blinkMarker([32.694, 116.587], { iconSize: [25, 25], level: '3', speedTime: 1 }).addTo(map)
    // document.styleSheets[0].addRule('.pulse-icon::after { box-shadow:  0 0 6px 2px green }', 0)
</script>

</html>

原文链接：https://blog.csdn.net/qq_41646249/article/details/127615648

你可能也喜欢