首页 / 浏览问题 / WebGIS / 问题详情
canvas在地图上绘制的图层如何清除
9EXP 2023年09月13日
<!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>
    <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();
    </script>
</body>
</html>

这是绘制的canvas代码。请问如何删除这个图层

1个回答

您好,

 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

希望可以帮到您!

220EXP 2023年09月13日
...