1.比较粗糙的计算方式

计算长度

var length = lineFeature.getGeometry().getLength();
if (length > 1000) {
length = length / 1000;
unit = 'km';
} else {
unit = 'm';
}

说明:直接使用geom的getLength方法获取长度,openlayers默认的长度单位是m。所有如果长度大于1000,需要转换成km。

计算面积

var area = polygonFeature.getGeometry().getArea();
if (area > 1000000) {
area = area / 1000000;
unit = 'km²';
} else {
unit = 'm²';
}

说明:直接使用geom的getArea方法获取面积,同理如果面积大于1000000,需要转换为km(2)。

2.精准计算

    计算长度

var sphere = new ol.Sphere(6378137);
var lonLatLine = lineFeature.getGeometry().transform(mapProjection, 'EPSG:4326');
var lineCoordinates = lonLatLine.getCoordinates();
var length = 0;
for (var i = 0; i < lineCoordinates.length - 1; i += 1) {
length += sphere.haversineDistance(lineCoordinates[i], lineCoordinates[i + 1]);
}
if (length > 1000) {
length = length / 1000;
unit = 'km';
} else {
unit = 'm';
}

说明:ol.Sphere是一个地形对象,可提供计算精准长度和面积。通过实际地理形状计算,需要把坐标转换为对应坐标系的经纬度,调用geom的transform(projection1, projection2),把投影系1下的坐标转化为投影系2的坐标,例如把墨卡托投影系EPSG:3857(大地坐标)下的坐标转换为EPSG:4236投影系下的坐标(经纬度)。使用Sphere对象的haversineDistance函数计算两个坐标之间的距离。

计算面积

var lonLatPolygon = polygonFeature.getGeometry().transform(mapProjection, 'EPSG:4326');
var area = Math.abs(sphere.geodesicArea(lonLatPolygon.getCoordinates()[0]));
if (area > 1000000) {
area = area / 1000000;
unit = 'km²';
} else {
unit = 'm²';
}

说明:其他不用再多介绍了,主要说下geodesicArea函数,它用来计算多边形的面积,计算出来的面积有正负之分,如果多边形是沿顺时针方向画,面积为正;否则为负。所以需要使用Math.abs求绝对值。

Openlayers 3计算长度和面积的更多相关文章

  1. OpenLayers测量距离和面积

    <!DOCTYPE html> <html> <head> <title>测量距离和面积</title> <meta http-equ ...

  2. Topology and Geometry in OpenCascade-Adapters

    Topology and Geometry in OpenCascade-Adapters eryar@163.com 摘要Abstract:本文简要介绍了适配器模式(adapter pattern) ...

  3. three.js使用gpu选取物体并计算交点位置

    光线投射法 使用three.js自带的光线投射器(Raycaster)选取物体非常简单,代码如下所示: var raycaster = new THREE.Raycaster(); var mouse ...

  4. 聊聊GIS中的坐标系|再版

    本文约6500字,建议阅读时间15分钟. 作者:博客园/B站/知乎/csdn/小专栏 @秋意正寒 版权:转载请告知,并在转载文上附上转载声明与原文链接(https://www.cnblogs.com/ ...

  5. OpenLayers动态测量距离和面积,并可自定义测量的线样式

    全局操作变量 /** * @description 标注弹出框 */ HtmlPopup = null; /** * @description 临时图层类数据源 */ VectorSource = n ...

  6. hdu 1255 覆盖的面积(线段树 面积 交) (待整理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1255 Description 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积.   In ...

  7. hdu 1255 覆盖的面积 (线段树处理面积覆盖问题(模板))

    http://acm.hdu.edu.cn/showproblem.php?pid=1255 覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memo ...

  8. Geoserver基本使用、WMS服务发布与OpenLayers测试

    1.Geoserver与OpenLayers的下载 Geoserver:http://geoserver.org/ OpenLayers:http://openlayers.org/ 2.安装部署Ge ...

  9. OpenLayers学习笔记4——使用jQuery UI实现測量对话框

    OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉 ...

随机推荐

  1. kafka 怎么保证的exactly once

    Kafka auto.offset.reset值详解 发表于2017/7/6 11:25:22  1010人阅读 分类: Kafka 昨天在写一个java消费kafka数据的实例,明明设置auto.o ...

  2. InstallShield脚本事件

    脚本事件主要有三大类:Before Move Data(安装数据前).Move Data(安装数据过程中).After Move Data(安装数据后). OnBegin:在初始化后,被调用 OnFi ...

  3. 【转】全Javascript的Web开发架构:MEAN和Yeoman【译】

    引言 最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来.其首字母分别代表的是:(M)ongoDB——noSQL的文档数据库,使用JSON风格来存储数据 ...

  4. 【html】优酷视频去广告代码

    相信大家都有这样的感受,看个视频有个30秒的广告,让人非常的不爽.同样对于我们前端童鞋来说,为了吸引用户,把制作好的视频嵌入到网页中,结果因为视频有30秒的广告不但没有吸引到多少用户,反而可能会流失一 ...

  5. MongoDB 运行状态、性能监控,分析

    这篇文章的目的是让你知道怎么了解你正在运行的Mongdb是否健康.转载自http://tech.lezi.com/archives/290 mongostat详解 启动mongodb监控,通过下面命令 ...

  6. 使用x11vnc作为vncserver端

    1 安装x11vnc $ sudo apt-get update $ sudo apt-get install x11vnc 2 生成密码 $ x11vnc -storepasswd Enter VN ...

  7. chromedriver与chrome版本映射表(更新至v2.30)

    在 chrome://help/ 查看浏览器版本号 看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持 ...

  8. 【Python】python3实现网页爬虫下载图片

    import re import urllib.request # ------ 获取网页源代码的方法 --- def getHtml(url): page = urllib.request.urlo ...

  9. e587. Filling Basic Shapes

    There are two ways to fill basic shapes like lines and rectangles. The first is to use specific draw ...

  10. python环境搭建和开发工具的配置【转】

    因为要学习python了,第一步当然是环境搭建和开发工具的配置了,下边开始了. 我的开发环境是在window下. 一.环境搭建 先在python官网python.org下载安装文件,python2.x ...