uniapp 框架引用turf.js步骤

Turf.js中文网 

一、安装指定模块

示例:实现运动轨迹缓冲区及迹缓冲面积计算。

  1. 接口获取的轨迹点连成线 | Turf.js(轨迹点只有一个则无法连成线):
    a. npm 安装:
    $ npm install @turf/helpers
    
    b. 页面引入:
    import { lineString } from '@turf/helpers';
    
    c. lineString的调用:
    //按[纬度,经度]格式,接口获取的点如果是gcj02则需要转成wgs84的
    //geometry 接口获取的点
    JSON.parse(JSON.stringify(geometry)).forEach((item,index) => {
        arr.push([item.lng,item.lat]);
    })
    let linestrings = lineString(arr);
    console.log("linestrings",linestrings)
  2. 绘制运动轨迹计算缓冲区(辐射区) | Turf.js
    a. npm 安装:
    $ npm install @turf/buffer
    
    b. 页面引入:
    import { buffer } from '@turf/buffer';
    
    c. buffer调用:
    // 默认单位是千米,与下面的写法一致,我这里是100米
    let buffereds = buffer(linestrings, 100, {units: 'meters'});
    let polygonlist = buffereds.geometry.coordinates[0];
    // let polygons = polygon([polygonlist]);
    let mapPolygon=[];
    JSON.parse(JSON.stringify(polygonlist)).map((item)=>{
        // 绘制路线点
        mapPolygon.push({
            latitude: wgs84togcj02(item[0], item[1])[1],
            longitude: wgs84togcj02(item[0], item[1])[0]
        });
    })
    //地图渲染缓冲区
    that.polygons = [{
        points: JSON.parse(JSON.stringify(mapPolygon)),
        strokeWidth:2,
        strokeColor:'#0070d9',
        fillColor:'#0070d933',
        zIndex:2
    }];
  3. 计算缓冲区面积:首先将缓冲区通过polygon | Turf.js生成面,在area | Turf.js计算缓冲区面积。
    a. npm 安装:
    $ npm install @turf/area
    
    b. 页面引入:
    import { polygon } from '@turf/helpers';
    import { area } from '@turf/area';
    
    c. area调用:
    let arr = buffereds.geometry.coordinates[0];//调用buffer返回的缓冲区点
    let polygons = polygon([arr]);//讲点生成面
    let areanum = area(polygons);//计算缓冲区面积

二、安装所有模块

  1. npm安装:
    $ npm install @turf/turf
  2. 页面引入,引入全部方法:
    import * as turf from '@turf/turf'
    或 引入指定方法:
    import { lineString,polygon } from '@turf/turf'

猜你喜欢

转载自blog.csdn.net/qq_39891453/article/details/126985177