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

原文: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;
};

  

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

 完整的量算工具js文件下载点击打开链接

时间: 2024-09-17 03:22:36

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

arcgis api for js

问题描述 在地图上添加点线面后,怎么获取graphiclayer的坐标"type":"LineString","coordinates":[[102.0,0.0],[103.0,1.0],[104.0,0.0],[105.0,1.0]]得到上面格式的数据 解决方案 解决方案二:graphic.geometry解决方案三:你要明白一个graphiclayer包括了N个graphic你添加的店是个graphic你要获取到你添加点或者线.面的坐标一个办

《JavaScript构建Web和ArcGIS Server应用实战》——2.3 使用ArcGIS API for JavaScript创建应用程序的基本步骤

2.3 使用ArcGIS API for JavaScript创建应用程序的基本步骤 使用ArcGIS API for JavaScript创建任何GIS地图应用程序,都需要遵循一些步骤.假如想让地图成为应用程序的一部分,那么就需要你按照这些步骤来执行.在阅读本书时,我很难想象你不按照这些步骤来做会遇到怎样糟糕的情况.简而言之,你需要遵循以下步骤. 1.创建页面HTML代码. 2.引用ArcGIS API for JavaScript和样式表. 3.加载模块. 4.确保DOM可用. 5.创建地图

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)

前言 Arcgis是一个地理系统的平台,可用来进行数据数据展示或二次开发.这里我们所使用的是Arcgis对于JavaScript的api,也就是web端的api进行开发.我们使用的版本是3.21,这个版本包含了完整的2D地图的api.如果想对3D地图进行开发,可以使用4.4版本的api.在这个demo中,我们要完成如下的几个功能: 基本地图展示 搜索功能 图形绘制 图形点击显示详情 图形删除 在本篇博客的结尾可以看到本例的下载链接. 先来看程序的截图: 首先是页面打开时: 接下来是使用搜索功能时

ArcGIS API for Silverlight开发入门

你用上3G手机了吗?你可能会说,我就是喜欢用nokia1100,ABCDEFG跟我 都没关系.但你不能否认3G是一种趋势,最终我们每个人都会被包裹在3G网络中.1100也不是一成不变,没准哪天为了打击犯罪,会在你的1100上强制 装上GPS.GIS工作既然建立在计算机的基础上,当然也得随着IT行业与时俱进.       看看现在计算机应用的趋势吧.云(计算),这个东西可讲不清楚,因为云嘛,飘忽不定的.不过可以这样来看它,以后计算机网络上就有一坨(或者几坨)万能的 云,有什么需求云都可以满足我们,

利用arcgis api for javascript实现在地图上点的弹出(我的信息弹出不了)

问题描述 利用arcgis api for javascript实现在地图上点的弹出(我的信息弹出不了) 2C <!DOCTYPE html> Simple Map <style> html body #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: ""Trebuchet

ArcGIS API for JavaScript开发环境搭建及第一个实例demo

原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo        ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能.              一.安装前准备        1.ArcGIS Server for JavaScript API各版本下载地址:http://support.esrichina-bj.cn/2011/0223/960.html,我们选择

ArcGIS API for JavaScript 4.0(一)

原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Skyline,速度要快很多,适合在智慧城市中小场景的三维模型应用.下面开始吧!   一.引入样式和js <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css"> <

创建ArcGIS API for JavaScript的第一个示例程序

原文:创建ArcGIS API for JavaScript的第一个示例程序     在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话,参考博客:http://blog.csdn.net/zdw_wym/article/details/48678913.          如果开发环境搭建好了的话,那么今天我们继续来搭建我们的第一个ArcGIS API for JavaScript应用程序.     下面首先将代码贴出来,

arcgis api for javascript 部署遇到问题,希望能帮忙解决

问题描述 arcgis api for javascript 部署遇到问题,希望能帮忙解决 我的C:Inetpubwwwrootarcgis_js_apilibrary3.153.15init.js"打开后是[HOSTNAME_AND_PATH_TO_JSAPI]/dojo"该如何进行修改部署,同学打开后是[HOSTNAME_AND_PATH_TO_JSAPI]/ 希望知道的帮帮忙! 解决方案 http://blog.csdn.net/liang12360640/article/det