(十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。
1.背景
在这一章里我们将讨论基础工具栏中另外两个常用工具:距离测量工具盒面积测量工具。
距离测量工具要求实现如下功能:
a.通过鼠标点击,在地图上将每个点击点连成线段进行表示
b.每个线段处表示出此线段代表的实际距离
c.双击鼠标,停止此轮测量,表示出所有线段总长度
d.允许鼠标拖动地图
面积测量工具的需求与测量工具的需求大致相同,描述为下:
a.通过鼠标点击,在地图上将点击点连成面
b.双击鼠标,停止此轮测量,表示出面的总面积
c.允许鼠标拖动地图
2.从原理谈起
在完成上述需求时,我们首先得了解此功能涉及到的核心原理,其实就是我们在初等几何中学过的距离公式和面积公式。
这里我先给出一个模型示意图:
2.1距离换算公式
L(AB)= Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
2.2多边形面积换算公式
首先我直接给出公式:
S(total)=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));
这个公式到底是怎么推导出来的呢?我这里跟大家大致说下。
2.2.1 用坐标点表示三角形面积
我们都知道三角形中最通用的面积公式:S=1/2*a*h。
在我之前的文章(存储过程判断两线重合点)里还提到过另外一个公式,海伦公式:
S=Math.sqt((p*(p-a)*(p-b)*(p-c))),其中p=1/2*(a+b+c)。
这里我们继续推导海伦公式,我们已经知道A(x1,y1),B(x2,y2),C(x3,y3)。则:
a=Math.sqt((x2-x3)*(x2-x3)+(y2-y3)*(y2-y3)),b和c同理。
将用坐标点表示的a,b,c,p代入海伦公式,我们可以得出面积在坐标系下的另外一个等同公式:
S= Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+x3*y1-y3*x1));
2.2.2 由三角形面积推导出多边形面积
如模型中,我们在多边形内部设定一个P(x0,y0)点,通过P点连接多边形中各端点,便可将多边形分割成(n-2)个三角形。
则多边形的面积变成了:
S(total)=S(PAB)+S(PBC)+S(PCD)+…+S(PNA);
将三角形的面积坐标公式代入,最后可以算出一个抵消掉了P点坐标的通用公式:
S(total)=Math.abs(0.5*(x1*y2-y1*x2+x2*y3-y2*x3+….+xn*y1-yn*x1)));
2.2.3注意
通过推导公式,我们可以看出,该公式对环状多边形的面积无效。
3.实现过程
3.1 具体步骤
距离量测和面积量测的实现方式上大致是一样的。
a.初始化三个参数,isDone为true,flag为false,isClick为false。
b.鼠标mouseDown时,首先判断done是否为true,如果是,则清掉地图上已有的绘制。记录此时的startPoint,并且给定三个参数,isDone为false,flag为true,isClick为true。
c.鼠标mouseMove时,判断此时flag是否为true。如果是true,则触发平移功能。如果是false,首先判断isDone是否为true,如果是,先对之前所有的点进行清空重绘,再判断isClick是否为true,如果是,则随着鼠标移动实时绘制线段。
d.鼠标mouseUp时,记录此时的endpoint,可以通过startpoint和endpoint算出此时的线段长度。将flag变为false,即停止平移功能。
e.鼠标doubleClick时,将isDone参数改为true,flag改为false,isClick改为false。算出整个过程中的总距离或者总面积。
3.2 注意问题
因为此功能添加入了地图平移功能,所以在实时绘制时,如果不注意很容易出现绘制点偏移问题。
关于该偏移的引发,我在前面两章做了比较详细的解释,也提供了解决方法,大家如果不是很明白,可以回头看看。
在具体步骤中,我提到mouseMove事件中有个清空重绘过程,便是为了防止地图移动所照成的影响。同时,在每一个点的绘制时,一定要减去总偏移量。
3.3效果展示
这里分别给出距离量测和面积量测的两个效果图:
4.进一步探讨
以上,我们给出的公式,均是针对平面坐标的,即做过投影转换的坐标。假如,我们得到的坐标是经纬度坐标,此公式还能用么?
答案是不能。所以我们得自己做投影转换,将经纬度坐标转成平面坐标。这类转换公式,涉及的原理比较复杂,代码的实现也相对困难。
目前,我接触过的转换有WGS84的,BeJing54的,XiAn80的以及一些地方自己的地理坐标系,这其中还涉及到四参数和七参数方法。具体的过程,在这个系列的以后章节我再跟大家详细讨论。
不过,在精度要求不高的情况里,我们可以统一用Mecator(UTM)投影进行转换,并且使用四参数方法,将四参数固定即可。
5.总结
这一章里,我们留了一个巨大的问题,即坐标转换问题。该问题是一个很大的学问,不过我们能够一般性理解并且使用这方面的算法即可。在下一个章节里,我将跟大家一起探讨基本功能中剩下的另外两个功能,清空功能和地图定位功能。在下下章,我们将一起探讨基本功能中所涉及到的比较难的一个功能,I查询功能,该功能的合理实现和合理展现均是需要仔细推敲的。欢迎大家持续关注。
-----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
(十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍相关推荐
- [深度学习-原理]GAN(生成对抗网络)的简单介绍
系列文章目录 深度学习GAN(一)之简单介绍 深度学习GAN(二)之DCGAN基于CIFAR10数据集的例子 深度学习GAN(三)之DCGAN基于手写体Mnist数据集的例子 深度学习GAN(四)之c ...
- 2021年大数据ELK(十八):Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理 一.Beats 二.FileB ...
- 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]
为什么要取这样的一个题目呢?主要是因为今天去了一家公司和他们谈了谈,本来是指望做兼职的,谈到最后当然是不成了.去谈的是地图制作(可兼职)一职,要求是地图制图经验,最后加了个有WEBGIS开发经验.本来 ...
- Spring Validation最佳实践及其实现原理,参数校验没那么简单!
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者:六点半起床 juejin.im/post/685654110 ...
- 简单介绍numpy实现RNN原理实现
这篇文章主要介绍了numpy实现RNN原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 首先说明代码只是帮助理解,并未写出 ...
- python协程异步原理_简单介绍Python的Tornado框架中的协程异步实现原理
Tornado 4.0 已经发布了很长一段时间了, 新版本广泛的应用了协程(Future)特性. 我们目前已经将 Tornado 升级到最新版本, 而且也大量的使用协程特性. 很长时间没有更新博客, ...
- Spring Validation 最佳实践及其实现原理,参数校验没那么简单!
之前也写过一篇关于Spring Validation使用的文章,不过自我感觉还是浮于表面,本次打算彻底搞懂Spring Validation.本文会详细介绍Spring Validation各种场景下 ...
- php fpm 三个模式_php-fpm运行原理和模式的简单介绍
本篇文章给大家带来的内容是关于php-fpm运行原理和模式的简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 运行原理: cgi初始化阶段:分别调用fcgi_init()和 s ...
- 深度学习——RNN原理与TensorFlow2下的IMDB简单实践
在深度学习中,RNN是处理序列数据的有效方法之一,也是深度的一种很好的体现,本文将简单介绍RNN的工作方式,以及针对IMDB数据集的简单实践 RNN简介 RNN(Recurrent Neural Ne ...
最新文章
- 【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 调试进程 ATTACH 附着目标进程 | 读取目标函数寄存器值并存档 )
- Scala基础教程(六):字符串、数组、集合
- Jprofiler监控工具(内存泄漏)
- linux——第三方软件仓库的搭建
- 开始使用Jenkins
- Java面向对象(12)--对象类型转换 (Casting )
- leetcode 1738. 找出第 K 大的异或坐标值
- 计算机电缆 耐火,耐火计算机电缆ZR-NH-DJVVP
- Qt工作笔记-可拖动大小的QListWidget(使用QDockWidget)【QMainWindow与QWidget中的天坑】
- 车辆抵押贷款风险分析
- Maven技巧和窍门:高级Reactor选项
- 科研笔记1:科研绘图
- 如视技术副总裁杨永林:当传统产业遇到“数字空间”
- 【数学】嵌入式开发中涉及到的对数公式
- excel 删除重复行数据,列数据
- 第二章:计算思维——知识点整理
- ionic3 教程(一)安装和配置 1
- 个人免签支付,站长必备
- 算法如何学习?别想太多,两个字
- DataGrid的ItemDataBound事件
热门文章
- AttributeError: Can only use .str accessor with string values, which use np.object_ dtype in pandas
- Promise的基本使用
- 5 结构型模式之 - 适配器模式
- Java-大集合拆分为指定大小的小集合
- webpack超详细配置
- 网络经济与企业管理(第 1 章:企业管理概论)
- bootstrapValidator remote 验证问题
- (五)EasyUI使用——datagrid数据表格
- win7右键点击文件夹进入命令窗口方法
- LabVIEW设计模式系列——移位寄存器