基于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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
angular实现商品筛选功能
Feb 01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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
咖啡的传说和历史
2021/03/03 新手入门
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php基础学习之变量的使用
2011/06/09 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
医务工作者先进事迹材料
2014/01/26 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
编写python程序的90条建议
2021/04/14 Python
Python安装使用Scrapy框架
2022/04/12 Python
优化Mysql查询的示例
2022/04/26 MySQL