当前位置：首页 > news >正文

Mapbox GL JS 实现鼠标绘制矩形功能的详细代码和讲解

news 来源：原创 2025/6/20 12:21:24

以下是如何使用 Mapbox GL JS 实现鼠标绘制矩形功能的详细代码和讲解。Mapbox GL JS 是一个强大的 JavaScript 库，可以用来创建交互式地图。下面将通过监听鼠标事件并动态更新地图图层来实现这一功能。

实现步骤

初始化地图
- 在 HTML 文件中引入 Mapbox GL JS 库，并设置一个容器来显示地图。
- 创建一个 mapboxgl.Map 实例，配置地图样式、中心点和缩放级别。
监听鼠标事件
- 使用 map.on 方法监听 mousedown（鼠标按下）、mousemove（鼠标移动）和 mouseup（鼠标松开）事件。
- 在 mousedown 时记录矩形的起始点。
- 在 mousemove 时根据鼠标位置实时更新矩形。
- 在 mouseup 时结束绘制并固定矩形。
绘制矩形
- 使用 GeoJSON 数据格式表示矩形。
- 通过 map.addSource 和 map.addLayer 将矩形添加到地图上。
- 在鼠标移动时动态更新 GeoJSON 数据以显示矩形的当前形状。
结束绘制
- 在绘制完成后移除不必要的事件监听器，避免重复触发。

详细代码

以下是完整的 HTML 和 JavaScript 代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapbox GL 绘制矩形</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 设置 Mapbox 访问令牌
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 请替换为你的 Mapbox 访问令牌

        // 初始化地图
        const map = new mapboxgl.Map({
            container: 'map', // 地图容器 ID
            style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
            center: [-74.5, 40], // 初始中心点（经度，纬度）
            zoom: 9 // 初始缩放级别
        });

        let startPoint; // 矩形起始点

        // 开始绘制：监听鼠标按下事件
        function startDrawing(e) {
            startPoint = e.lngLat; // 记录鼠标按下时的经纬度
            map.on('mousemove', drawRectangle); // 开始监听鼠标移动
            map.on('mouseup', stopDrawing); // 开始监听鼠标松开
        }

        // 绘制矩形：监听鼠标移动事件
        function drawRectangle(e) {
            const endPoint = e.lngLat; // 获取鼠标当前位置
            // 计算矩形的四个顶点坐标
            const coordinates = [
                [startPoint.lng, startPoint.lat], // 左上角
                [endPoint.lng, startPoint.lat],   // 右上角
                [endPoint.lng, endPoint.lat],     // 右下角
                [startPoint.lng, endPoint.lat],   // 左下角
                [startPoint.lng, startPoint.lat]  // 回到起点闭合
            ];

            // 创建矩形的 GeoJSON 数据
            const rectangleGeoJSON = {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [coordinates]
                }
            };

            // 如果数据源已存在，则更新；否则创建新数据源和图层
            if (map.getSource('rectangle')) {
                map.getSource('rectangle').setData(rectangleGeoJSON);
            } else {
                map.addSource('rectangle', {
                    type: 'geojson',
                    data: rectangleGeoJSON
                });
                map.addLayer({
                    id: 'rectangle-layer',
                    type: 'fill',
                    source: 'rectangle',
                    paint: {
                        'fill-color': '#088', // 填充颜色
                        'fill-opacity': 0.5   // 透明度
                    }
                });
            }
        }

        // 结束绘制：监听鼠标松开事件
        function stopDrawing() {
            map.off('mousemove', drawRectangle); // 移除鼠标移动监听
            map.off('mouseup', stopDrawing);     // 移除鼠标松开监听
            // 可以在此保存矩形数据或执行其他操作
        }

        // 绑定鼠标按下事件，开始绘制流程
        map.on('mousedown', startDrawing);
    </script>
</body>
</html>

代码讲解

1. 初始化地图

引入 Mapbox GL JS：通过 <script> 和 <link> 标签引入 Mapbox GL JS 的 JavaScript 和 CSS 文件。
设置访问令牌：将 mapboxgl.accessToken 设置为你的 Mapbox 访问令牌（需自行申请）。
创建地图实例：使用 mapboxgl.Map 配置地图，指定容器 ID（map）、地图样式（streets-v11）、中心点和缩放级别。

2. 监听鼠标事件

鼠标按下 (mousedown)：
- 通过 e.lngLat 获取鼠标按下时的经纬度，存储在 startPoint 中。
- 绑定 mousemove 和 mouseup 事件，开始绘制流程。
鼠标移动 (mousemove)：
- 调用 drawRectangle 函数，实时更新矩形形状。
鼠标松开 (mouseup)：
- 调用 stopDrawing 函数，移除事件监听器，结束绘制。

3. 绘制矩形

计算坐标：根据 startPoint 和当前鼠标位置 endPoint，生成矩形的四个顶点坐标，形成闭合的多边形。
创建 GeoJSON：将坐标封装为 GeoJSON 格式的 Polygon 类型。
更新地图：
- 如果地图上已有 rectangle 数据源，则通过 setData 更新数据。
- 如果没有，则通过 addSource 添加数据源，并通过 addLayer 创建一个填充图层来显示矩形。
样式设置：矩形填充颜色为 #088（青色），透明度为 0.5。