【Turf】vue中高德地图中两个Polygon取交集Polygon展示并计算面积

第一步：添加依赖 npm install -s @turf/turf

第二步：在main.js中导入依赖 import * as turf from "@turf/turf"; 或在项目中单独导入

第三步：官方案例：

Example:

var poly1 = turf.polygon([[
    [-122.801742, 45.48565],
    [-122.801742, 45.60491],
    [-122.584762, 45.60491],
    [-122.584762, 45.48565],
    [-122.801742, 45.48565]
]]);

var poly2 = turf.polygon([[
    [-122.520217, 45.535693],
    [-122.64038, 45.553967],
    [-122.720031, 45.526554],
    [-122.669906, 45.507309],
    [-122.723464, 45.446643],
    [-122.532577, 45.408574],
    [-122.487258, 45.477466],
    [-122.520217, 45.535693]
   ]]);

var intersection = turf.intersect(poly1, poly2);

//addToMap
var addToMap = [poly1, poly2, intersection];

图例：

  

第四步：编写工具类：

// 获取重合Polygon
export const getTurfIntersect = (coordinate1, coordinate2) => {
    let poly1 = {
        geometry: {
            coordinates: [coordinate1],
            type: "Polygon"
        },
        properties: {},
        type: "Feature"
    }

    let poly2 = {
        geometry: {
            coordinates: [coordinate2],
            type: "Polygon"
        },
        properties: {},
        type: "Feature"
    }

    let intersection = turf.intersect(poly1, poly2)

    return intersection
}

其中的 coordinate1和coordinate2入参为一系列的经纬度

[[-122.520217, 45.535693],
 [-122.64038, 45.553967],
 [-122.720031, 45.526554],
 [-122.669906, 45.507309],
 [-122.723464, 45.446643],
 [-122.532577, 45.408574],
 [-122.487258, 45.477466],
 [-122.520217, 45.535693]]

第五步：引入个工具类 import {getTurfIntersect} from "@/utils/mapUtil";

<script>
    import AMap from 'AMap' // 引入高德地图
    import {getTurfIntersect, getMapLngLatCenter} from "@/utils/mapUtil";
    export default {
        data() {
            return {
                pointArrayList：[]
            }
        },
        
        methods: {
            // 获取当前区域、比较区域、重合区域
            getPolygonLands(){
              let pointArray = [[lng, lat],[lng, lat],[lng, lat]....]
              let currentPointArray = [[lng, lat],[lng, lat],[lng, lat]....]

              let intersection = getTurfIntersect(currentPointArray, pointArray)
              let landPointCrossArray = intersection.geometry.coordinates[0]

              this.pointArrayList = [currentPointArray, pointArray, landPointCrossArray]
      
              this.showAllPolygon()
            },

            showAllPolygon(){
              let polygons = []
              let text = null

              // 比较的地块 当前地块 重合地块
              this.pointArrayList.forEach((polygonArr, index) => {
                let color = '#3cded1'
                if (index == 0) { // 当前
                  color = '#3cded1'
                } else if (index == 1) { // 比较
                  color = '#3cded1'
                } else if (index == 2) { // 重合
                  color = '#fff700'
                }
                let polygon = new AMap.Polygon({
                  path: polygonArr, // 设置多边形边界路径
                  strokeColor: color, // 线颜色
                  strokeOpacity: 0.8, // 线透明度
                  strokeWeight: 2,    // 线宽
                  fillColor: color, // 填充色
                  fillOpacity: 0.6, // 填充透明度
               })
               polygons.push(polygon)
               if (index == 2) {
                   // 面积平方米 1平方米(㎡)等于0.0015亩
                   let area = (polygon.getArea() * 0.0015).toFixed(2)
                   let center = getMapLngLatCenter(polygonArr)
                   // 文本
                   text = new AMap.Text({
                     text:`${area}亩`,
                     anchor:'center', // 设置文本标记锚点
                     draggable:true,
                     cursor:'pointer',
                     angle:10,
                     style:{
                       'padding': '0',
                       'background-color': 'transparent',
                       'font-size': '12px',
                       'border': 'none',
                       'color': 'white'
                     },
                     offset: new AMap.Pixel(0, 12.5),
                     position: center
                   });
                 }
              })
              this.map.add([...polygons, text])
              new AMap.OverlayGroup(polygons)
          },
      }
</script>

 getMapLngLatCenter(array) 根据经纬度获取中心点位置

// 中心点
export const getMapLngLatCenter = (array) => {
    let center = {}
    let arr1 = JSON.parse(JSON.stringify(array));
    let arr2 = JSON.parse(JSON.stringify(array));
    arr1.sort(function (x, y) {
        return y.lat - x.lat
    })
    center.lat = (arr1[0].lat+arr1[arr1.length-1].lat)/2
    arr2.sort(function (x, y) {
        return y.lng - x.lng
    })
    center.lng  = (arr2[0].lng+arr2[arr2.length-1].lng)/2
    return [center.lng, center.lat]
}

图例：绿色为两块比较的地块，黄色为重合地块