您好，
Leaflet 提供了 removeLayer() 方法，可以用于清除地图上的所有图层 ，
<!DOCTYPE html>
<html>
<head>
<title>绘制行政区边界</title>
<!-- 引入 Leaflet 库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<button onclick="clearLayer()">清除图层</button> <!-- 添加清除按钮 -->
<script>
// 创建 Leaflet 地图对象
var map = L.map('map').setView([31.22, 121.48], 12);
// 添加底图图层
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 定义 GeoJSON 数据
var geojsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [[[121.475,31.248],[121.477,31.246],[121.479,31.245],[121.481,31.245],[121.483,31.247],[121.484,31.249],[121.484,31.251],[121.482,31.252],[121.480,31.253],[121.478,31.252],[121.476,31.250],[121.475,31.248]]]
}
}]
};
// 创建 GeoJSON 图层
var geojsonLayer = L.geoJSON(geojsonData);
geojsonLayer.addTo(map);
// 创建 Canvas 图层
var canvasLayer = L.canvas();
canvasLayer.addTo(map);
// 获取 Canvas 的上下文对象
var ctx = canvasLayer.getRenderer().getContext();
// 设置绘制样式
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
// 遍历 GeoJSON 数据的每个特征
geojsonData.features.forEach(function(feature) {
// 获取特征的坐标
var coordinates = feature.geometry.coordinates;
// 绘制边界
coordinates.forEach(function(coords) {
coords.forEach(function(coord) {
var latLng = L.GeoJSON.coordsToLatLng(coord);
var point = map.latLngToContainerPoint(latLng);
if (coord === coordinates[0][0]) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
});
});
});
// 绘制边界线
ctx.stroke();
// 清除图层的函数
function clearLayer() {
// 移除 Canvas 图层和 GeoJSON 图层
map.removeLayer(canvasLayer);
map.removeLayer(geojsonLayer);
}
</script>
</body>
</html>
此外也可以使用 clearRect()方法清除Canvas绘制的图层 https://www.sg-info.cn/article/show/6726
希望可以帮到您！
