通过turfjs使用线段分割矢量多边形

devtools/2025/3/18 13:19:14/

文章目录

  • 前言
    • 分割矢量多边形
  • 一、安装turf
  • 二、加载高德
  • 三、绘制图形
  • 四、计算交点
  • 五、编写获取子多边形的函数
  • 六、调用分割函数并绘制图像
  • 七、效果


前言

分割矢量多边形

一、安装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],});// 绘制折线var polylinePath = [[116.478, 40.000296],[116.478603, 39.997534],[116.478, 40.000296],];// 创建折线实例var polyline = new AMap.Polyline({path: polylinePath,strokeColor: "#FF0000",strokeWeight: 5,lineCap: "round",});map.add(polyline); // 添加至地图// 绘制多边形var polygonPath = [[116.475334, 39.997534],[116.476627, 39.998315],[116.478603, 39.99879],[116.478529, 40.000296],[116.475082, 40.000151],[116.473421, 39.998717],[116.475334, 39.997534],];// 创建多边形实例var polygon = new AMap.Polygon({path: polygonPath,fillColor: "#FFC0CB",strokeColor: "#000000",strokeWeight: 2,});map.add(polygon); // 添加至地图

四、计算交点

 // 格式转化// 转换折线为Turf线段var turfPolyline = turf.lineString(polylinePath.map((p) => [p[0], p[1]]));// 转换多边形为Turf多边形var turfPolygon = turf.polygon([polygonPath.map((p) => [p[0], p[1]])]);// // 计算折线与多边形的交点var intersections = turf.lineIntersect(turfPolyline, turfPolygon);// 获取交点数量var intersectionCount = intersections.features.length;console.log("交点个数:", intersectionCount);console.log("交点:",intersections.features.map((i) => i.geometry.coordinates));

五、编写获取子多边形的函数

function polygonCut(poly,line,tolerance = 0.001,toleranceType = "kilometers") {// 1. 条件判断if (poly.geometry === void 0 || poly.geometry.type !== "Polygon")throw "传入的必须为polygon";if (line.geometry === void 0 ||line.geometry.type.toLowerCase().indexOf("linestring") === -1)throw "传入的必须为linestring";if (line.geometry.type === "LineString") {if (turf.booleanPointInPolygon(turf.point(line.geometry.coordinates[0]),poly) ||turf.booleanPointInPolygon(turf.point(line.geometry.coordinates[line.geometry.coordinates.length - 1]),poly))throw "起点和终点必须在多边形之外";}// 2. 计算交点,并把线的点合并let lineIntersect = turf.lineIntersect(line, poly);const lineExp = turf.explode(line);for (let i = 0; i < lineExp.features.length - 1; i++) {lineIntersect.features.push(turf.point(lineExp.features[i].geometry.coordinates));}// 3. 计算线的缓冲区const lineBuffer = turf.buffer(line, tolerance, {units: toleranceType,});// 4. 计算线缓冲和多边形的difference,返回"MultiPolygon",所以将其拆开var _body = turf.difference(turf.featureCollection([poly, lineBuffer]));console.log(_body, 134);let pieces = [];if (_body.geometry.type === "Polygon") {pieces.push(turf.polygon(_body.geometry.coordinates));} else {_body.geometry.coordinates.forEach(function (a) {pieces.push(turf.polygon(a));});}return pieces;}

六、调用分割函数并绘制图像

let polygons = polygonCut(turfPolygon, turfPolyline);// 绘制子多边形(根据需求将数据保存只后台)var polygon1 = new AMap.Polygon({path: [polygons[0].geometry.coordinates],fillColor: "red",strokeColor: "#000000",strokeWeight: 2,});map.add(polygon1); // 添加至地图var polygon2 = new AMap.Polygon({path: [polygons[1].geometry.coordinates],fillColor: "green",strokeColor: "#000000",strokeWeight: 2,});map.add(polygon2); // 添加至地图

七、效果

在这里插入图片描述


http://www.ppmy.cn/devtools/168063.html

相关文章

【Json—RPC框架】:宏定义不受命名空间限制,续行符的错误使用造成的bug

为什么不受命名空间的限制&#xff1f; 宏处理在预处理阶段&#xff0c; 预处理在编译之前&#xff0c;编译才进行语法分析&#xff0c;语义分析。命名空间也只能限制这部分。 在Json-RPC框架的实现中&#xff0c;遇到如下问题。一开始以为是在实现日志宏的时候&#xff0c;有…

python-websocket压力测试

一.websocket简介及安装 使用pip命令安装websocket库&#xff1a;pip install websocket-client websocket.WebSocketApp 是对 websocket.WebSocket 的封装&#xff0c;支持自动定时发送 PING 帧&#xff0c;支持事件驱动方式的数据帧接收&#xff0c;可用于长期的 WebSocket…

TypeScript接口 interface 高级用法完全解析

TypeScript接口 interface 高级用法完全解析 mindmaproot(TypeScript接口高级应用)基础强化可选属性只读属性函数类型高级类型索引签名继承与合并泛型约束设计模式策略模式工厂模式适配器模式工程实践声明合并类型守卫装饰器集成一、接口核心机制深度解析 1.1 类型兼容性原理 …

Maven学习

Maven是用来构建项目&#xff0c;管理依赖的 Maven项目结构 main主要写实现代码&#xff0c;test是写测试代码不会被打包 resource放静态资源&#xff0c;webapp存放web开发内容。 pom文件包括项目版本号内容以及相关配置以及后续依赖 Maven依赖导入&#xff0c;就是直接写…

【通义千问】蓝耘智算 | 智启未来:蓝耘MaaS×通义QwQ-32B引领AI开发生产力

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能&#xff08;AI&#xff09;通过算法模拟人类智能&#xff0c;利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络&#xff08;如ChatGPT&…

音视频入门基础:RTCP专题(1)——RTCP官方文档下载

一、引言 实时传输控制协议&#xff08;Real-time Transport Control Protocol或RTP Control Protocol或简写RTCP&#xff09;是实时传输协议&#xff08;RTP&#xff09;的一个姐妹协议。RTCP由《RFC 3550》定义&#xff08;取代废弃的《RFC 1889》&#xff09;。RTP使用一个…

【AI 加持下的 Python 编程实战 2_04】第三章:GitHub Copilot 在 Python 函数设计中的正确打开方式(含本地实操)

【全新第二版《Learn AI-assisted Python Programming》封面】 写在前面 本篇是全书的第一处精华内容&#xff0c;从完全零基础小白的角度详细介绍了 Copilot 在 Python 函数设计中的用法&#xff0c;包括提示词的正确写法、基于 AI 工具的函数设计基本工作流程等&#xff0c;虽…

人工智能中神经网络是如何进行学习的

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。https://www.captainbed.cn/north 文章目录 引言神经网络的学习过程1. 前向传播2. 计算损失3. 反向传播反向传播的步骤 4. 参数更新5. 重…