一、距離測量和面積測量是GIS必備的功能效果圖如下：
二、量算函數（核心）
//量算函數
function mapClick(evt) {
if(disFun){
inputPoints.push(evt.mapPoint);
var textSymbol;
if(inputPoints.length ===1){
textSymbol = new TextSymbol("起點",startFont,new Color([204,102,51]));
textSymbol.setOffset(0,-20);
map.graphics.add(new Graphic(evt.mapPoint,textSymbol));
}
map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));
if(inputPoints.length >=2){
// 設置距離測量的參數
var lengthParams = new LengthsParameters();
lengthParams.distanceUnit = GeometryService.UNIT_METER;
lengthParams.calculationType = "preserveShape";
var p1 = inputPoints[inputPoints.length-2];
var p2 = inputPoints[inputPoints.length-1];
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[0]/1000);
totleDistance+=parseFloat(_distance);//計算總長度
var beetwentDistances = _distance+"千米";
var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));
tdistance.setOffset(40,-3);
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([204,102,51]));
totalSymbol.setOffset(40,-15);
totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));
});
}
}
}三、注冊事件
//給按鈕添加綁定事件
$(".functionWrap").click(function () {
var value=$(this).attr("name")
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(([110, 38.5]), 5);
break;
case "距離測量":
distanceMeasure();
break;
case "面積測量":
areaMeasure();
break;
case "清除標記":
clearAction();
break;
}
});
四、添加圖形函數
// 添加圖形函數
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,10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),
new Color([0,255,0,0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.8]),2);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
case "extent":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
}
map.graphics.add(new Graphic(geometry,symbol));
if(disFun){
inputPoints.splice(0,inputPoints.length);//刪除數組中的所有元素
totleDistance =0.0;
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[0],{
pattern:'#.000'
})+"平方公里",font,new Color([204,102,51]));
var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);
map.graphics.add(new Graphic(spoint,areaResult));//在地圖上顯示測量的面積
});
});
}
}
}五、點擊下載完整代碼