ArcGIS API for JS 测量线长(各折线段)
这里测量长度主要分为两个方面,一个是在绘制长折线段时,不仅需要显示总线段的长度,还要在各线段的中间显示各折线段的长度;另一个则是在绘制多边形时,不仅需要显示多边形的面积,还需要在各边的中间显示线段长。
前提:在每次绘制图形的时候,都要消除图层上已有的图形,那么则需要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 测量线长(各折线段)的更多相关文章
- 在IIS服务器上本地部署 ArcGIS API for js 4.15
作为一名刚入门的小白,还没开始一个helloworld就在软件安装,环境部署时遇到了一大堆问题,简直太让人头秃了,脑壳疼.话不多说,这篇主要想分享一下自己部署ArcGIS API for js 4.1 ...
- arcgis api for js入门开发系列四地图查询(含源代码)
备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...
- arcgis api for js入门开发系列一arcgis api离线部署
在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...
- arcgis api for js入门开发系列十一地图统计图
上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...
- arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
- 转:arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
- Arcgis API for JS——打印控件乱码
在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹
- ArcGIS API for js Legend(图例)
1.说明 有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...
- arcgis api for js 地图查询
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...
随机推荐
- 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 = { ...
- re正则匹配城市名
匹配城市名称,只要第一次出现之后的数据 import re a='巴州区白云县台公交乡公司对面区海蜃楼6楼' b=re.search(r'(^\w+?区)|(^\w+?县)|(^\w+?镇)',a). ...
- C#集合类型大揭秘 【转载】
[地址]https://www.cnblogs.com/songwenjie/p/9185790.html 集合是.NET FCL(Framework Class Library)的重要组成部分,我们 ...
- centos7设置rc.local开机执行命令
在Centos7下,rc.local文件,开机默认是不执行的 它是个软链接 [root@data-1-1 ~]# ll /etc/rc.local lrwxrwxrwx. 1 root root 13 ...
- DNS缓存服务器与转发服务器
DNS缓存服务器与转发服务器 什么是缓存服务器(cache-only) 缓存服务器只需要根区域解析库文件,不包含任何其它区域解析库文件,这样的服务器就叫着缓存服务器.这样的服务器只有缓存搜寻结果的功能 ...
- 记一次nmap扫描信息收集过程
1.首先扫描网段内存活主机 nmap -sP 192.168.1.1-254 2.获取到存活主机后,开始进行端口扫描 nmap -p1-1000 192.168.1.66 可得到端口状态: filte ...
- TIDB 备忘
ALTER TABLE TableName MODIFY COLUMN -- 最后更新时间,自动赋值 dtModify ) NULL DEFAULT now() ON UPDATE now();
- 【如皋OJ】1127:正整数N转换成一个二进制数
1127: 正整数N转换成一个二进制数 时间限制: 1 Sec 内存限制: 128 MB提交: 85 解决: 59[提交] [状态] [讨论版] [命题人:zhuzhigang] 题目描述 输入一 ...
- PAT 乙级 1044 火星数字 (20 分)
1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, j ...
- node-js:文摘
ES6相关 1.module.exports与exports,export与export default之间的关系和区别 nodejs基础 1.NodeJs安装与全局配置(不建议修改包的全局安装路径, ...