基于openlayers实现角度测量功能

基于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;//返回
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Openlayers实现距离面积测量

    本文实例为大家分享了Openlayers实现距离面积测量的具体代码,供大家参考,具体内容如下 CSS .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } .ol-tooltip-measure { opaci

  • OpenLayers3实现测量功能

    本文实例为大家分享了OpenLayers3实现测量功能的具体代码,供大家参考,具体内容如下 1. 前言 测量功能实现面积的测量以及长度的测量.通过鼠标绘制区域以及长度来进行测量.OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现. 2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库.jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层. (2)在地图容器中,创建一

  • Openlayers实现测量功能

    本文实例为大家分享了Openlayers实现测量的具体代码,供大家参考,具体内容如下 由于公司项目需要使用到openlayers,就开始学习了openlayers,其中有一个需求需要用到测量功能,就参考<WebGisOpenlayers全面解析>写了一个小demo,话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&qu

  • Openlayers测量距离与面积的实现方法

    本文实例为大家分享了Openlayers测量距离与面积的具体代码,供大家参考,具体内容如下 1.地图测量功能 一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积:面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,下面我们就在Openlayers3中来实现这一功能: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/

  • 基于openlayers实现角度测量功能

    基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下: var formatAngle = function (line) { var coordinates = line.getCoordinates(); var angle=0; var sourceProj = map.getView().getProjection(); for (var i =0, ii = coordinates.lengt

  • jQuery基于cookie实现换肤功能实例

    本文实例讲述了jQuery基于cookie实现换肤功能.分享给大家供大家参考,具体如下: 换肤,在你使用QQ.浏览器.酷狗等软件时,总是能看到这两个字(也有叫皮肤).不过换肤的确能解决很多人的口味,换肤看似一个无关紧要的功能,但其实能起到吸引用户的作用.好啦,话不多说,开始上课. 附上本人的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • Java读取文件及基于正则表达式的获取电话号码功能详解

    Java读取文件及基于正则表达式的获取电话号码功能详解

    本文实例讲述了Java读取文件及基于正则表达式的获取电话号码功能.分享给大家供大家参考,具体如下: 1.正则表达式 正则表达式,又称 正规表示法 . 常规表示法 (英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 用到的一些特殊构造正则表达式的意义解析: ? 当该字符 紧跟在任何一个其他限

  • Python+Socket实现基于UDP协议的局域网广播功能示例

    Python+Socket实现基于UDP协议的局域网广播功能示例

    本文实例讲述了Python+Socket实现基于UDP协议的局域网广播功能.分享给大家供大家参考,具体如下: 服务器端: # udp_gb_server.py '''服务端(UDP协议局域网广播)''' import socket s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) s.setsockopt(socket.SOL_SOCKET, socket.SO_BROADCAST, 1) PORT = 1060 network = '<b

  • asp.net基于Calendar实现blog日历功能示例

    本文实例讲述了asp.net基于Calendar实现blog日历功能.分享给大家供大家参考,具体如下: 怎样用.net的Calendar控件来实现blog中站点日历的效果呢,我们知道站点日历最重要的功能就是,显现在哪天blog主人写了日志,点击日期,你将进入所选日期的日志列表, 首先,我们知道.net中的服务器控件是会进行Postback的,Calendar控件中的第一天在点击时,就会进行一次postback我们要做的就是改变它默认的链接,使它不触发postback事件,其次,就是要知道哪一天有

  • php基于SQLite实现的分页功能示例

    本文实例讲述了php基于SQLite实现的分页功能.分享给大家供大家参考,具体如下: 这里操作数据库文件使用的是前面文章<PHP基于PDO实现的SQLite操作类[包含增删改查及事务等操作]>中的SQLite数据库操作类.废话不说,直接上代码: <meta charset='utf-8'> <?php class SqlitePage{ public function __construct() { $this->table_name=''; $this->tj=

  • 基于ThinkPHP实现的日历功能实例详解

    基于ThinkPHP实现的日历功能实例详解

    本文实例讲述了基于ThinkPHP实现的日历功能.分享给大家供大家参考,具体如下: 开发环境介绍 最新,闲来没事,便开发了一款简单的日历,来统计工作情况.为了开发便捷,使用ThinkPHP架构.界面如下图 备注:每页包含上一个月,当前月,下一个月的日期,并用不同的颜色区分,如果某天工作了,便圈出来. 主要是以下两个文件 重要文件描述 功能文件 CalenDar.class.php主要负责,获取日历详细信息的,不涉及用户数据操作. 代码如下: <?php namespace Util; class

  • 基于PHP实现用户注册登录功能

    基于PHP实现用户注册登录功能

    本文介绍的是基于PHP实现用户注册登录功能,本项目分为四部分内容:1前端页面制作,2验证码制作,3实现注册登陆,4功能完善.具体情况可以往下看. 验证码制作 一.实验简介 本次实验将会带领大家使用面向对象的思想封装一个验证码类.并在注册和登陆界面展示使用.通过本次实验的学习,你将会领悟到 PHP 的 OOP 思想,以及 GD 库的使用,验证码生成. 1.1 涉及到的知识点 PHP GD库 OOP编程 1.2 开发工具 sublime,一个方便快速的文本编辑器.点击桌面左下角: 应用程序菜单/开发

随机推荐