简介
该工具提供了2d地图上的面积和长度的测量，内置的单位为平方米和米，可配置转换规则以及单位名字
使用方式
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;
});`
网友评论