Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • React

  • Vue

  • JavaScript文章

  • 学习笔记

  • openlayers

    • Openlayers用图片填充面
    • Openlayers用图片填充线
    • openlayers处理大量Overlay渲染问题
    • openlayers的比例尺
    • openlayers水印
    • openlayer实现矢量图层点击高亮效果
    • openlayers实现自定义路径
    • Openlayers加载渲染矢量切片
    • openlayers实现角度测量
    • openlayers实现长度测量
    • openlayers实现面积测量
      • 概述
      • 实践
        • 效果
        • 代码分析
        • ol/sphere的getArea方法
      • ol/sphere实用 API 介绍
    • Openlayers实现方位角测量
    • Openlayers中的动画
    • Openlayers的多边形高级交互
    • Openlayers地图底图换色
    • Openlayers种的默认交互事件
    • Openlayers默认键盘交互实现
    • 源码分析之Openlayers中默认键盘事件触发机制
    • 源码分析之Openlayers中的Collection类
  • threejs

  • MapboxGL

  • 工具

  • 源码合集

  • 前端
  • openlayers
东流
2024-11-06
目录

openlayers实现面积测量

# 概述

在 Openlayers 中面积的量测和长度的测量大同小异,都需要借助于ol/sphere模块,不同的是长度计算是调用ol/sphere模块的getLength方法,而面积则需要调用getArea方法。

如果还不清楚如何在 Openlayers 中计算长度,可以参考Openlayers实现长度测量 (opens new window)

# 实践

# 效果

# 代码分析

同长度测量一样,监听draw类的实例对象的drawstart方法,然后监听当前绘制的几何对象的change事件,在这个监听回调函数中调用ol/sphere的getArea方法获取经纬度

this.draw.on("drawstart", ({ feature }) => {
  this.listener = feature.getGeometry().on("change", (evt) => {
    const geom = evt.target;
    const area = getArea(geom);
  });
});
1
2
3
4
5
6

# ol/sphere的getArea方法

getArea方法用于计算地球表面上几何形状的面积,并且考虑了球体的曲率,这意味着它并不是计算平面上的面积,而是计算球面上闭合路径所围成的面积。

参数 geometry (ol/geom/Polygon | ol/geom/MultiPolygon):

  • geometry 是一个几何对象,通常是 Polygon(多边形)或者 MultiPolygon(多个多边形的集合)。
  • 对于 Polygon,它表示一个闭合的区域,getArea 计算的是该区域的球面面积。
  • 对于 MultiPolygon,计算的是多个多边形的总球面面积。

返回值 getArea方法返回的是一个数值,其单位是平方米。

# ol/sphere实用 API 介绍

除了已经提到的getLength、getArea和getDistance方法外,ol/sphere模块还提供了许多其它实用的 API 方法。如下介绍:

  • getClosestPoint 计算一点到球面上某几何形状的最近点。

    Sphere.getClosestPoint(geometry, point);
    
    1
  • containsCoordinate 判断一个点是否在球面上某几何形状内。

    Sphere.containsCoordinate(geometry, point);
    
    1
  • getBearing 计算从一个点到另一个点的方位角(即从第一个点到第二个点的航向角)。方位角是指沿着大圆航线,连接这两个点的方向。

    Sphere.getBearing([lon1, lat1], [lon2, lat2]);
    
    1
  • getIntersection 计算两条大圆弧(球面上的两条最短路径)之间的交点。如果相交,则返回交点,否则返回null

    Sphere.getIntersection(
      [lon1, lat1],
      [lon2, lat2],
      [lon3, lat3],
      [lon4, lat4]
    );
    
    1
    2
    3
    4
    5
    6
  • isFlat 判断一个几何对象是否为平面(即判断其是否位于球面的某个平面上)。如果几何对象包含任何曲率,isFlat 返回 false;如果对象的坐标位于平面上,返回 true。

    Sphere.isFlat(geometry);
    
    1
  • isValid 判断一个几何对象是否有效。这对于确保几何对象在球面坐标系中是有效的非常有用。

    Sphere.isValid(geometry);
    
    1
  • getEnvelope 获取几何对象的包围盒(Bounding Box),即可以包围该几何对象的最小矩形框。对于球面几何,返回的是一个近似的矩形包围盒。返回几何对象的包围盒,表示为最小的经纬度矩形。

    Sphere.getEnvelope(geometry);
    
    1
编辑 (opens new window)
上次更新: 2024/11/12, 10:01:20
openlayers实现长度测量
Openlayers实现方位角测量

← openlayers实现长度测量 Openlayers实现方位角测量→

最近更新
01
GeoJSON
05-08
02
Circle
04-15
03
CircleMarker
04-15
更多文章>
Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式