基于openlayers实现角度测量功能


Posted in Javascript onSeptember 28, 2020

基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下:

var formatAngle = function (line) {
  var coordinates = line.getCoordinates();
  var angle=0;
  var sourceProj = map.getView().getProjection();
  for (var i =0, ii = coordinates.length - 1; i < ii; ++i) {
    var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
    var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
    var c3=0
    //当绘制两个及以上点的时候,将c1的值传给C3,C2的值传给C1
    if(i>=1){
      c3=ol.proj.transform(coordinates[i-1], sourceProj, 'EPSG:4326');
      var disa=wgs84Sphere.haversineDistance(c3, c1);
      var disb=wgs84Sphere.haversineDistance(c1, c2);
      var disc=wgs84Sphere.haversineDistance(c2, c3);
      //由于绘制结束的时候双击会导致c1=c2,从而disb=0,而分母不能为零,导致angle=NAN值,所以需要取双击的前一次值。
      //当有三个以上的点的时候,形成了角度,需要对角度进行测量输出。
      if(disb===0&&i>=2){
        c1 = ol.proj.transform(coordinates[i-1], sourceProj, 'EPSG:4326');
        c2 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
        c3 = ol.proj.transform(coordinates[i-2], sourceProj, 'EPSG:4326');
        disa=wgs84Sphere.haversineDistance(c3, c1);
        disb=wgs84Sphere.haversineDistance(c1, c2);
        disc=wgs84Sphere.haversineDistance(c2, c3);
      }
      var cos=(disa*disa+disb*disb-disc*disc)/(2*disa*disb);  //利用余弦定理公式计算cos值
      angle=Math.acos(cos)*180/Math.PI;  //求反余弦值,得到弧度制,并将弧度值转角度值
      angle=angle.toFixed(2)+"度";  //对计算完成的角度,保留两位小数
      //由于绘制结束的时候双击会导致c1=c2,从而disb=0,而分母不能为零,导致angle=NAN值,所以需要取双击的前一次值。
      //当只有两个点的时候,只是一条线,并不形成角度,需要提示继续绘制。
      if(disb===0&&i<2){
        angle="请继续绘制形成角度";
      }
    }
    //当只是绘制一个点的时候,提示继续绘制。
    else{
      angle="请继续绘制形成角度";
    }
  }
  var output;
  output=angle;
  return output;//返回
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 #Javascript
Openlayers实现距离面积测量
Sep 28 #Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 #Javascript
JS sort排序详细使用方法示例解析
Sep 27 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python调用C/C++的方法解析
2020/08/05 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
农民致富事迹材料
2014/01/23 职场文书
消防安全员岗位职责
2014/03/10 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
音乐会主持人开场白
2015/05/28 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang