当前位置: 首页 > 编程笔记 >

基于openlayers实现角度测量功能

章晋鹏
2023-03-14
本文向大家介绍基于openlayers实现角度测量功能,包括了基于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;//返回
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Openlayers实现测量功能,包括了Openlayers实现测量功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers实现测量的具体代码,供大家参考,具体内容如下 由于公司项目需要使用到openlayers,就开始学习了openlayers,其中有一个需求需要用到测量功能,就参考《WebGisOpenlayers全面解析》写了一个小demo,话不多

  • 本文向大家介绍Openlayers测量距离与面积的实现方法,包括了Openlayers测量距离与面积的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers测量距离与面积的具体代码,供大家参考,具体内容如下 1、地图测量功能 一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积;面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大

  • 本文向大家介绍基于Vue实现拖拽功能,包括了基于Vue实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: JS代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Openlayers实现地图的基本操作,包括了Openlayers实现地图的基本操作的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Openlayers实现地图基本操作的具体代码,供大家参考,具体内容如下 1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个Div标签和4个Button按钮,用来实现地图的放大、缩小、平移等功能; 2、代码

  • 我正在用angular 4开发一个管理面板,并尝试集成一个部分来定制样式,比如change color、bg等。我已经开发了一个部分来保存数据库中的设置,使用API将它们作为json加载到应用程序中。 现在我正在尝试使用json中的值生成一个动态css,我尝试了主组件中的以下代码,但它不起作用 我不确定应该如何在组件中加载css值并在样式标记中使用它们。我没有找到任何其他的解决办法。 另一种方法是

  • 本文向大家介绍基于JavaScript实现类似于百度学术高级检索功能,包括了基于JavaScript实现类似于百度学术高级检索功能的使用技巧和注意事项,需要的朋友参考一下 百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大: 下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用j