arcgis api for js共享干货系列之一自写算法实现地图量算工具
众所周知,使用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共享干货系列之一自写算法实现地图量算工具相关推荐
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
- arcgis api for js入门开发系列十八风向流动图
本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...
- arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
- arcgis api for js入门开发系列十二地图打印(GP服务)
上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...
- arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
- ArcGIS API for JS 4.x + Vue 【1】—— 显示地图和添加点线面
系列文章目录 [1] ArcGIS API for JS 4.x + Vue 之 显示地图和添加点线面 文章目录 系列文章目录 前言 一.显示地图 安装依赖 1. 添加模块 2. 引入CSS样式 3. ...
- arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
- Arcgis API For js 的离线部署
之前,因为所做的项目不大,一直用的都是在线的Arcgis API For js,后来意识到了搞开发,离线部署是必须要掌握的,在线资源属于不可控范畴,能够避免的尽量避免.所以有了这次记录,以防以后忘记. ...
最新文章
- 我为什么弃用GAN?
- Javascript学习------内部对象 String Date event(重要)
- Origin绘制大小和颜色可变的3D散点图
- idea中git分支的使用
- SDK目录结构和adb工具及命令介绍
- 分类器是如何做检测的?——CascadeClassifier中的detectMultiScale函数解读
- 产品经理的小白面试~
- 不可不知的设计师接活报价公式
- 机器指令程序编写方法
- matlab图上输入希腊字母,Matlab中给图形添加【希腊字母】
- es拼音分词 大帅哥_elasticsearch实现中文分词和拼音分词混合查询+CompletionSuggestion...
- docker制作镜像的两种方法
- html怎么修改td 的宽度,html td怎么设置宽度
- linux多重引导工具,不同操作环境下,如何制作多重引导USB?
- 总结!一个产品新手的踩坑记
- 每个程序员都应该阅读的最有影响力的书是什么?
- 刀剑封魔录多功能修改器 v1.2使用教程
- PyQt5教程(一)——Python的安装
- 免费对接快递数据物流信息接口【快递鸟单号查询API】
- html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析