turfjs多边形切割多边形求交集

文章目录


前言

分割矢量多边形

一、安装turf

bash 复制代码
npm i @turf/turf

二、加载高德

bash 复制代码
AMapLoader.load({
    key: "你的key", // 申请好的Web端开发者Key,首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    plugins: ["AMap.PolygonEditor", "AMap.LngLat", "AMap.Polygon"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
  }).then((AMap) => {
  //此处处理后续操作
}

三、绘制图形

bash 复制代码
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 13, // 初始化地图级别
      center: [116.471354, 39.994257],
    });
   // 创建两个多边形
    const polygonPath1 = [
      [-73.982, 40.76],
      [-73.979, 40.749],
      [-73.979, 40.748],
      [-73.981, 40.748],
      [-73.982, 40.76],
    ];

    var polygon1 = new AMap.Polygon({
      path: polygonPath1,
      fillColor: "#FFC0CB",
      strokeColor: "#000000",
      strokeWeight: 2,
    });
    map.add(polygon1); // 添加至地图
 
    const polygonPath2 = [
      [-73.983, 40.751],
      [-73.981, 40.751],
      [-73.981, 40.749],
      [-73.983, 40.749],
      [-73.983, 40.751],
    ];
    var polygon2 = new AMap.Polygon({
      path: polygonPath2,
      fillColor: "#FFC0CB",
      strokeColor: "#000000",
      strokeWeight: 2,
    });
    map.add(polygon2); // 添加至地图

   
 

四、计算交集

bash 复制代码
  // 将图形转化格式
   var turfPolygon1 = turf.polygon([polygonPath1.map((p) => [p[0], p[1]])]);
   var turfPolygon2 = turf.polygon([polygonPath2.map((p) => [p[0], p[1]])]);
   //可以判断是否存在交集
   console.log(turf.booleanOverlap(turfPolygon1, turfPolygon2), 89); ///相交了
   // 计算两个多边形的交集
   var intersection = turf.intersect(
      turf.featureCollection([turfPolygon1, turfPolygon2])
    );
    console.log(intersection, 88); //交集数据

  //    `Tips:` 计算第二个多边形截取第一个多边形后 第一个多边形的数据
    var difference = turf.difference(
      turf.featureCollection([turfPolygon1, turfPolygon2])
    );
    console.log(difference, 88); //差异(原多边形剩余部分)
    var polygon3 = new AMap.Polygon({
      path: [difference.geometry.coordinates],
      fillColor: "red",
      strokeColor: "#000000",
      strokeWeight: 2,
    });
    map.add(polygon3); // 添加至地图

六、绘制图像

bash 复制代码
 var polygon3 = new AMap.Polygon({
      path: [intersection.geometry.coordinates],
      fillColor: "red",
      strokeColor: "#000000",
      strokeWeight: 2,
    });
    map.add(polygon3); // 添加至地图
    
   

七、效果

剩余部分效果:

在这里插入图片描述

相关推荐
zm-v-159304339861 小时前
ArcGIS 水文分析升级:基于深度学习的流域洪水演进过程模拟
人工智能·深度学习·arcgis
新中地GIS开发老师10 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
Cacciatore->16 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
杨超越luckly3 天前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
~央千澈~3 天前
UniApp完全支持快应用QUICKAPP-以及如何采用 Uni 模式开发发行快应用优雅草卓伊凡
arcgis
敲敲敲-敲代码3 天前
【ArcGIS10.2】网络数据集构建---最短路径分析
网络·arcgis
人工智能教学实践4 天前
【基于Echarts的地图可视化】
arcgis
Cacciatore->4 天前
Electron 快速上手
javascript·arcgis·electron
南草徽13 天前
arcgis分割 (Split)
arcgis
野生工程师15 天前
【ArcGIS】在线影像底图调用
arcgis