mapbox-gl-draw改造，支持绘制时实时显示面积

GIS开发者 2020-12-09 19:15:33

361

分类专栏： MapBox GIS深度开发文章标签： mapbox-gl-draw 绘制面积 turf

本文链接：https://blog.csdn.net/GISuuser/article/details/110938338

版权

在Mapbox的开发过程中，需要使用mapbox-gl-draw来进行多边形的绘制、编辑与状态控制，用起来还是非常方便的。最近有需求，需要再绘制时实时显示绘制的面积，这个确实比较麻烦，因为绘制都是这个插件在控制的。最后找到了一个解决办法，把mapbox-gl-draw插件改了，绘制和修改多边形时，实时回调，触发新的事件。

插件改动

首先克隆mapbox-gl-draw的代码https://github.com/mapbox/mapbox-gl-draw.git，然后constants.js中增加事件名称

2.在render.js中增加多边形绘制的回调

然后编辑插件即可，也可以下载我修改好的代码https://download.csdn.net/download/GISuuser/13582683。

然后，把自己项目中的mapbox-gl-draw.js库文件替换即可

示例demo

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>显示已绘制的多边形区域</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    .calculation-box {
        height: 75px;
        width: 150px;
        position: absolute;
        bottom: 40px;
        left: 10px;
        background-color: rgba(255, 255, 255, .9);
        padding: 15px;
        text-align: center;
    }

    p {
        font-family: 'Open Sans';
        margin: 0;
        font-size: 13px;
    }
</style>

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<!--<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>-->
<!--自己编译的未压缩库-->
<script src='mapbox-gl-draw-unminified.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>
<div id='map'></div>
<div class='calculation-box'>
    <p>Draw a polygon using the draw tools.</p>
    <div id='calculated-area'></div>
</div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZzczcDB6aHgycW1scXZqd3FpNmcifQ.d4p32JmAhTek8BUIt3WGLw';
    /* eslint-disable */
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
        center: [-91.874, 42.760], // starting position
        zoom: 12 // starting zoom
    });

    var draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            combine_features: true,
            uncombine_features: true,
            trash: true
        }
    });
    map.addControl(draw);
    let popup=null;

    // map.on('draw.create', updateArea);
    map.on('draw.delete', updateArea);
    map.on('draw.update', updateArea);
    map.on('draw.create', clearPopup);
    map.on('draw.update_polygon', test);

    function clearPopup(){
        if(popup){
            popup.remove();
            popup=null;
        }
    }
   function test(e) {
       if(popup){
           popup.remove();
           popup=null;
       }
       let area=turf.area(e.feature);
       let center=turf.center(e.feature);

       popup = new mapboxgl.Popup({
           closeButton: false
       });
       popup.setLngLat(center.geometry.coordinates)
           .setText(area)
           .addTo(map);
   }
    function updateArea(e) {
        var data = draw.getAll();
        var answer = document.getElementById('calculated-area');
        if (data.features.length > 0) {
            var area = turf.area(data);
            // restrict to area to 2 decimal points
            var rounded_area = Math.round(area*100)/100;
            answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
        } else {
            answer.innerHTML = '';
            if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
        }
    }

</script>

</body>
</html>