概述

很多时候，我们会有一堆点连成线的需求，但大多数情况下这些点是无序的，导致现有的软件的连线结果并不是我们想要的，这也是本文产生的原因。

实现思路

为了能够更好地完成点连成线的需求，因此我们需要确定一下起点，完了之后通过起点去逐个点找该点的下一个点，并将该点的坐标记录下来，直到找到终点，这个查找结束。

实现结果

实现代码

function Points2Line(start, data) {if (!this instanceof Points2Line) {return new Points2Line(start, res);}let len = data.length;let donePointIds = [start.properties.id];/*** 计算两点距离* @param coord1* @param coord2* @returns {number}*/const getDistance = function (coord1, coord2) {const x = coord1[0] - coord2[0];const y = coord1[1] - coord2[1];return Math.sqrt(x * x + y * y);}/*** 获取最近点* @param point* @returns {object}*/const getClosestPoint = function (point) {let dis = 999999;let index = 0for (let i = 0; i < len; i++) {const r = data[i];const coord = r.geometry.coordinates;if(donePointIds.indexOf(r.properties.id) === -1) {const _dis = getDistance(coord, point);if(dis > _dis ) {index = i;dis = _dis;}}}return data[index]}/*** 获取结果* @returns {{geometry: {coordinates: [*], type: string}, type: string, properties: {}}}*/this.getResultGeojson = function () {let startCoord = start.geometry.coordinates;let coords = [startCoord];for (let i = 0; i < len - 1; i++) {const pt = getClosestPoint(startCoord)donePointIds.push(pt.properties.id)startCoord = pt.geometry.coordinates;coords.push(startCoord)}return {"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates": coords}}}
}$.get('data/test.json', function (res) {res = res.featuresconst startPoint = { "type": "Feature", "properties": { "id": 385 }, "geometry": { "type": "Point", "coordinates": [ 113.332675, 23.247206 ] } };const pt2line = new Points2Line(startPoint, res);console.log(JSON.stringify(pt2line.getResultGeojson()));
})

待优化：

本文中的起点是手动传入的，后需会增加自动获取起点的实现；
本文只实现了单条线，后续会增减多线的实现；
本文是通过js实现的，后面会增加java的实现。

点连线的思路与js的简单实现相关推荐

js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
js 计算在AB两点连线上，距离A点一定距离的点的坐标
/*** @description 获取在AB两点连线上,以AB为方向,距离A点,L处的点的坐标* @param A:{x,z} 点A* @param B:{x,z} 点B* @param L 距A点 ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
JavaScript|拖拽|仿Android手机九点连线开锁
最简单的JavaScript拖动代码 <script> var xx=0,yy=0; function a(v) { xx=event.x-v.offsetLeft; yy=event.y ...
髂嵴最高点在哪里_两侧髂嵴最高点连线约平 ( )
[单选题]胸骨角两侧( ) [单选题]下列不属于非语言沟通技巧的是() [单选题]历史上护士的最初形象是() [单选题]护士作为管理协调者的角色是因为护士在临床护理中要() [简答题]湖泊受到大量有机 ...
利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
unity3d:向量计算：获得两点连线的垂直向量，判断目标方位（前后左右）
获得两点连线垂直向量 /// <summary>/// 获取某向量的垂直向量/// </summary>public static Vector3 GetVerticalDir ...
百度地图显示多点连线+数字标注
百度地图显示多点连线+数字标注 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
ArcGis js api 简单绘制点线面
Arcgsi js api 简单绘制点线面 <!DOCTYPE html> <html><head><meta http-equiv="Conten ...

点连线的思路与js的简单实现

概述

实现思路

实现结果

实现代码

点连线的思路与js的简单实现相关推荐

最新文章

热门文章