javascript实现取线段中垂线上指定距离的点
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="ol.css" type="text/css"><script src="/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>
