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); // 添加至地图
    
   

七、效果

剩余部分效果:

在这里插入图片描述

相关推荐
杨超越luckly4 天前
HTML应用指南:利用GET请求获取全国奈雪的茶门店位置信息
大数据·前端·python·arcgis·信息可视化·html
zhou_x_b5 天前
解决栅格数据裁剪矢量数据问题两种方法,ArcGIS解决与PYTHON解决
arcgis
维维180-3121-14555 天前
ArcGIS水文及空间分析与SWMM融合协同在城市排水防涝领域中的应用
arcgis·水文·内涝
GIS小小研究僧9 天前
ArcGIS Pro+PS 实现地形渲染效果图
arcgis·gis·qgis·地理信息
杨超越luckly9 天前
Python应用指南:使用PyKrige包实现ArcGIS的克里金插值法
python·算法·arcgis·信息可视化·克里金法
WangYan20229 天前
Python+ArcGIS+AI蒸散发与GPP估算|Penman-Monteith模型|FLUXNET数据处理|多源产品融合|专业科研绘图与可视化等
arcgis·蒸散发·光合作用·植被生产力估算
清纯世纪11 天前
Arcgis 10.7 矢量的分区统计
arcgis
猫头虎11 天前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip
杨超越luckly12 天前
ArcGISPro应用指南:使用ArcGIS Pro创建与优化H3六边形网格
arcgis·信息可视化·数据可视化·shp·h3网格
柳晓黑胡椒12 天前
Cesium源码打包
arcgis