# 使用方式

`var measure = new Measure(view,{coordinates:'projected'}); // view为mapView // 由于投影坐标系和地理坐标系的面积计算方式不同，所以此处需要手动传递确认坐标系 // projected/geodesic measure.activate(Measure.TOOLS.AREA,{ customUnit:'平方千米', parseResult:function(result){return result/1000000}, decimal:2, // 保留小数位数 unit:'' // 此处为测量单位，为api中geometryEngine里的单位字符串，默认为米和平方米 });`

1.png
2.png
3.png
4.png

# 代码片段

`define([
"./Custom",
"./Draw",
"../geometry/geometryEngine",
"../symbols/TextSymbol",
"../Graphic",
"../layers/GraphicsLayer",
"../symbols/SimpleMarkerSymbol",
"dojo/dom-construct"
], function (Custom, Draw, geometryEngine, TextSymbol, Graphic, GraphicsLayer, SimpleMarkerSymbol, domConstruct) {
'use strict';

``````var tools = {
AREA: 'area',
LENGTH: 'length',
LOCATION: 'location'
};
var _tpl = dojo.string.substitute;

var resultTemplate = '<div class="result-div" data-randomid="\${randomId}" data-mapx="\${mapx}" data-mapy="\${mapy}" style="position:absolute;left:\${screenx}px;top:\${screeny}px;border: 1px solid #FF0103;padding: 4px;background:#fff;font-size:14px;"><span style="font-weight:700;color:#ff6319">\${result}</span> \${unit}</div>';
var clearTemplate = '<div id="clear-\${randomId}" data-left-offset="\${leftOffset}" data-mapx="\${mapx}" data-mapy="\${mapy}" data-randomid="\${randomId}" class="clear-div" title="清除此次测量" style="cursor:pointer;font-family: cursive;border: 1px solid red;height: 12px;display: inline-block;width: 12px;line-height: 8px;font-weight: bolder;color: red;text-align: center;position:absolute;left:\${left}px;top:\${top}px">x</div>'

var Measure = Custom.createSubclass({
declaredClass: "esri.custom._RemoteLegend",
normalizeCtorArgs: function (view, options) {
var me = this;
options || (options = {});
options.coordinates || (options.coordinates = 'projected'); // 投影坐标系和地理坐标系计算方式不一样 geodesic
this._options = options;
this._mapView = view;

this._mapView.watch('extent', this.debounce(function () {
me._calResultDiv();
}, 0));

this._initDraw(); // 初始化绘图工具
this._tempGraphicLayer = new GraphicsLayer(); // 绘制时的图层
this._mapView.map.add(this._tempGraphicLayer);
this._drawNodeGraphicLayer = new GraphicsLayer(); // 绘制时拐点图层
this._mapView.map.add(this._drawNodeGraphicLayer);
},
_getUnitCh: function () {
return this._customUnit || this.unitCh[this._unit];
},
_initDraw: function () {
var me = this;
this._draw = new Draw(this._mapView);
this._draw.watch('end', function (geometry) {
me._measure(geometry);
});
this._draw.watch('pointermove', function (graphic) {
var result = me._measure(graphic.geometry);
me._draw._setTooltipMsg(result + me._getUnitCh());
});
this._draw.watch('click', function (graphic) {
var result = me._measure(graphic.geometry);
if (result) {
me._toolname === tools.AREA && me._clearCurrentResultDivs(); // 如果是面积测量则清除上一次的测量结果
me._createResultDiv(result, graphic.mapPoint); // 添加测量结果信息div
}
me._createDrawNode(graphic.mapPoint); // 绘制拐点
});
this._draw.watch('end', function (graphic) {
var result = me._measure(graphic.geometry);
if (result) {
me._toolname === tools.AREA && me._clearCurrentResultDivs();
me._createResultDiv(result, graphic.mapPoint);
}
graphic.attributes = dojo.mixin(graphic.attributes, {
randomId: me._currentRandomId
});
me._tempGraphicLayer.add(graphic);
me._createDrawNode(graphic.mapPoint);
me._createClearDiv(graphic); // 创建清除测量按钮
me._draw.deactivate();
});
},
unitCh: {
'square-meters': '平方米',
'meters': '米'
},
_createClearDiv: function (g) {
var screen = this._mapView.toScreen(g.mapPoint);
var me = this;
var lastTwoPoints = []; // 测量完成后geometry得最后两个点
switch (g.geometry.type) {
case 'polygon':
var lastRing = this.last(g.geometry.rings);
if (lastRing && lastRing.length > 2) {
lastTwoPoints = [lastRing[lastRing.length - 1], lastRing[lastRing.length - 2]];
}
break;
case 'polyline':
var lastPath = this.last(g.geometry.paths);
if (lastPath && lastPath.length >= 2) {
lastTwoPoints = [lastPath[lastPath.length - 1], lastPath[lastPath.length - 2]];
}
break;
}
var pixel = 0;
if (lastTwoPoints.length === 2) { // 根据最后两个点的连线计算清除按钮放置点的左边还是右边
if (lastTwoPoints[0][0] >= lastTwoPoints[1][0]) {
pixel = 10;
} else {
pixel = -20;
}
}
var html = _tpl(clearTemplate, {
left: screen.x + pixel,
top: screen.y - 7,
randomId: this._currentRandomId,
mapx: g.mapPoint.x,
mapy: g.mapPoint.y,
leftOffset: pixel
});
dojo.query(this._mapView.container).query('.esri-view-root').addContent(html);
// 清除测量结果的点击事件，
var handler = dojo.query('#clear-' + this._currentRandomId).on('click', function (event) {
me._clearMeasureResult(event);
handler[0].remove(); // 清除后移除该事件
});
},
_clearMeasureResult: function (event) {
var me = this;
var randomId = dojo.query(event.currentTarget).attr('data-randomid')[0];
dojo.query('[data-randomid="' + randomId + '"]').forEach(function (node) { // 移除添加的结果呈现div
domConstruct.destroy(node);
});
this._tempGraphicLayer.removeMany(dojo.filter(this._tempGraphicLayer.graphics.items, function (g) {
return g.attributes['randomId'] == randomId;
}));
this._drawNodeGraphicLayer.removeMany(dojo.filter(this._drawNodeGraphicLayer.graphics.items, function (g) {
return g.attributes['randomId'] == randomId;
}));
},
_createDrawNode: function (mapPoint) { // 创建节点
var g = new Graphic({
geometry: mapPoint,
symbol: new SimpleMarkerSymbol({
style: "circle",
color: "white",
size: "6px",
outline: {
color: [255, 0, 0],
width: 2
}
}),
attributes: {
randomId: this._currentRandomId
}
});
this._drawNodeGraphicLayer.add(g);
},
_clearCurrentResultDivs: function () { // 清除面积测量时的临时结果
var me = this;
dojo.query('.result-div').forEach(function (node) {
if (dojo.query(node).attr('data-randomid')[0] == me._currentRandomId) {
domConstruct.destroy(node);
}
});
},
_createResultDiv: function (result, mapPoint) { // 创建结果div
var screen = this._mapView.toScreen(mapPoint);
var html = _tpl(resultTemplate, {
result: result,
unit: this._getUnitCh(),
screenx: screen.x - 5,
screeny: screen.y + 10,
mapx: mapPoint.x,
mapy: mapPoint.y,
randomId: this._currentRandomId
});
dojo.query(this._mapView.container).query('.esri-view-root').addContent(html);
},
_calResultDiv: function () { // 计算结果div对应到mapPoint时的位置
var me = this;
var nodes = dojo.query('.result-div').forEach(function (node) {
var mapx = dojo.query(node).attr('data-mapx')[0];
var mapy = dojo.query(node).attr('data-mapy')[0];
var screen = me._mapView.toScreen({
x: parseFloat(mapx), y: parseFloat(mapy)
});
node.style.left = (screen.x - 5) + 'px';
node.style.top = (screen.y + 10) + 'px';
});
dojo.query('.clear-div').forEach(function (node) {
var dnode = dojo.query(node);
var mapx = dnode.attr('data-mapx')[0];
var mapy = dnode.attr('data-mapy')[0];
var leftOffset = dnode.attr('data-left-offset');
var screen = me._mapView.toScreen({
x: parseFloat(mapx), y: parseFloat(mapy)
});
node.style.left = (screen.x + parseFloat(leftOffset)) + 'px';
node.style.top = (screen.y - 7) + 'px';
});
},
activate: function (name, params) {
this._toolname = name;
params || (params = {});
this._unit = params.unit;
this._parseResult = params.parseResult; // 结果转换方法
this._customUnit = params.customUnit; // 自定义单位名称
this._decimal = params.decimal; // 保留小数位数
switch (name) {
case tools.AREA:
this._draw.activate(Draw.TYPE.POLYGON); break;
case tools.LENGTH:
this._draw.activate(Draw.TYPE.POLYLINE); break;
case tools.LOCATION:
this._draw.activate(Draw.TYPE.POINT); break;
};
this._currentRandomId = (new Date()).valueOf();
},
deactivate: function () {
dojo.query('.result-div').forEach(function (node) {
domConstruct.destroy(node);
});
dojo.query('.clear-div').forEach(function (node) {
domConstruct.destroy(node);
});
this._tempGraphicLayer.removeAll();
this._drawNodeGraphicLayer.removeAll();
this._draw.deactivate();
},
_measure: function (geometry) {
var result;
if (!geometry) {
return;
}
switch (this._toolname) {
case tools.AREA:
if (geometry.type === 'polygon') {
this._unit || (this._unit = 'square-meters');
if (this._options.coordinates === 'projected') {
result = geometryEngine.planarArea(geometry, this._unit);
} else {
result = geometryEngine.geodesicArea(geometry, this._unit);
}
result = Math.abs(result);
break;
}
case tools.LENGTH:
if (geometry.type === 'polyline') {
this._unit || (this._unit = 'meters');
if (this._options.coordinates === 'projected') {
result = geometryEngine.planarLength(geometry, this._unit);
} else {
result = geometryEngine.geodesicLength(geometry, this._unit);
}
result = Math.abs(result);
break;
}
};

if (this._parseResult) {
result = this._parseResult(result);
}
if (this._decimal) { // 测量结果的小数保留
var num = Math.pow(10, this._decimal);
result = Math.round(result * num) / num;
}
return result;
}
});

Measure.TOOLS = tools;

return Measure;
``````

});`

# 源码

http://download.csdn.net/detail/longfellowcj/9759872

©著作权归作者所有,转载或内容合作请联系作者
• 序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 77,946评论 1 169
• 序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 26,265评论 1 142
• 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 29,362评论 0 100
• 文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
开封第一讲书人阅读 16,287评论 0 86
• 正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 21,542评论 0 144
• 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 17,714评论 0 87
• 那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
沈念sama阅读 10,515评论 2 161
• 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 9,917评论 0 77
• 想象着我的养父在大火中拼命挣扎，窒息，最后皮肤化为焦炭。我心中就已经是抑制不住地欢快，这就叫做以其人之道，还治其人...
爱写小说的胖达阅读 8,437评论 5 111
• 序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 11,699评论 0 128
• 正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
茶点故事阅读 10,468评论 1 124
• 正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 11,267评论 0 127
• 白月光回国，霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前， 不然我有一百种方法让你生不如死。]我...
爱写小说的胖达阅读 6,122评论 0 17
• 序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 8,922评论 2 114
• 正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 12,006评论 3 121
• 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 7,762评论 0 3
• 文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
开封第一讲书人阅读 7,980评论 0 76
• 我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
沈念sama阅读 12,445评论 2 132
• 正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 13,111评论 2 130