基于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 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
javascript实现随机抽奖功能
Dec 30 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
React中的refs的使用教程
2018/02/13 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Python多图片合并PDF的方法
2019/01/03 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
中科创达面试题
2016/12/28 面试题
中科方德软件测试面试题
2016/04/21 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
打架检讨书100字
2014/01/08 职场文书
市三好学生主要事迹
2014/01/28 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
房产证明范本
2015/06/19 职场文书
外科护士长工作总结
2015/08/12 职场文书
教师岗位说明书
2015/09/30 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
HDFS免重启挂载新磁盘
2022/04/06 Servers