javascript实现取线段中垂线上指定距离的点

最新推荐文章于 2023-01-14 19:00:55 发布
最新推荐文章于 2023-01-14 19:00:55 发布
阅读量900 收藏 2
点赞数 2
分类专栏： openlayers 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwr888/article/details/120508401
版权

javascript实现取线段中垂线上指定距离的点

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="ol.css" type="text/css">
 
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="ol.js"></script>
    <!--<script src="olStyle/Light.js"></script>-->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
 
        .map {
            width: 100%;
            height: 100%;
            /*background: #f6f6f4;*/ 
            background:rgb(0,47,71);
        }
    </style>
</head>
 
<body>
    <div id="map" class="map" data-id="11"></div>
    <script type="text/javascript"> 
 
        $(function () {
 
            InitMap();
 
            loadPoint();

            //test(120.277, 36.330,126.277, 34.330,72152.69);
            //test(126.277, 34.330,120.277, 36.330,72152.69);

            //test(120.277, 36.330,126.277, 34.330,162152.69);
            //test(126.277, 34.330,120.277, 36.330,162152.69);
			
			test1(120.277, 36.330,126.277, 34.330,162152.69);
			test1(126.277, 34.330,120.277, 36.330,162152.69);

            //test(120.277, 36.330,129.277, 36.330,162152.69);
            //test(129.277, 36.330,120.277, 36.330,162152.69);

            //test(120.277, 36.330,120.277, 27.330,162152.69);
            //test(120.277, 27.330,120.277, 36.330,162152.69);
        })
 
        var map;
        var layer;
 
        //地图初始化
        function InitMap() {
            //初始化地图
            layer = new ol.layer.Vector({
                source: new ol.source.Vector(),
                    overlaps: false,
                    wrapX: false,
                style: function (feature, resolution) {
                    switch (feature.get('layer')) {
                        case 'poi':
                            poiStyle.getText().setText(feature.get('name'));
                            return poiStyle;
                        case 'boundary': return boundaryStyle;
                        case 'lawn': return lawnStyle;
                        case 'road':
                            roadStyle.getText().setText(feature.get('name'));
                            return (resolution < 2) ? roadStyle : null;
                        case 'building':
                            return buildingStyle(feature, resolution);
                        case 'other':
                            otherStyle.getText().setText(feature.get('name'));
                            return otherStyle;
                        default: return null;
                    }
                }
            });
			
			var tileLayer = new ol.layer.Tile({
			  source: new ol.source.OSM(),
			});
 
            map = new ol.Map({
                layers: [tileLayer,layer],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([120.277, 36.330]),
                    minZoom: 1,
                    zoom: 5
                })
            });
        }
 
        /*显示并编辑区域**********************************************************************************/
 
 
        function createLabelStyle(feature) {
            //返回一个样式
            return new ol.style.Style({
                //把点的样式换成ICON图标
                fill: new ol.style.Fill({
                    //填充颜色
                    color: 'rgba(37,241,239,0.2)'
                }),
                //图形样式，主要适用于点样式
                image: new ol.style.Circle({
                    //半径大小
                    radius: 7,
                    //填充
                    fill: new ol.style.Fill({
                        //填充颜色
                        color: '#e81818'
                    })
                }),
                //层
                zIndex: 20
            });
        };
 
        function loadPoint() {
 
            var coordinate = ol.proj.fromLonLat([120.277, 36.330]);
 
            var newFeature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate)
            });
 
            var coordinate1 = ol.proj.fromLonLat([126.277, 34.330]);
 
            var newFeature1 = new ol.Feature({
                geometry: new ol.geom.Point(coordinate1)
            });
 
            //设置点的样式
            newFeature.setStyle(createLabelStyle(newFeature));
            newFeature1.setStyle(createLabelStyle(newFeature1));
 
            //清楚坐标点
            //layer.getSource().clear();
 
            //将当前要素添加到矢量数据源中
            layer.getSource().addFeature(newFeature);
            layer.getSource().addFeature(newFeature1);
        }

        function test(x1,y1,x2,y2,leng) {
            var sPoint = ol.proj.fromLonLat([x1, y1]);
            //var sPoint1 = ol.proj.transform(sPoint, 'EPSG:4326', 'EPSG:3857');
            var ePoint = ol.proj.fromLonLat([x2, y2]);
            //var ePoint1 = ol.proj.transform(ePoint, 'EPSG:4326', 'EPSG:3857');
            var pointV = addPoint(sPoint[0],sPoint[1],ePoint[0],ePoint[1],leng);
            
            var tempPoint = new ol.geom.Point(pointV);
            var newFeature = new ol.Feature({
                geometry: tempPoint
            });
            //设置点的样式
            newFeature.setStyle(createLabelStyle(newFeature));
            //将当前要素添加到矢量数据源中
            layer.getSource().addFeature(newFeature);
            
        }

        //取线段中垂线上指定距离的点
        function test1(x1,y1,x2,y2,leng) {
            var sPoint = ol.proj.fromLonLat([x1, y1]);
            //var sPoint1 = ol.proj.transform(sPoint, 'EPSG:4326', 'EPSG:3857');
            var ePoint = ol.proj.fromLonLat([x2, y2]);
            //var ePoint1 = ol.proj.transform(ePoint, 'EPSG:4326', 'EPSG:3857');
			//取线段中点
			var centerX = sPoint[0] + (ePoint[0]-sPoint[0])/2;
			var centerY = sPoint[1] + (ePoint[1]-sPoint[1])/2;
			//取离中点指定距离点
            var pointV = addPoint(centerX,centerY,ePoint[0],ePoint[1],leng);
			//将新点绕中点旋转90度(90弧度:Math.PI/2)
            var pointR = rotatePoint(pointV[0],pointV[1],centerX,centerY,Math.PI/2);
			
			//显示中点
            var centerPoint = new ol.geom.Point([centerX,centerY]);
            var centerFeature = new ol.Feature({
                geometry: centerPoint
            });
            //设置点的样式
            centerFeature.setStyle(createLabelStyle(centerFeature));
            //将当前要素添加到矢量数据源中
            layer.getSource().addFeature(centerFeature);
            
			//显示新点
            var tempPoint = new ol.geom.Point(pointV);
            var newFeature = new ol.Feature({
                geometry: tempPoint
            });
            //设置点的样式
            newFeature.setStyle(createLabelStyle(newFeature));
            //将当前要素添加到矢量数据源中
            layer.getSource().addFeature(newFeature);
			
			//显示旋转后的新点
            var tempPoint0 = new ol.geom.Point(pointR);
            var tempFeature0 = new ol.Feature({
                geometry: tempPoint0
            });
            //设置点的样式
            tempFeature0.setStyle(createLabelStyle(tempFeature0));
            //将当前要素添加到矢量数据源中
            layer.getSource().addFeature(tempFeature0);
            
        }
 
        //在两点之间增加一个指定距离点,只能用于平面坐标系统坐标，不能用经纬度坐标
        //坐标点1为x1,y1  坐标点2为x2,y2
        //leng 为要求的点离坐标点1的长度
        function addPoint(x1,y1,x2,y2,leng) {
             var x3 = 0, y3 = 0;
            if (x1===x2){
              x3 = x1;
            }
            else
            {
              x3 = x1 - ((leng*(x1-x2))/Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
            }
            if (y1===y2){
              y3 = y1;
            }
            else
            {
              y3 = y1 - ((leng*(y1-y2))/Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
            }
            return [x3,y3];
        }
 
        //在平面中，一个点绕任意点旋转θ度后的点的坐标
        //旋转中心点为rx0,ry0
        //旋转点为x,y
		//旋转角度a
        //leng 为旋转半径
        function rotatePoint(x,y,rx0,ry0,a) {
			//中间点
            var x0= (x - rx0)*Math.cos(a) - (y - ry0)*Math.sin(a) + rx0 ;
            var y0= (x - rx0)*Math.sin(a) + (y - ry0)*Math.cos(a) + ry0 ;
            return [x0,y0];
        }
		
		//获得坐标连线，与y轴正半轴之间的夹角
		function getAngle(px,py,mx,my){
			var x = Math.abs(px-mx);
			var y = Math.abs(py-my);
			var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
			var cos = y/z;
			var radina = Math.acos(cos);//用反三角函数求弧度
			var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

			if(mx>px&&my>py){//鼠标在第四象限
				angle = 180 - angle;
			}

			if(mx==px&&my>py){//鼠标在y轴负方向上
				angle = 180;
			}

			if(mx>px&&my==py){//鼠标在x轴正方向上
				angle = 90;
			}

			if(mx<px&&my>py){//鼠标在第三象限
				angle = 180+angle;
			}

			if(mx<px&&my==py){//鼠标在x轴负方向
				angle = 270;
			}

			if(mx<px&&my<py){//鼠标在第二象限
				angle = 360 - angle;
			}
			return angle;
		}
 
    </script>
</body>
 
</html>

cwr888
关注
专栏目录
Geogebra中级篇021—Geogebra的垂线工具(Perpendicular Line Tool)(附案例)
FifthDesign的博客
11-04 138
基础篇的文章因为比较简单，所以一篇文章就放置了很多内容。中级篇的内容因为难度稍大，所以我们专精于某一个点铺开进行讲解。比如Geogebra的垂线工具，垂线工具目前在平面场景和3D场景都有存在，本篇我们主要讲解一下垂线工具的使用，及附带一个小案例，希望你能快速掌握。
JS画几何图形之六【过直线外一点作垂线】
weixin_30707875的博客
01-13 405
样例：http://www.zhaojz.com.cn/demo/draw10.html 依赖：【点】、【直线】 //过直线外一点画垂线 function drawVerticalLine(point, line){ //画辅助线-start var color = 'DarkRed'; //垂线的颜色 var color2 = "#ccc"; //其它...
js 计算在AB两点连线上，距离A点一定距离的点的坐标
最新发布
XKFC1的博客
01-14 496
js 计算在AB两点连线上，距离A点一定距离的点的坐标
已知俩点求俩点之间的直线，俩点间的中垂线，俩条直线的交点
dz4543的博客
06-20 8167
参考博客 https://www.cnblogs.com/DHUtoBUAA/p/8057056.html 用的时候才发现这些基础知识还真忘了不少。 俩点之间的直线 直线的一般表达式是：Ax+By+C=0。如果一直俩点（x1,y2）、(x2,y2).那么对于过着俩点的一般式是这样： A=y2-y1 B=x1-x2 C=X2×Y1-X1×Y2 所以用Python代码来表示是...
js计算点到已知两点的直线距离(面积法/海伦公式)
wzp20092009的博客
05-10 1265
问题 已知两点(x1, y1) 和 (x2, y2)，求某点(x, y) 到两点确定的直线的距离 代码 通过海伦公式+三角形面积公式求高，即点到已知两点距离 function getPointToLineDistance2(list, point){ let [[x1, y1], [x2, y2]] = list; let [x, y] = point; let b = Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
求点到直线的垂足
chunpingwan9738的博客
04-20 601
/// <summary> /// 计算点到直线的垂足 /// </summary> /// <param name="lineP1">直线起点</param> /// <param name="li...
Leaflet+Turf实现计算点到线最短距离功能
实际操作中，可以通过计算点与线段的垂线，找到垂足，从而得到最短距离。 在Turf.js中，有专门的函数可以实现这一点，例如`turf.pointOnLine()`方法可以找到一个点到线上的最近点。`turf.distance()`方法可以计算...
canvas 中如何实现物体的点选（五）
发果叁
07-29 1743
上个章节中我们已经给物体加上了被选中的效果，现在可以上点交互了，这个章节主要实现的就是物体的hover和click事件，当鼠标hover到物体上时，我们会改变鼠标的样式使其变成移动的样子；当hover到控制点时则会变成对应的操作样式；当click物体时，会将物体变成激活态，也就是展示边框和控制点。话不多说，直接开撸🚗💨💨💨。...
JS中线段和圆的数学计算原理
# 1. 简介 在JavaScript中编写涉及几何形状的应用程序时，如线段和圆，数学计算原理尤为重要。本章将简要介绍JS在几何计算中的应用，...线段是由两个端点确定的有限直线段，在数学上通常用两个坐标点表示。假设线段的
js几何坐标计算（点到线，面。点是否在线、面）
10-17
其次，**点到线的距离**计算涉及到直线的参数方程和点到直线的垂线距离。如果直线由两点A(x1, y1)和B(x2, y2)定义，点P(x, y)到这条直线的距离可以通过点到直线的一般公式计算，该公式涉及到向量叉乘的模长。 再者...
Cesium中计算点到另一个点或直线垂足点连线上指定距离的坐标点
ztnhnr的专栏
08-07 2999
接上篇文章“Cesium中点至直线的垂足点和距离计算”，在计算出点到直线的垂足后，就可以将定位坐标点确定到直线。但有一个问题是，由于路线是有一定宽度的，一部分点是落在路线中线上，其他的点是在中线和路线外边线中间的，所以不能简单的把所有的点都计算到路线中线上。 同样为了效果真实，最终的想法先计算一个固定的偏移距离，然后分别计算出其他原始坐标点到路线直线的垂足，再根据偏移距离，计算原始坐标点向垂足点偏移此距离后的坐标点。 通过上篇文章我们可以计算出参考点到直线的垂足点以及参考点到垂足点的...
html坐标计算,JS代码如何实现通过两点坐标计算直线距离呢？
weixin_33138295的博客
06-20 449
html xmlns=http://www。w3。org/1999/xhtml headtitle标题页-学无忧(www。xue51。com)/titlescript LANGUAGE=JavaScriptfunction distanceCAL(form) { var x1 = eval(form。x1。value); //获取第一点的X坐标 var y1 = eval(form。y1。valu...
根据两点求出垂线过第三点的直线的交点
tb2943043_2010的博客
06-02 385
根据两点求出垂线过第三点的直线的交点 已知条件： 1. 直线上的两点pt1，pt2坐标 2. 直线外的一点pt3 求直线的垂线经过pt3，与该直线的交点坐标
c++已知2点求中垂线_初中数学费马点模型(2)，费马点最值问题例题及视频讲解...
weixin_39916681的博客
12-11 576
初中数学动点问题中的费马点几何模型，前几天分享过一个典型例题，今天再分享一个，希望能帮助学生理解。上一个费马点例题点击这里：初中数学费马点模型，原来这么简单!今天我们来看下面这道例题：已知正方形ABCD内一动点E到A、B、C三点的距离之和的最小值为√2+√6，求正方形的边长。(视频讲解在文末)分析：前面已经讲过，遇到求几条线段和的问题，我们一般采用转化思想，将几条线段转化成我们熟知的最值...
百度鹰眼addPoint()的使用
胖火柴的随笔
06-16 2173
之前项目中加了定位功能  后来要求做轨迹记录 用自己的服务器记录坐标点太麻烦了 还有压力 就用了百度的鹰眼服务 遇到几个小问题 先说鹰眼的服务端 LBSTraceClient 因为之前有百度定位导航的sdk包 所以这个sdk要选择一下 我下的是鹰眼的最新sdk BaiduTraceSDK_v3_0_3.jar bos-android-sdk-1.0.2.jar li
js求两圆交点_求过圆心直线与圆的两个交点
weixin_39866265的博客
12-20 732
package org.bruce.vertices.controller.geometry;/*** @author BruceYang*/public classCGGeometryLib {/*** @param p0 第一个点的坐标* @param p1 第二个点的坐标* @return 两个点之间的距离* 计算出两点之间的距离*/public static doub...
Canvas:arcTo和arc方法使用介绍
青峰峦
05-11 3819
Html5中绘图API中有这么一个方法：
JavaScript中点到一个直线的最短距离
poppin000的博客
10-26 3509
JavaScript中点到一个直线的最短距离（面积算法）（2D） 这两天遇见个问题，平面上计算点到直线的距离，原来数学白学了。不过还是搞出来了。记录一下伤员吗 /** * 点到线的最短距离实际上就是点到线的垂直距离。 * (x,y)为点的坐标 * (x1,y1)为线段上点的坐标 * (x2,y2)为线段另外一点的坐标 * 将点连接上两个线段的 */ Util.distanceOfPoi...
使用C++或者js求空间点到直线垂足坐标的解算方法
现在学习也不晚
06-12 2123
假设空间某点O的坐标为（Xo，Yo，Zo）,空间某条直线上两点A和B的坐标为：(X1,Y1,Z1),(X2，Y2，Z2),设点O在直线AB上的垂足为点N，坐标为(Xn，Yn，Zn)。点N坐标解算过程如下： 首先求出下列向量： 由向量垂直关系，两个向量如果垂直，那么两个向量的点积（点乘，向量积）则为0，可得出。 上式记为（1）式。 点N在直线AB上，根据向量共线定理： (2) 由（2）得： ...
GoogleMap获取地图中心点位置信息
Avery_2的博客
06-11 2441
最近开发一款海外项目，用到地图的功能，肯定选择的是谷歌地图。 功能有获取用户当前定位并标记，标记用户周围的骑手位置；谷歌地图搜索地址；地图上标记两个点并画出两点的直线距离或者路线距离。这个一堆的功能对我来说已经够吐血的了，最近又一个功能困扰我好久，我给谷歌提交的工单，给我的回复都不能解决实质性问题，网上关于这个都是百度地图和高德地图的方案，那就照葫芦画瓢了(参考https://blog.csdn.net/yu19931202/article/details/72765414) 要实现的功能就是 ：挪动.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值