基于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操纵窗口的方法小结
Jun 28 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue实现放大镜效果
Sep 17 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自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python单元测试实例详解
2018/05/25 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
先进事迹材料范文
2014/12/29 职场文书
感谢信怎么写
2015/01/21 职场文书
母亲节寄语大全
2015/02/27 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang