基于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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
js charAt的使用示例
Feb 18 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JS backgroundImage控制
2009/05/19 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python进行两个表格对比的方法
2018/06/27 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python判断有效的数独算法示例
2019/02/23 Python
python3的pip路径在哪
2020/06/23 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
校园活动宣传方案
2014/03/28 职场文书
请假条的格式
2014/04/11 职场文书
齐云山导游词
2015/02/06 职场文书
学前教育见习总结
2015/06/23 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
python保存图片的四个常用方法
2022/02/28 Python