众所周知,使用arcgis api for js实现地图的量算工具功能,无非是调用arcgisserver的Geometry服务(http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer)提供的Areas and Lengths以及Lengths,如图:

但是我这里提供另一种实现的思路,就是自己写算法来实现距离以及面积的量算,这样的好处是不依赖arcgisserver几何服务,有些项目不排除有些奇特的客户不用Geometry服务的,最终的实现效果图如下:

具体实现思路:创建一个独立的js文件,里面有量算工具类DCIMeature,DCIMeature类构造函数传入地图对象map

construct: function (map) {  this._dciMap = map;  this._onClickHandler = dojo.hitch(this, this._onClickHandler);  this._onMouseMoveHandler = dojo.hitch(this, this._onMouseMoveHandler);  this._onDrawEndHandler = dojo.hitch(this, this._onDrawEndHandler);  this._onExtentChangeHandler = dojo.hitch(this, this._onExtentChangeHandler);  this._onGraphicClearHandler = dojo.hitch(this, this._onGraphicClearHandler);  this._graphicsLayer = new esri.layers.GraphicsLayer({ id: "DciMeatureGLyr" });
}  

核心算法测距:

DUtil.getDistanceInEarth = function (point1, point2) {
var d = new Number(0);
//1度等于0.0174532925199432957692222222222弧度
//var radPerDegree=0.0174532925199432957692222222222;
var radPerDegree = Math.PI / 180.0;
if (DCI.Measure.map.spatialReference.wkid == "4326") {
var latLength1 = Math.abs(this.translateLonLatToDistance({ x: point1.x, y: point2.y }).x - this.translateLonLatToDistance({ x: point2.x, y: point2.y }).x);
var latLength2 = Math.abs(this.translateLonLatToDistance({ x: point1.x, y: point1.y }).x - this.translateLonLatToDistance({ x: point2.x, y: point1.y }).x);
var lonLength = Math.abs(this.translateLonLatToDistance({ x: point1.x, y: point2.y }).y - this.translateLonLatToDistance({ x: point1.x, y: point1.y }).y);  d = Math.sqrt(Math.pow(lonLength, 2) - Math.pow(Math.abs(latLength1 - latLength2) / 2, 2) + Math.pow(Math.abs(latLength1 - latLength2) / 2 + Math.min(latLength1, latLength2), 2));  }
else {
var len_prj = Math.pow((point2.x - point1.x), 2) + Math.pow((point2.y - point1.y), 2);  d = Math.sqrt(len_prj);  }  d = Math.ceil(d);
return d;
};
DUtil.translateLonLatToDistance = function (point) {
var d = new Number(0);
//1度等于0.0174532925199432957692222222222弧度
//var radPerDegree=0.0174532925199432957692222222222;
var radPerDegree = Math.PI / 180.0;
var equatorialCircumference = Math.PI * 2 * 6378137;
return {  x: Math.cos(point.y * radPerDegree) * equatorialCircumference * Math.abs(point.x / 360),  y: equatorialCircumference * Math.abs(point.y / 360)  };
};   

这里测距的算法有基于地理坐标系以及投影坐标系不同,有不同的计算公式来计算的;

测面的核心算法:

//******求三角形面积****
DUtil.getTriangleArea = function (point1, point2, point3) {  var area = 0;  if (!point1 || !point2 || !point3) {  return 0;  }  if (DCI.Measure.map.spatialReference.wkid == "4326") {  point1 = this.translateLonLatToDistance(point1);  point2 = this.translateLonLatToDistance(point2);  point3 = this.translateLonLatToDistance(point3);  }  area = ((point1.x * point2.y - point2.x * point1.y) + (point2.x * point3.y - point3.x * point2.y) + (point3.x * point1.y - point1.x * point3.y)) / 2;  return area;
};  

测面算法也是类似,基于地理坐标系以及投影坐标系不同,有不同的计算公式来计算的;

arcgis api for js共享干货系列之一自写算法实现地图量算工具相关推荐

  1. arcgis api for js共享干货系列之二自定义Navigation控件样式风格

    arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...

  2. arcgis api for js入门开发系列三地图工具栏(含源代码)

    上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...

  3. arcgis api for js入门开发系列十八风向流动图

    本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...

  4. arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

    本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...

  5. arcgis api for js入门开发系列十二地图打印(GP服务)

    上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...

  6. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  7. ArcGIS API for JS 4.x + Vue 【1】—— 显示地图和添加点线面

    系列文章目录 [1] ArcGIS API for JS 4.x + Vue 之 显示地图和添加点线面 文章目录 系列文章目录 前言 一.显示地图 安装依赖 1. 添加模块 2. 引入CSS样式 3. ...

  8. arcgis api for js之echarts开源js库实现地图统计图分析

    前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...

  9. Arcgis API For js 的离线部署

    之前,因为所做的项目不大,一直用的都是在线的Arcgis API For js,后来意识到了搞开发,离线部署是必须要掌握的,在线资源属于不可控范畴,能够避免的尽量避免.所以有了这次记录,以防以后忘记. ...

最新文章

  1. 我为什么弃用GAN?
  2. Javascript学习------内部对象 String Date event(重要)
  3. Origin绘制大小和颜色可变的3D散点图
  4. idea中git分支的使用
  5. SDK目录结构和adb工具及命令介绍
  6. 分类器是如何做检测的?——CascadeClassifier中的detectMultiScale函数解读
  7. 产品经理的小白面试~
  8. 不可不知的设计师接活报价公式
  9. 机器指令程序编写方法
  10. matlab图上输入希腊字母,Matlab中给图形添加【希腊字母】
  11. es拼音分词 大帅哥_elasticsearch实现中文分词和拼音分词混合查询+CompletionSuggestion...
  12. docker制作镜像的两种方法
  13. html怎么修改td 的宽度,html td怎么设置宽度
  14. linux多重引导工具,不同操作环境下,如何制作多重引导USB?
  15. 总结!一个产品新手的踩坑记
  16. 每个程序员都应该阅读的最有影响力的书是什么?
  17. 刀剑封魔录多功能修改器 v1.2使用教程
  18. PyQt5教程(一)——Python的安装
  19. 免费对接快递数据物流信息接口【快递鸟单号查询API】
  20. html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析

热门文章

  1. 记一次数据库宕机处理
  2. raspbian wifi设置
  3. Dell服务器RAID常用管理命令总结 linux
  4. 解决append的div的事件失效问题
  5. max7219c语言,(转)MAX7219 C语言版驱动程序
  6. Nginx的SSL相关指令
  7. Spring构造注入
  8. EventLoopGroup 与Reactor 关联
  9. MyBatis 插件怎么编写和使用?原理是什么?
  10. 仓库的种类和彼此关系