基于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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JavaScript 基本概念
Jan 20 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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学习之字符串比较和查找
2011/04/17 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python是什么 Python的用处
2020/05/26 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
临床医学应届生求职信
2013/11/06 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
分享提高 Python 代码的可读性的技巧
2022/03/03 Python