Openlayers实现面积测量的方法

 更新时间:2024年11月07日 11:37:41   作者:Jinuss  
在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧

概述

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

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

实践

效果

代码分析

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

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

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);

containsCoordinate
判断一个点是否在球面上某几何形状内。

Sphere.containsCoordinate(geometry, point);

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

Sphere.getBearing([lon1, lat1], [lon2, lat2]);

getIntersection
计算两条大圆弧(球面上的两条最短路径)之间的交点。如果相交,则返回交点,否则返回null

Sphere.getIntersection(
  [lon1, lat1],
  [lon2, lat2],
  [lon3, lat3],
  [lon4, lat4]
);

isFlat
判断一个几何对象是否为平面(即判断其是否位于球面的某个平面上)。如果几何对象包含任何曲率,isFlat 返回 false;如果对象的坐标位于平面上,返回 true。

Sphere.isFlat(geometry);

isValid
判断一个几何对象是否有效。这对于确保几何对象在球面坐标系中是有效的非常有用。

Sphere.isValid(geometry);

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

Sphere.getEnvelope(geometry);

到此这篇关于Openlayers实现面积测量的文章就介绍到这了,更多相关Openlayers面积测量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 教你用Uniapp实现微信小程序的GPS定位打卡

    教你用Uniapp实现微信小程序的GPS定位打卡

    地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者,下面这篇文章主要给大家介绍了关于如何使用Uniapp实现微信小程序的GPS定位打卡的相关资料,需要的朋友可以参考下
    2022-11-11
  • JS中‘hello’与new String(‘hello’)引出的问题详解

    JS中‘hello’与new String(‘hello’)引出的问题详解

    这篇文章主要给大家介绍了关于JS中'hello'与new String('hello')引出的问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-08-08
  • js 实现浏览历史记录示例

    js 实现浏览历史记录示例

    这篇文章主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
    2014-04-04
  • 使用原生javascript开发计算器实例代码

    使用原生javascript开发计算器实例代码

    这篇文章主要给大家介绍了关于如何使用原生javascript开发计算器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    这篇文章主要介绍了点击button获取text内容并改变样式的js实现,经测试非常实用,需要的朋友可以参考下
    2014-09-09
  • js动态切换图片的方法

    js动态切换图片的方法

    这篇文章主要介绍了js动态切换图片的方法,包含完整的css文件与js文件实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript实现简单进度条效果

    JavaScript实现简单进度条效果

    这篇文章主要为大家详细介绍了JavaScript实现简单进度条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Bootstrap基本样式学习笔记之标签(5)

    Bootstrap基本样式学习笔记之标签(5)

    这篇文章主要介绍了Bootstrap学习笔记之标签基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • uniapp时间格式化处理实现

    uniapp时间格式化处理实现

    本文主要介绍了uniapp时间格式化处理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论