距離測量，面積測量等工具條是常用的工具。也是GIS系統的基礎功能
效果圖
工具條樣式：
距離測量：
面積測量：
代碼：
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/toolbars/navigation",
"esri/toolbars/draw",
"esri/tasks/GeometryService",
"esri/symbols/Font",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/TextSymbol",
"esri/Color",
"dojo/number",
"esri/graphic",
"esri/tasks/LengthsParameters",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/tasks/AreasAndLengthsParameters",
"dojo/dom-attr",
"dojo/domReady!"
],function(Map,ArcGISDynamicMapServiceLayer,Navigation,Draw,GeometryService,Font,SimpleMarkerSymbol,SimpleLineSymbol,TextSymbol,Color,number,Graphic,LengthsParameters,
Point,Polyline,AreasAndLengthsParameters,domAttr){
var chinaCollagelayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/2017shixi/collegeMap/MapServer");
var map = new Map("map");
map.addLayer(chinaCollagelayer);
//建立地圖操作對象
var navToolbar = new Navigation(map);
//toolbar工具條
var toolbar = new Draw(map);
//調用esri自帶的服務（在arcgis server Manger中，記得開啟服務）
var geometryService =new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var totleDistance = ;//總距離
var totalGraphic = null;//存儲點集合
var disFun =false;//距離測量
var areaFun = false;//面積測量
var inputPoints = [];//存儲生成點的集合
var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定義文字樣式
var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([,,]),),
new Color([,,]));//定義标記點樣式
//給按鈕添加綁定事件
query(".functionWrap").on("click",function(event){
//獲得按鈕的文本資訊
var value=domAttr.get(this,"title");
switch(value){
case "平移":
navToolbar.activate(Navigation.PAN);
break;
case "拉框縮小":
navToolbar.activate(Navigation.ZOOM_OUT);
break;
case "拉框放大":
navToolbar.activate(Navigation.ZOOM_IN);
break;
case "全圖":
map.centerAndZoom(([,]),);
break;
case "距離測量":
distanceMeasure();
break;
case "面積測量":
areaMeasure();
break;
case "清除标記":
clearAction();
break;
}
};
//長度量算
function distanceMeasure() {
map.enableScrollWheelZoom();
disFun=true;
areaFun=false;
toolbar.activate(Draw.POLYLINE);
}
//面積量算
function areaMeasure() {
map.enableScrollWheelZoom();
disFun=false;
areaFun=true;
toolbar.activate(Draw.POLYGON);
}
// 量算功能觸發
map.on("click",function (evt) {
mapClick(evt);
});
//觸發完成的事件
toolbar.on("draw-end",function (evt) {
addToMap(evt);
});
//生成兩點之間的連線
toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([,,]),));
//量算函數
function mapClick(evt) {
if(disFun){
inputPoints.push(evt.mapPoint);
var textSymbol;
if(inputPoints.length ===){
textSymbol = new TextSymbol("起點",startFont,new Color([,,]));
textSymbol.setOffset(,-);
map.graphics.add(new Graphic(evt.mapPoint,textSymbol));
}
map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));
if(inputPoints.length >=){
// 設定距離測量的參數
var lengthParams = new LengthsParameters();
lengthParams.distanceUnit = GeometryService.UNIT_METER;
lengthParams.calculationType = "preserveShape";
var p1 = inputPoints[inputPoints.length-];
var p2 = inputPoints[inputPoints.length-];
if(p1.x ===p2.x &&p1.y===p2.y){
return;
}
// z在兩點之間劃線将兩點連結起來
var polyline = new Polyline(map.spatialReference);
polyline.addPath([p1,p2]);
lengthParams.polylines=[polyline];
// 根據參數，動态的計算長度
geometryService.lengths(lengthParams,function(distance){
var _distance = number.format(distance.lengths[]/);
totleDistance+=parseFloat(_distance);//計算總長度
var beetwentDistances = _distance+"千米";
var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([,,]));
tdistance.setOffset(,-);
map.graphics.add(new Graphic(p2,tdistance));
if(totalGraphic){
map.graphics.remove(totalGraphic);
}
var total=number.format(totleDistance,{
pattern:"#.000"
});
// 設定總長度的顯示樣式，并添加到地圖上
var totalSymbol=new TextSymbol("總長度："+total+"千米",startFont,new Color([,,]));
totalSymbol.setOffset(,-);
totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));
});
}
}
}
// 添加圖形函數
function addToMap(evt) {
if(disFun||areaFun){
var geometry = evt.geometry;//繪制圖形的geometry
//将繪制的圖形添加到地圖上去
var symbol = null;
switch (geometry.type){
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([,,]),),
new Color([,,,]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([,,,]),);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([,,]),),
new Color([,,,]));
break;
case "extent":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([,,]),),
new Color([,,,]));
break;
}
map.graphics.add(new Graphic(geometry,symbol));
if(disFun){
inputPoints.splice(,inputPoints.length);//删除數組中的所有元素
totleDistance =;
totalGraphic = null;
}
else if(areaFun){
//設定面積和長度的參數
var areasAndLengthsParameters =new AreasAndLengthsParameters();
areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//設定距離機關
areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//設定面積機關
geometryService.simplify([geometry],function (simplifiedGeometries) {
areasAndLengthsParameters.polygons = simplifiedGeometries;
geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {
var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);
var areaResult = new TextSymbol(number.format(result.areas[],{
pattern:'#.000'
})+"平方公裡",font,new Color([,,]));
var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);
map.graphics.add(new Graphic(spoint,areaResult));//在地圖上顯示測量的面積
});
});
}
}
}
//清空函數
function clearAction() {
toolbar.deactivate();//撤銷地圖繪制功能
disFun = false;
areaFun = false;
map.enableScrollWheelZoom();
map.graphics.clear();
var graphicLayerIds = map.graphicsLayerIds;
var len = graphicLayerIds.length;
for(var i=; i<len;i++){
var gLayer = map.getLayer(graphicLayerIds[i]);
gLayer.clear();
}
}
});