地图框架之mapbox——（五）

最新推荐文章于 2025-04-24 15:15:57 发布

@小张在努力

最新推荐文章于 2025-04-24 15:15:57 发布

阅读量570

点赞数 8

分类专栏： mapbox 文章标签：前端 webgis mapbox

本文链接：https://blog.youkuaiyun.com/qq_45751819/article/details/143594042

版权

mapbox 专栏收录该内容

10 篇文章

订阅专栏

今天主要学习mapbox中如何使用画笔！

一、导入画笔依赖

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css" type="text/css">

二、代码实现

默认情况下所有类型画笔全部加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <!-- 导入依赖 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
        type="text/css">
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        //token
        mapboxgl.accessToken = '你的token';
        const gaode = {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        }
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: gaode, // style URL
            center: [114.30, 30.50], // starting position [lng, lat]
            zoom: 9, // starting zoom
        });
        /* 实例化画笔 */
        const draw = new MapboxDraw({})
        /* 将画笔作为控件添加给map */
        map.addControl(draw, 'top-left')
        /* 监听画笔 */
        map.on("draw.create", handleDraw)
        function handleDraw(evt) {
            console.log(evt.features[0])
        }
    </script>
</body>

</html>

 const draw = new MapboxDraw({
            controls: {
                // point: false,
                line_string: true,
                polygon: false,
                trash: false,
                combine_features: false,
                uncombine_features: false
            }
        })

通过true或false决定是否显示该画笔

三、设置画笔的模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <!-- 导入依赖 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
        type="text/css">
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #btn {
            width: 200px;
            height: 50px;
            position: fixed;
            top: 20px;
            left: 60px;
            z-index: 100;
        }

        #clear {
            width: 200px;
            height: 50px;
            position: fixed;
            top: 20px;
            left: 260px;
            z-index: 100;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="activeDraw()">激活画笔</button>
    <button id="clear" onclick="clearDraw()">清空数据</button>
    <div id="map">

    </div>
    <script>
        //token
        mapboxgl.accessToken = '你的token';
        const gaode = {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        }
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: gaode, // style URL
            center: [114.30, 30.50], // starting position [lng, lat]
            zoom: 9, // starting zoom
        });
        /* 实例化画笔 */
        const draw = new MapboxDraw({
            /* 如果设置false 可以将画笔全部隐藏 */
            displayControlsDefault: false
        })
        /* 将画笔作为控件添加给map */
        map.addControl(draw, 'top-left')
        /* 监听画笔 */
        map.on("draw.create", handleDraw)
        function handleDraw(evt) {
            console.log(evt.features[0])
        }

        function activeDraw() {
            /* draw changeModel */
            /* draw_point */
            /* draw_line_string */
            /* draw_polygon */
            draw.changeMode("draw_polygon")
        }

        function clearDraw() {
            /* 删除画笔的图形 */
            // console.log(draw);
            draw.deleteAll();
        }
    </script>
</body>

</html>

具体的有关画笔的其他内容可以参考官方文档，下面是画笔的github地址，其实掌握上面的内容基本就足够了。

GitHub - mapbox/mapbox-gl-draw: Draw tools for mapbox-gl-js

工作中一般来说需要结合turf.js使用，下面是turf.js的地址，后面有时间的话，也会给大家出一些文章讲一讲。

Turf.js中文网 | Turf.js中文网