前言

在日常前端开发工作中，无论是pc端还是移动端，经常会遇到关于地理信息计算相关的功能，例如生成缓冲区、生成贝塞尔曲线、计算空间数据的交集并集等等。而turf.js是一个功能强大的地理信息分析库，可以快速帮你完成这些工作，本文主要介绍几种turf.js库的实用功能和使用方法。

一生成缓冲区

let turfGeometry //缓冲区要素
        let latlngs  //坐标数组
        let coordinates //处理后的坐标数组
        let radius = 0.5 //缓冲区半径
        // 点要素
        const point = layer.getLatLng();
        turfGeometry = turf.point([point.lng, point.lat]);

        // 线要素
        latlngs = layer.getLatLngs();
        coordinates = latlngs.map(latlng => [latlng.lng, latlng.lat]);
        turfGeometry = turf.lineString(coordinates);
        // 面要素
        latlngs = layer.getLatLngs()[0]; //只拿最外层
        coordinates = latlngs.map(latlng => [latlng.lng, latlng.lat]);
        // 闭合多边形
        coordinates.push(coordinates[0]);
        turfGeometry = turf.polygon([coordinates]);
        // 生成缓冲区
        const buffered = turf.buffer(turfGeometry, radius, { units: 'kilometers' });
        // units:kilometers, meters, miles等距离单位
        //steps: 64, //缓冲区精度
        // 将缓冲区添加到地图
        const bufferGeoJson = L.geoJSON(buffered, {
          style: {
            color: '#3498db',
            weight: 2,
            fillColor: '#3498db',
            fillOpacity: 0.5
          }
        });
        bufferGeoJson.addTo(this.map);

效果图

二生成贝塞尔曲线

let turfGeometry //缓冲区要素
        let latlngs  //坐标数组
        let coordinates //处理后的坐标数组
        let radius = 0.5 //缓冲区半径
       
        // 线要素
        latlngs = layer.getLatLngs();
        coordinates = latlngs.map(latlng => [latlng.lng, latlng.lat]);

        // 创建GeoJSON线
        const line = turf.lineString(coordinates);

        // 生成贝塞尔曲线
        const curved = turf.bezierSpline(line, {
          resolution: resolution,//曲线分辨率 分辨率越高，曲线越平滑，但计算量也越大
          sharpness: sharpness// 曲线锐度，值越大，曲线越尖锐
        });

        // 将贝塞尔曲线添加到地图
        const bezierGeoJson = L.geoJSON(curved, {
          style: {
            color: '#6a11cb',
            weight: 4
          }
        });
        bezierGeoJson.addTo(this.map);

效果图

三计算空间数据的交集并集

let latlng1 = turf.polygon([[
          [117, 37],
          [119, 37],
          [119, 39],
          [117, 39],
          [117, 37]
        ]]);

        let latlng2 = turf.polygon([[
          [117.5, 36.5],
          [119.5, 36.5],
          [119.5, 38.5],
          [117.5, 38.5],
          [117.5, 36.5]
        ]]);
        var intersection = turf.intersect(latlng1, latlng2);//生成两个图形的交集
        var union = turf.union(latlng1, latlng2);//生成两个图形的并集
        const intersectJson = L.geoJson(intersection, {style: {color: 'red'}});
        const polygon1 = L.geoJson(latlng1, {style: {color: 'blue'}});
        const polygon2 = L.geoJson(latlng2, {style: {color: 'yellow'}});
        polygon1.addTo(this.map);
        polygon2.addTo(this.map);
        intersectJson.addTo(this.map);

交集效果图

并集效果图

注意事项

• 当需要大量计算图像数据的交集时，可先使用turf.booleanIntersects()判断两个几何图形是否相交，再做计算
• 可使用turf.area()计算多边形面积