基于openlayers实现角度测量功能

2024-12-19 08:57:48

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

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

OpenLayers3实现测量功能

本文实例为大家分享了OpenLayers3实现测量功能的具体代码,供大家参考,具体内容如下 1. 前言测量功能实现面积的测量以及长度的测量.通过鼠标绘制区域以及长度来进行测量.OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现. 2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库.jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层. (2)在地图容器中,创建一
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
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读取文件及基于正则表达式的获取电话号码功能.分享给大家供大家参考,具体如下: 1.正则表达式正则表达式,又称正规表示法 . 常规表示法 (英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 用到的一些特殊构造正则表达式的意义解析: ? 当该字符紧跟在任何一个其他限
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架构.界面如下图备注:每页包含上一个月,当前月,下一个月的日期,并用不同的颜色区分,如果某天工作了,便圈出来. 主要是以下两个文件重要文件描述功能文件 CalenDar.class.php主要负责,获取日历详细信息的,不涉及用户数据操作. 代码如下: <?php namespace Util; class
基于PHP实现用户注册登录功能

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

基于openlayers实现角度测量功能

相关推荐

随机推荐