旅游网站网页设计代码二维码制作网站链接

---

前言

分割矢量多边形

一、安装turf

npm i @turf/turf

二、加载高德

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

三、绘制图形

    map = new AMap.Map("container", {// 设置地图容器idviewMode: "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); // 添加至地图

四、计算交集

  // 将图形转化格式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); // 添加至地图

六、绘制图像

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

七、效果

剩余部分效果：

在这里插入图片描述