目录
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);
// 自定义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