基于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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
jQuery的学习步骤
Feb 23 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
详解javascript数组去重问题
Nov 06 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
详解JavaScript 的执行机制
Sep 18 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
php循环输出数据库内容的代码
2008/05/24 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python用threading实现多线程详解
2017/02/03 Python
python实现kNN算法
2017/12/20 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
公司职员入党自传书
2015/06/26 职场文书
电力培训学习心得体会
2016/01/11 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
关于JavaScript回调函数的深入理解
2021/06/27 Javascript