基于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的时候写的学习笔记
Dec 30 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
微信小程序实现左右列表联动
May 19 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
一个好用的分页函数
2006/11/16 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
青年文明号事迹材料
2014/01/18 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年导购员工作总结
2014/11/18 职场文书
工作推荐信模板
2015/03/25 职场文书
人生遥控器观后感
2015/06/11 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Pyhton模块和包相关知识总结
2021/05/12 Python
Go 语言结构实例分析
2021/07/04 Golang