基于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中的this关键字介绍与使用实例
Jun 21 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP实现的简单缓存类
2015/07/29 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
python中import reload __import__的区别详解
2017/10/16 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
出纳岗位职责范本
2015/03/31 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
党组织结对共建协议书
2016/03/23 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers