基于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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
Node.js返回JSONP详解
May 18 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Node绑定全局TraceID的实现方法
Nov 14 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
趣味活动策划方案
2014/02/08 职场文书
保护动物倡议书
2014/04/15 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
物业接待员岗位职责
2015/04/15 职场文书
主题班会开场白
2015/06/01 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers