基于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实现检测指定目录是否存在的方法
Jan 12 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
利用js实现简单开关灯代码
Nov 23 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
各种战术和打法的原创者
2020/03/04 星际争霸
php discuz 主题表和回帖表的设计
2009/03/13 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
小程序实现投票进度条
2019/11/20 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python中的pprint折腾记
2015/01/21 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Why we need EJB
2016/10/20 面试题
检察官就职演讲稿
2014/01/13 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
秋季运动会稿件
2014/01/30 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
书法大赛策划方案
2014/06/04 职场文书
防火标语大全
2014/10/06 职场文书
初中信息技术教学反思
2016/02/16 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书