leaflet 自定义divIcon及自定义icon及点位闪烁

流氓也是种气质 _Cookie

已于 2024-04-17 10:21:59 修改

阅读量4k

点赞数

分类专栏： leaflet 文章标签： canvas leaflet

于 2022-01-24 11:43:37 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/122664378

版权

leaflet 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

1.自定义divIcon

2.自定义Icon

1.自定义divIcon

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
</style>
<div id="map" style="width: 600px; height: 400px;"></div>
<button onclick="init('add')">add</button>
<button onclick="init('minus')">minus</button>
</head>
<body>
 <script>
var map = L.map('map').setView([30.3367385888597, 120.135198302847], 13);
var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';

L.tileLayer(wpUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.setView([31.864942016, 117.2882028929])
var myIcon = L.divIcon({
      html: '<canvas id="tutorial" width="400" height="400"></canvas>',
      //className: 'css_animation',
      iconSize: 20,
      bgPos: [31.864942016, 117.2882028929]
  });
 L.marker([31.864942016, 117.2882028929], { icon: myIcon}).addTo(map);

let ctx;
var deg = 0
function init(type='add') {
    var canvas = document.getElementById('tutorial');
    canvas.setAttribute('style', 'transform:translate(-173px, -154px)!important');
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    if(type==='add') {
      deg+=30
    }else {
      deg-=30
    }
    
    console.log(deg)
    
    draw(deg)
}
init()


function draw(deg) {
    // 清除所有内容
    ctx.clearRect(0, 0, 300, 300);
    // 画一个小方框
    ctx.rect(0, 0, 10, 10);
    // 绘制
    ctx.stroke()
    // 开启一条新的路劲
    ctx.beginPath();
    // 画圆
    ctx.arc(173,155, 100, 0, 2*Math.PI,true);
    // 填充色，如果后面没重新声明则会继承
    ctx.fillStyle='red'
    // 填充
    ctx.fill();
    // 绘制
    ctx.stroke();
    // 关闭
    ctx.closePath()
    
    ctx.save()
    ctx.translate(173,154);
    // 画扇形
    ctx.moveTo(0,0)
    // let deg = Math.floor(Math.random() * (50 - 1 + 1) + 1)
    // ctx.rotate(deg*Math.PI/180)
    ctx.arc(0,0,100,(30+deg)*Math.PI/180,(80+deg)*Math.PI/180);
    ctx.fillStyle='pink'
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    // requestAnimationFrame(draw)
}
 </script>
</body>
</html>

2.自定义Icon

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <style>
  </style>
  <div id="map" style="width: 600px; height: 400px;"></div>
</head>

<body>
  <script>
    var map = L.map('map').setView([28.9209678, 108.5993719], 13);
    var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';

    L.tileLayer(wpUrl, {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // 自定义icon
    var greenIcon = L.icon({
      iconUrl: './camera.png',
      iconSize: [26],
      // iconAnchor: [32.5, -20]  文本坐标位置
    });
    let oneKilometerCameraList = [{ lat: '28.9209678', lng: '108.5993719' }]
    for (let i of oneKilometerCameraList) {
      console.log(i);
      var marker = L.marker([i.lat, i.lng], { icon: greenIcon }).addTo(map);
      marker.bindPopup(`<div style="min-width:280px">
                <p>摄像头信息</p>
                <p>名称：${11}</p>
                <p class="mapClickPopup"><span onclick="toCameraDes(${22})">查看详情</span></p>
              </div>`)
    }





  </script>
</body>

</html>

3.自定义Icon点位闪烁

效果图：

@keyframes wxBlinking {
      from {
        width: 40px;
        height: 40px;
        opacity: 0.7;
      }

      to {
        width: 43px;
        height: 43px;
        opacity: 1;
      }
    }

    .blinking {
      animation: wxBlinking 1s infinite alternate;
    }

let markerIconDjc = L.icon({
      iconUrl: './start.png',
      iconSize: [40, 40],    //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
      iconAnchor: [20, 20],  //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
    });
    let markerDjc = L.marker([29.592024, 106.231126], { icon: markerIconDjc }).addTo(map)
    L.DomUtil.addClass(markerDjc._icon, "blinking"); // 操作dom