这里测量长度主要分为两个方面,一个是在绘制长折线段时,不仅需要显示总线段的长度,还要在各线段的中间显示各折线段的长度;另一个则是在绘制多边形时,不仅需要显示多边形的面积,还需要在各边的中间显示线段长。
前提:在每次绘制图形的时候,都要消除图层上已有的图形,那么则需要clear()图层。此处的clear()为地图的图像清除。如下:
     this.map.graphics.clear();// 清除了地图的图像,使其无法访问到GraphicsLayer
     this._refreshGraphics;
这里我所面对的问题有两个,因为菜单栏中包括有两个工具——线、面,因此在每次绘制之后需要再次更新图层。方法如下:
   _refreshGraphics: function () {
       // 此处需要将绘制的Layer设置和面积绘制的Layer相同,不然在长度测量完之后,打开面积测量时,绘制的面无法消除
      this._regionGraphics = this.map.getLayer('regionGraphics');
      if (this._regionGraphics) {
           this._regionGraphics.clear();
      } else {
          this._regionGraphics = new GraphicsLayer({id: 'regionGraphics'});
          this.map.addLayer(this._regionGraphics);
       }
   }
1、测量折线段的长度
情况一: 如果仅仅是计算某一个线段的话(不包括内部折线段的长度),那么是比较简单的可以直接利用ArcGIS API for JavaScript中提供的方法来做,如下:
postCreate: function(){
      this._lengthMeasure();
},
_lengthMeasure: function () {
     this.toolbar.activate(Draw.POLYLINE);
     this.drawEnd = this.toolbar.on("draw-end", lang.hitch(this, this._getLengthOrArea));
     this.geometryService = esriConfig.defaults.geometryService;
     this.geometryService.on("lengths-complete", lang.hitch(this, this.outputLength));
},
outputLength: function (evtObj) {
    var result = evtObj.result;
    //设置总长度样式
   var textSymbol = new TextSymbol("距离:" + result.lengths[0] + "米").setColor(
   // 需要将setAngle中的数值设为0,才能使Font水平显示
     new Color([255, 0, 0])).setAlign(Font.ALIGN_MIDDLE).setAngle(0).setFont(
     new Font("12pt").setWeight(Font.WEIGHT_BOLD));
     var graphic = new Graphic(new Point(this.drawResult.geometry.paths[0][0][0], this.drawResult.geometry.paths[0][0][1], this.drawResult.geometry.spatialReference), textSymbol);
     this.map.graphics.add(graphic);
},
_getLengthOrArea: function (result) {
    this.drawResult = result;
    var symbol;
    symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2);
   //设置样式
   var graphic = new Graphic(result.geometry, symbol);
   this._regionGraphics.add(graphic);
   //this.map.graphics.add(graphic);
   //如果为线类型就进行lengths距离测算
    if (result.geometry.type == "polyline") {
         if(result.geometry.paths[0].length > 2) {
            var lengthParams = new LengthsParameters();
            lengthParams.polylines = [result.geometry];
            lengthParams.lengthUnit = GeometryService.UNIT_METER;
            lengthParams.geodesic = true;
           this.geometryService.lengths(lengthParams);
          }
    this.toolbar.deactivate();
}
这样既可通过ArcGIS API for JavaScript提供的方法计算出总的长度了。那么我在现实需求中则需要显示每条线段的值,具体做法如下:
postCreate: function(){
      this._lengthMeasure();
},
_lengthMeasure: function () {
    this.toolbar.activate(Draw.POLYLINE);
    this.drawEnd = this.toolbar.on("draw-end", lang.hitch(this, this._getLengthOrArea));
    this.geometryService = esriConfig.defaults.geometryService;
    // 这里需要改成map的click事件监听,并且不能出现lengths-complete,不然无法计算各线段的长度
    this.mapClickEvent = this.map.on('click', lang.hitch(this, this._mapClick));
},
_mapClick: function (object){
    this._arrMapPoints.push(object.mapPoint);
   if(this._arrMapPoints.length >= 2 ){ 
        var i = this._arrMapPoints.length-1;
       var polylineJson = {
      "paths":[[[this._arrMapPoints[i-1].x,this._arrMapPoints[i-1].y],[this._arrMapPoints[i].x,this._arrMapPoints[i].y]]],
      "spatialReference": distMap.spatialReference
     };
    var startX = this._arrMapPoints[i].x;
    var startY = this._arrMapPoints[i].y;
    var centerPoint = new Point(startX, startY , distMap.spatialReference);
    var polyline = new esri.geometry.Polyline(polylineJson);
   /*这里为调用的计算方法,因为不在一个js文件中,我会在最下面贴出来该方法,若不想拆开,可直接在下添加计算方法,这里的数组polyline就是传到下面的函数中的geometry*/
      geoServiceUtils.geometryLength(polyline).then(lang.hitch(this, function(data){
          this.outputPartLength(data, centerPoint);
      }))
   }
},
/**
* 各折线长度格式设置
* @private
*/
outputPartLength: function(result,centerPoint){
// 长度超过一千的,单位均显示为千米,且保留小数点后两位
     if(result.lengths[0] > 1000){
     var partLength = (result.lengths[0]/1000).toFixed(2);
     //设置各长度样式
     var textSymbol = new TextSymbol(partLength + '千米').setColor(
     // 需要将setAngle中的数值设为0,才能使Font水平显示
     new Color([0, 0, 255])).setAlign(Font.ALIGN_MIDDLE).setAngle(0).setFont(
     new Font('10pt').setWeight(Font.WEIGHT_BOLD));
     var graphic = new Graphic(centerPoint, textSymbol);
     this.map.graphics.add(graphic);
} else{
    // 长度不足一千米的,单位均显示为米,且保留小数点后两位
    var smallPartLength = result.lengths[0].toFixed(2);
   //设置各长度样式
   var textSymbol = new TextSymbol(smallPartLength + '米').setColor(
   // 需要将setAngle中的数值设为0,才能使Font水平显示
   new Color([0, 0, 255])).setAlign(Font.ALIGN_MIDDLE).setAngle(0).setFont(
   new Font('10pt').setWeight(Font.WEIGHT_BOLD));
   var graphic = new Graphic(centerPoint, textSymbol);
   this.map.graphics.add(graphic);
}
},
/**
* 总长度格式设置
* @private
*/
outputLength: function (result) {
    if(result.lengths[0] > 1000){
        var allLengrh = (result.lengths[0]/1000).toFixed(2);
        //设置总长度样式
        var textSymbol = new TextSymbol('总距离:' + allLengrh + '千米').setColor(
        // 需要将setAngle中的数值设为0,才能使Font水平显示
        new Color([255, 0, 0])).setAlign(Font.ALIGN_MIDDLE).setAngle(0).setFont(
        new Font('12pt').setWeight(Font.WEIGHT_BOLD));
        var graphic = new Graphic(new Point(this.drawResult.geometry.paths[0][0][0], this.drawResult.geometry.paths[0][0][1], this.drawResult.geometry.spatialReference), textSymbol);
      this.map.graphics.add(graphic);
     } else{
         var smallAllLength = result.lengths[0].toFixed(2);
         //设置总长度样式
          var textSymbol = new TextSymbol('总距离:' + smallAllLength + '米').setColor(
          // 需要将setAngle中的数值设为0,才能使Font水平显示
          new Color([255, 0, 0])).setAlign(Font.ALIGN_MIDDLE).setAngle(0).setFont(
          new Font('12pt').setWeight(Font.WEIGHT_BOLD));
           var graphic = new Graphic(new Point(this.drawResult.geometry.paths[0][0][0], this.drawResult.geometry.paths[0][0][1], this.drawResult.geometry.spatialReference),                    textSymbol);
      this.map.graphics.add(graphic);
     }
    //设置总长度样式

this.mapClickEvent.remove();
    this.drawEnd.remove();
},
/**
* 画图完毕后计算距离或者面积
* @param result 画图完毕返回的画图对象
* @private
*/
_getLengthOrArea: function (result) {
this.drawResult = result;
var symbol;
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2);
//设置样式
var graphic = new Graphic(result.geometry, symbol);
this._regionGraphics.add(graphic);
//进行总距离测算
if(result.geometry.type == 'polyline'){
geoServiceUtils.geometryLength(result.geometry).then(lang.hitch(this, function (data) {
this.outputLength(data);
}))
}
this.toolbar.deactivate();
},
/**
* 长度量测方法
* @param geometry
*/
mo.geometryLength = function (geometry) {
var geoService = esriConfig.defaults.geometryService;
var def = new Deferred();
// 计算总长度的值
if (geometry.paths[0].length > 2) {
var lengthParams = new LengthsParameters();
lengthParams.polylines = [geometry];
lengthParams.lengthUnit = GeometryService.UNIT_METER;
lengthParams.geodesic = true;
geoService.lengths(lengthParams, function (data) {
def.resolve(data);
}, function (err) {
def.reject(err);
});
} else {
// 计算各折线段的值
var lengthPartParams = new LengthsParameters();
lengthPartParams.polylines = [geometry];
lengthPartParams.lengthUnit = GeometryService.UNIT_METER;
lengthPartParams.geodesic = true;
geoService.lengths(lengthPartParams, function (data) {
def.resolve(data);
}, function (err) {
def.reject(err);
});
}
return def.promise;
}

至此,计算线段的长度以及计算一个线段各折线段的长度的方法已经得出,计算面的各线段长度和该方法一样,就不再赘述。

ArcGIS API for JS 测量线长(各折线段)的更多相关文章

  1. 在IIS服务器上本地部署 ArcGIS API for js 4.15

    作为一名刚入门的小白,还没开始一个helloworld就在软件安装,环境部署时遇到了一大堆问题,简直太让人头秃了,脑壳疼.话不多说,这篇主要想分享一下自己部署ArcGIS API for js 4.1 ...

  2. arcgis api for js入门开发系列四地图查询(含源代码)

    备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...

  3. arcgis api for js入门开发系列一arcgis api离线部署

    在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...

  4. arcgis api for js入门开发系列十一地图统计图

    上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...

  5. arcgis api for js入门开发系列二十打印地图的那些事

    前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...

  6. 转:arcgis api for js入门开发系列四地图查询

    原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...

  7. Arcgis API for JS——打印控件乱码

    在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹

  8. ArcGIS API for js Legend(图例)

    1.说明 有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...

  9. arcgis api for js 地图查询

      arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...

随机推荐

  1. Google - Find minimum number of coins that make a given value

    Given a value V, if we want to make change for V cents, and we have infinite supply of each of C = { ...

  2. re正则匹配城市名

    匹配城市名称,只要第一次出现之后的数据 import re a='巴州区白云县台公交乡公司对面区海蜃楼6楼' b=re.search(r'(^\w+?区)|(^\w+?县)|(^\w+?镇)',a). ...

  3. C#集合类型大揭秘 【转载】

    [地址]https://www.cnblogs.com/songwenjie/p/9185790.html 集合是.NET FCL(Framework Class Library)的重要组成部分,我们 ...

  4. centos7设置rc.local开机执行命令

    在Centos7下,rc.local文件,开机默认是不执行的 它是个软链接 [root@data-1-1 ~]# ll /etc/rc.local lrwxrwxrwx. 1 root root 13 ...

  5. DNS缓存服务器与转发服务器

    DNS缓存服务器与转发服务器 什么是缓存服务器(cache-only) 缓存服务器只需要根区域解析库文件,不包含任何其它区域解析库文件,这样的服务器就叫着缓存服务器.这样的服务器只有缓存搜寻结果的功能 ...

  6. 记一次nmap扫描信息收集过程

    1.首先扫描网段内存活主机 nmap -sP 192.168.1.1-254 2.获取到存活主机后,开始进行端口扫描 nmap -p1-1000 192.168.1.66 可得到端口状态: filte ...

  7. TIDB 备忘

    ALTER TABLE TableName MODIFY COLUMN -- 最后更新时间,自动赋值 dtModify ) NULL DEFAULT now() ON UPDATE now();

  8. 【如皋OJ】1127:正整数N转换成一个二进制数

    1127: 正整数N转换成一个二进制数 时间限制: 1 Sec  内存限制: 128 MB提交: 85  解决: 59[提交] [状态] [讨论版] [命题人:zhuzhigang] 题目描述 输入一 ...

  9. PAT 乙级 1044 火星数字 (20 分)

    1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, j ...

  10. node-js:文摘

    ES6相关 1.module.exports与exports,export与export default之间的关系和区别 nodejs基础 1.NodeJs安装与全局配置(不建议修改包的全局安装路径, ...