Turf.js(地理空间GIS分析的js库)，处理地图相关算法

绝地灬酷狼 2023-09-30 14:54 1阅读 0赞

## 场景 ##

### Turf.js ###

Advanced geospatial analysis for browsers and Node.js

浏览器和Node.js的高级地理空间分析。

特点

Modular, simple-to-understand JavaScript functions that speak GeoJSON

模块化、简单易懂的JavaScript函数使用GeoJSON

Turf is a collection of small modules, you only need to take what you want to use

Turf是小模块的集合，你只需要拿你想用的

Takes advantage of the newest algorithms and doesn't require you to send data to a server

利用最新算法，不需要您将数据发送到服务器

官网：

[Turf.js | Advanced Geospatial Analysis][Turf.js _ Advanced Geospatial Analysis]

中文网：

[Turf.js中文网][Turf.js]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]

## 实现 ##

1、安装turf

npm install @turf/turf

![c3c0fe67cf6548faa4a09aeb01511851.jpeg][]

2、页面引入

import * as turf from '@turf/turf'

3、使用示例

计算点到线段的最短距离

var pt = turf.point([0, 0]);
             var line = turf.lineString(e.layer.toGeoJSON().geometry.coordinates);
             var distance = turf.pointToLineDistance(pt, line, {units: 'miles'});

参数说明

![c318c736b9ca4c59901f78bbd5dee2b0.jpeg][]

判断点是否在多边形内

var point = turf.point([-118.182003,34.04896]);
            var polygon = turf.polygon(e.layer.toGeoJSON().geometry.coordinates);
            var isInPolygon = turf.booleanPointInPolygon(point,polygon);

参数说明

![8bfd2379796f4028b05a4566bfa87ae1.jpeg][]

4、其他方法具体使用参考官网

这里结合leaflet以及pm插件绘制事件之后做一个使用demo，具体可参考前文

Vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)：

[Vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)\_霸道流氓气质的博客-CSDN博客][Vue_Leaflet.PM_-CSDN]

完整示例代码

<template>
      <div id="map" class="map"></div>
    </template>
    
    <script>
    import "leaflet/dist/leaflet.css";
    import L from "leaflet";
    import "leaflet.pm";
    import "leaflet.pm/dist/leaflet.pm.css";
    import * as turf from "@turf/turf";
    export default {
      name: "leafletWithTurf",
      data() {
        return {
          map: null,
          OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          this.map = L.map("map");
          this.map.setView([34.03, -118.15], 13);
          let tileLayer = L.tileLayer(this.OSMUrl);
          tileLayer.addTo(this.map);
    
          // 添加绘制工具
          this.map.pm.setLang("zh");
          this.map.pm.addControls({
            position: "topleft",
            drawPolygon: true, //绘制多边形
            drawMarker: false, //绘制标记点
            drawCircleMarker: false, //绘制圆形标记
            drawPolyline: true, //绘制线条
            drawRectangle: false, //绘制矩形
            drawCircle: true, //绘制圆圈
            editMode: true, //编辑多边形
            dragMode: true, //拖动多边形
            cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容
            removalMode: true, //清除多边形
          });
    
          // 全局设置绘制样式
          this.map.pm.setPathOptions({
            color: "orange",
            fillColor: "green",
            fillOpacity: 0.4,
          });
    
          // 或者单独设置绘制样式
          var options = {
            // 连接线标记之间的线
            templineStyle: {
              color: "red",
            },
            // 提⽰线从最后⼀个标记到⿏标光标的线
            hintlineStyle: {
              color: "red",
              dashArray: [5, 5],
            },
            // 绘制完成的样式
            pathOptions: {
              color: "orange",
              fillColor: "green",
            },
          };
    
          // 激活绘制多边形功能-1、单独设置某个模式的样式
          this.map.pm.enableDraw("Polygon", options);
    
          // 启用绘制--多边形功能
          this.map.pm.enableDraw("Polygon", {
            snappable: true, //启⽤捕捉到其他绘制图形的顶点
            snapDistance: 20, //顶点捕捉距离
          });
    
          this.map.on("pm:create", (e) => {
            debugger;
            //计算点到多线段的最短距离
            // var pt = turf.point([0, 0]);
            // var line = turf.lineString(e.layer.toGeoJSON().geometry.coordinates);
            // var distance = turf.pointToLineDistance(pt, line, {units: 'miles'});
    
            //判断点是否在多边形内
            var point = turf.point([-118.182003, 34.04896]);
            var polygon = turf.polygon(e.layer.toGeoJSON().geometry.coordinates);
            var isInPolygon = turf.booleanPointInPolygon(point, polygon);
          });
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      height: 400px;
    }
    </style>

[Turf.js _ Advanced Geospatial Analysis]: http://turfjs.org/
[Turf.js]: https://turfjs.fenxianglu.cn/
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[c3c0fe67cf6548faa4a09aeb01511851.jpeg]: https://img-blog.csdnimg.cn/c3c0fe67cf6548faa4a09aeb01511851.jpeg
[c318c736b9ca4c59901f78bbd5dee2b0.jpeg]: https://img-blog.csdnimg.cn/c318c736b9ca4c59901f78bbd5dee2b0.jpeg
[8bfd2379796f4028b05a4566bfa87ae1.jpeg]: https://img-blog.csdnimg.cn/8bfd2379796f4028b05a4566bfa87ae1.jpeg
[Vue_Leaflet.PM_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126351717