///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2016 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define(['dojo/query', 'esri/geometry/geodesicUtils', 'esri/geometry/webMercatorUtils', 'esri/symbols/PictureMarkerSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/geometry/Polyline', 'esri/geometry/Point', 'esri/graphic', 'dojo/on', 'esri/toolbars/draw', 'esri/layers/GraphicsLayer', 'dojo/_base/declare', 'dojo/_base/lang', 'dojo/aspect', 'dojo/Deferred', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'jimu/portalUtils', 'jimu/dijit/Message', 'esri/units', 'esri/dijit/Measurement', "esri/symbols/jsonUtils"], function(query, geodesicUtils, webMercatorUtils, PictureMarkerSymbol, SimpleLineSymbol, Polyline, Point, Graphic, on, Draw, GraphicsLayer, declare, lang, aspect, Deferred, _WidgetsInTemplateMixin, BaseWidget, PortalUtils, Message, esriUnits, Measurement, jsonUtils) {
|
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
|
|
name : 'Measurement',
|
baseClass : 'jimu-widget-measurement',
|
measurement : null,
|
_pcDef : null,
|
allPath : null,
|
movegraphic:null,
|
startup : function() {
|
if (this.measurement || this._pcDef) {
|
return;
|
}
|
this.inherited(arguments);
|
|
var json = this.config.measurement;
|
json.map = this.map;
|
if (json.lineSymbol) {
|
json.lineSymbol = jsonUtils.fromJson(json.lineSymbol);
|
}
|
if (json.pointSymbol) {
|
json.pointSymbol = jsonUtils.fromJson(json.pointSymbol);
|
}
|
|
this._processConfig(json).then(lang.hitch(this, function(measurementJson) {
|
//debugger;
|
this.measurement = new Measurement(measurementJson, this.measurementDiv);
|
this.own(aspect.after(this.measurement, 'setTool', lang.hitch(this, function() {
|
if (this.measurement.activeTool) {
|
this.disableWebMapPopup();
|
} else {
|
this.enableWebMapPopup();
|
}
|
})));
|
|
this.measurement.startup();
|
|
this._hideToolsByConfig();
|
}), lang.hitch(this, function(err) {
|
new Message({
|
message : err.message || err
|
});
|
}));
|
},
|
|
_processConfig : function(configJson) {
|
//debugger;
|
this._pcDef = new Deferred();
|
if (configJson.defaultLengthUnit && configJson.defaultAreaUnit) {
|
configJson.defaultAreaUnit = esriUnits.HECTARES;
|
configJson.defaultLengthUnit = esriUnits.METERS;
|
this._pcDef.resolve(configJson);
|
} else {
|
if (this.appConfig.portalUrl) {
|
PortalUtils.getUnits(this.appConfig.portalUrl).then(lang.hitch(this, function(units) {
|
configJson.defaultAreaUnit = esriUnits.HECTARES;
|
configJson.defaultLengthUnit = esriUnits.METERS;
|
this._pcDef.resolve(configJson);
|
}), lang.hitch(this, function(err) {
|
console.error(err);
|
configJson.defaultAreaUnit = esriUnits.HECTARES;
|
configJson.defaultLengthUnit = esriUnits.METERS;
|
this._pcDef.resolve(configJson);
|
}));
|
} else {
|
configJson.defaultAreaUnit = esriUnits.HECTARES;
|
configJson.defaultLengthUnit = esriUnits.METERS;
|
this._pcDef.resolve(configJson);
|
}
|
}
|
|
return this._pcDef.promise;
|
},
|
|
_hideToolsByConfig : function() {
|
if (false === this.config.showArea) {
|
this.measurement.hideTool("area");
|
}
|
if (false === this.config.showDistance) {
|
this.measurement.hideTool("distance");
|
}
|
if (false === this.config.showLocation) {
|
this.measurement.hideTool("location");
|
}
|
},
|
|
disableWebMapPopup : function() {
|
this.map.setInfoWindowOnClick(false);
|
if (this.measurement.activeTool == "distance") {
|
|
if (this.map.drawToolbar != undefined) {
|
this.map.drawToolbar.deactivate();
|
} else {
|
this.map.drawToolbar = new Draw(this.map);
|
}
|
var Drawtype;
|
if (this.map.DrawonEvent) {
|
this.map.DrawonEvent.remove();
|
}
|
if (this.map.DrawwatchEvent) {
|
this.map.DrawwatchEvent.remove();
|
}
|
if(this.map.getLayer("displayLayersurvey")==null){
|
var eSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 128, 255, .55]), 1);
|
var displayLayer = new GraphicsLayer();
|
displayLayer.id = "displayLayersurvey";
|
this.map.addLayer(displayLayer);
|
this.map.drawToolbar.lineSymbol = eSymbol;
|
}
|
this.map.getLayer("displayLayersurvey").clear();
|
Drawtype = Draw.POLYLINE;
|
//////////////////
|
|
var txtLayer = this.map.getLayer("displayLayerTxt");
|
if (txtLayer == null) {
|
txtLayer = new GraphicsLayer({
|
id : "displayLayerTxt"
|
});
|
this.map.addLayer(txtLayer);
|
}
|
txtLayer.clear();
|
if(this.movegraphic==null){
|
var eTxtSymbol = new esri.symbol.TextSymbol().setColor(new esri.Color([224, 34, 34]));
|
this.movegraphic = new Graphic(new Point(10,10),eTxtSymbol);
|
this.movegraphic.hide();
|
txtLayer.add(this.movegraphic);
|
}
|
//
|
this.map.DrawonEvent = this.map.drawToolbar.on("draw-end", lang.hitch(this, this.getDrawEnd));
|
this.map.DrawwatchEvent = this.map.on("click", lang.hitch(this, this.getDrawline));
|
this.map.on("mouse-move", lang.hitch(this, this.getMovelength));
|
this.map.drawToolbar.activate(Drawtype);
|
|
} else {
|
if (this.map.getLayer("displayLayersurvey") != undefined) {
|
this.map.getLayer("displayLayersurvey").clear();
|
this.map.getLayer("displayLayerTxt").clear();
|
this._deleteNode();
|
}
|
if (this.map.drawToolbar != undefined) {
|
this.map.drawToolbar.deactivate();
|
}
|
if (this.map.DrawwatchEvent) {
|
this.map.DrawwatchEvent.remove();
|
}
|
if (this.map.DrawonEvent) {
|
this.map.DrawonEvent.remove();
|
}
|
if(this.movegraphic){
|
this.movegraphic = null;
|
}
|
}
|
if (this.measurement.activeTool == "area") {
|
if (this.map.drawToolbar != undefined) {
|
this.map.drawToolbar.deactivate();
|
} else {
|
this.map.drawToolbar = new Draw(this.map);
|
}
|
var Drawtype;
|
if (this.map.DrawonEvent) {
|
this.map.DrawonEvent.remove();
|
}
|
if (this.map.DrawwatchEvent) {
|
this.map.DrawwatchEvent.remove();
|
}
|
var txtLayer = this.map.getLayer("displayLayerTxt");
|
if (txtLayer == null) {
|
txtLayer = new GraphicsLayer({
|
id : "displayLayerTxt"
|
});
|
this.map.addLayer(txtLayer);
|
}
|
txtLayer.clear();
|
if(this.map.getLayer("displayLayersurvey")==null){
|
var eSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 128, 255, .55]), 1);
|
var displayLayer = new GraphicsLayer();
|
displayLayer.id = "displayLayersurvey";
|
this.map.addLayer(displayLayer);
|
this.map.drawToolbar.lineSymbol = eSymbol;
|
}
|
this.map.getLayer("displayLayersurvey").clear();
|
Drawtype = Draw.POLYGON;
|
this.map.DrawonEvent = this.map.drawToolbar.on("draw-end", lang.hitch(this, this.getDrawEnd));
|
//this.map.DrawwatchEvent = this.map.on("click", lang.hitch(this, this.getDrawline));
|
this.map.drawToolbar.activate(Drawtype);
|
};
|
},
|
getDrawEnd : function(result) {
|
|
if (result.geometry.type == "polyline") {
|
this.map.graphics.clear();
|
var pathslist = result.geometry.paths;
|
var sum = pathslist.length;
|
var index = pathslist[sum - 1].length;
|
//得到最后点击的点
|
var uPoint = new Point(pathslist[sum-1][index-1][0], pathslist[sum-1][index-1][1]);
|
//前一次点击的点
|
var pPoint = this.map.previousdot;
|
|
///绘制点
|
var eSymbol = new PictureMarkerSymbol("widgets/Measurement/images/esriGreenPin16x26.png", 16, 26);
|
eSymbol.setOffset(1, 12);
|
var graphic = new Graphic(uPoint, eSymbol);
|
//this.map.getLayer("displayLayersurvey").add(graphic, );
|
|
//绘制线
|
var lSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([207, 42, 36]), 3);
|
var geometry = new Polyline(this.spatialReference);
|
geometry.addPath([pPoint, uPoint]);
|
var graphicline = new Graphic(geometry, lSymbol);
|
|
//this.map.getLayer("displayLayersurvey").add(graphicline);
|
|
this.map.previousdot = undefined;
|
|
var Node = query('#lineindex')[0];
|
//////////显示总长度////////////////
|
this.movegraphic.hide();
|
var paths = this.allPath;
|
var geo = webMercatorUtils.webMercatorToGeographic(result.geometry);
|
var text = query('#dijit_form_DropDownButton_0_label')[0].innerHTML;
|
var fruit = geodesicUtils.geodesicLengths([geo], this.measurement.currentDistanceUnit);
|
var isNow = true;
|
this.map.getLayer("displayLayersurvey").clear();
|
//绘制线
|
geometry = new Polyline(this.map.spatialReference);
|
geometry.addPath(paths);
|
var lSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([34, 117, 76]), 2);
|
var lineGraphic = new Graphic(geometry, lSymbol);
|
this.map.getLayer("displayLayerTxt").add(lineGraphic);
|
for (var i = 0; i < paths.length; i++) {
|
var pPoint = paths[i];
|
var eTxtSymbol = new esri.symbol.TextSymbol().setColor(new esri.Color([224, 34, 34]));
|
eTxtSymbol.setOffset(30, 2);
|
if (i == 0) {
|
eTxtSymbol.setText("起点");
|
} else if (i > 0 && (i < paths.length - 1)) {
|
geometry = new Polyline(this.map.spatialReference);
|
geometry.addPath([paths[i - 1], pPoint]);
|
var geo = webMercatorUtils.webMercatorToGeographic(geometry);
|
var fruit = geodesicUtils.geodesicLengths([geo], this.measurement.currentDistanceUnit);
|
eTxtSymbol.setText(this.formatMoney(fruit[0].toFixed(1),1) + text);
|
} else if (i == paths.length - 1) {
|
geometry = new Polyline(this.map.spatialReference);
|
geometry.addPath(paths);
|
geo = webMercatorUtils.webMercatorToGeographic(geometry);
|
fruit = geodesicUtils.geodesicLengths([geo], this.measurement.currentDistanceUnit);
|
eTxtSymbol.setText("总长度：" + this.formatMoney(fruit[0].toFixed(1),1) + text);
|
}
|
////////////////绘制点
|
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 5, new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new esri.Color([34, 117, 76]), 1), new esri.Color([0, 255, 0, 0.25]));
|
var graphic = new Graphic(pPoint, symbol);
|
this.map.getLayer("displayLayerTxt").add(graphic);
|
//绘制线长度文本
|
var eTgraphic = new Graphic(pPoint, eTxtSymbol);
|
this.map.getLayer("displayLayerTxt").add(eTgraphic);
|
};
|
this.map.lineindex = 1;
|
}
|
else if(result.geometry.type == "polygon")//POLYGON
|
{
|
this.map.graphics.remove(this.map.graphics.graphics[this.map.graphics.graphics.length-1]);//移除黑色面
|
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
|
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([224, 34, 34, 1]), 2),
|
new dojo.Color([159, 146, 226, 0]));
|
var graphic = new Graphic(result.geometry,symbol);
|
this.map.getLayer("displayLayerTxt").add(graphic);
|
var text = query('#dijit_form_DropDownButton_0_label')[0].innerHTML;
|
var geo = webMercatorUtils.webMercatorToGeographic(result.geometry);
|
var areas = geodesicUtils.geodesicAreas([geo],this.measurement.currentAreaUnit);
|
var mapPoint = result.geometry.getExtent().getCenter();
|
text = query("#dijit_layout_ContentPane_3")[0].innerHTML;
|
var tSymbol = new esri.symbol.TextSymbol("面积："+text).setColor(new esri.Color([224, 34, 34]));
|
//tSymbol.setOffset(-10, 2);
|
var areaGraphic = new Graphic(mapPoint,tSymbol);
|
this.map.getLayer("displayLayerTxt").add(areaGraphic);
|
}
|
|
},
|
//线
|
getDrawline : function(result, h, e) {
|
//当前点
|
var uPoint = result.mapPoint;
|
if (this.map.previousdot === undefined) {
|
//首次跳出----因原码有绘制首次代码
|
this.map.getLayer("displayLayersurvey").clear();
|
this.map.previousdot = uPoint;
|
//this._deleteNode();
|
this.map.lineindex = 1;
|
//绘制起点文本
|
var eTxtSymbol = new esri.symbol.TextSymbol("起点").setColor(new esri.Color([224, 34, 34]));
|
eTxtSymbol.setOffset(30, 2);
|
var eTgraphic = new Graphic(uPoint, eTxtSymbol);
|
this.map.getLayer("displayLayersurvey").add(eTgraphic);
|
this.allPath = new Array(uPoint);
|
|
return;
|
}
|
this.allPath.push(uPoint);
|
//前一次点击的点
|
var pPoint = this.map.previousdot;
|
|
//绘制线
|
var lSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([34, 117, 76]), 3);
|
var geometry = new Polyline(this.map.spatialReference);
|
geometry.addPath([pPoint, uPoint]);
|
|
var graphicline = new Graphic(geometry, lSymbol);
|
this.map.getLayer("displayLayersurvey").add(graphicline);
|
///绘制点
|
var eSymbol = new PictureMarkerSymbol("widgets/Measurement/images/esriGreenPin16x26.png", 16, 26);
|
eSymbol.setOffset(1, 12);
|
var graphic = new Graphic(pPoint, eSymbol);
|
this.map.getLayer("displayLayersurvey").add(graphic);
|
|
var geo = webMercatorUtils.webMercatorToGeographic(geometry);
|
var fruit = geodesicUtils.geodesicLengths([geo], this.measurement.currentDistanceUnit);
|
|
if (query('#lineindex')[0] == undefined) {
|
var paneNode = query('#dijit_layout_ContentPane_2')[0];
|
dojo.place('<div id="lineindex"></div>', paneNode, "below");
|
}
|
var text = query('#dijit_form_DropDownButton_0_label')[0].innerHTML;
|
if (fruit[0] != 0) {
|
var divText = "第" + this.map.lineindex + "段距离：" + this.formatMoney(fruit[0].toFixed(1),1) + text;
|
var Node = query('#lineindex')[0];
|
|
dojo.place('<div>' + divText + '</div>', Node, "below");
|
this.map.previousdot = uPoint;
|
this.map.lineindex++;
|
//绘制长度文本
|
var line = new Polyline(this.map.spatialReference);
|
line.addPath(this.allPath);
|
var geos = webMercatorUtils.webMercatorToGeographic(line);
|
var length = geodesicUtils.geodesicLengths([geos], this.measurement.currentDistanceUnit);
|
var TxtSymbol = new esri.symbol.TextSymbol(this.formatMoney(length[0].toFixed(1),1) + text).setColor(new esri.Color([224, 34, 34]));
|
TxtSymbol.setOffset(40, 2);
|
var Tgraphic = new Graphic(uPoint, TxtSymbol);
|
this.map.getLayer("displayLayersurvey").add(Tgraphic);
|
}
|
|
},
|
getMovelength : function(result, h, e) {
|
if(this.movegraphic&&this.map.previousdot){
|
var text = query('#dijit_form_DropDownButton_0_label')[0].innerHTML;
|
var line = new Polyline(this.map.spatialReference);
|
line.addPath([this.map.previousdot,result.mapPoint]);
|
var geos = webMercatorUtils.webMercatorToGeographic(line);
|
var length = geodesicUtils.geodesicLengths([geos], this.measurement.currentDistanceUnit);
|
var TxtSymbol = this.movegraphic.symbol;
|
TxtSymbol.setText(this.formatMoney(length[0].toFixed(1),1) + text);
|
this.movegraphic.setGeometry(result.mapPoint);
|
this.movegraphic.show();
|
}
|
},
|
_deleteNode : function() {
|
query('#lineindex').forEach(function(Node) {
|
dojo.destroy(Node);
|
});
|
},
|
enableWebMapPopup : function() {
|
if (this.map.getLayer("displayLayersurvey") != undefined) {
|
this.map.getLayer("displayLayersurvey").clear();
|
this.map.getLayer("displayLayerTxt").clear();
|
this._deleteNode();
|
}
|
if (this.map.drawToolbar != undefined) {
|
this.map.drawToolbar.deactivate();
|
}
|
if (this.map.DrawwatchEvent) {
|
this.map.DrawwatchEvent.remove();
|
}
|
if(this.movegraphic){
|
this.movegraphic = null;
|
}
|
this.map.setInfoWindowOnClick(true);
|
|
},
|
formatMoney : function(s,type){//按千位逗号分割数字
|
if (/[^0-9]\./.test(s)) {
|
return "0";
|
}
|
if (s===null || s== "") {return "0";};
|
s= s.toString().replace(/^(\d*)$/,"$1.");
|
s= (s +"00").replace(/(\d*\.\d\d)\d*/,"$1");
|
s= s.replace(".",",");
|
var re=/(\d)(\d{3},)/;
|
while(re.test(s))
|
{
|
s = s.replace(re,"$1,$2");
|
}
|
s = s.replace(/,(\d\d)$/,".$1");
|
if(type==0){
|
var a = s.split(".");
|
if(a[1]=="00")s=a[0];
|
}
|
return s;
|
},
|
onDeActive : function() {
|
this.onClose();
|
},
|
|
onClose : function() {
|
if (this.measurement && this.measurement.activeTool) {
|
this.measurement.clearResult();
|
this.measurement.setTool(this.measurement.activeTool, false);
|
}
|
},
|
|
destroy : function() {
|
if (this.measurement) {
|
this.measurement.destroy();
|
}
|
this.inherited(arguments);
|
}
|
});
|
return clazz;
|
});
|
