目录
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: '© <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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);// 自定义iconvar greenIcon = L.icon({iconUrl: './camera.png',iconSize: [26],});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>