Arcgis for Js之GeometryService實現測量距離和麵積
阿新 • • 發佈:2019-02-20
距離和麵積的測量時GIS常見的功能,在本節,講述的是通過GeometryService實現測量面積和距離。先看看實現後的效果:
距離 面積
首先,進行配置:
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters. //If this null or not available the project and lengths operation will not work. Otherwise it will do a http post to the proxy. esriConfig.defaults.io.proxyUrl = "/proxy"; esriConfig.defaults.io.alwaysUseProxy = false;
接著,定義GeometryService和繪圖工具:
var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var measureToolbar = new esri.toolbars.Draw(map);
接下來,繪圖結束後將所繪製圖形新增到地圖上面,並返回測量結果,那麼增加measureToolbar的draw-end事件:
根據geometry的型別,增加GeometryService的lengths-complete或者areas-and-lengths-complete事件:measureToolbar.on("draw-end",showMeasureResults); /** * 顯示測量結果 * @param evt */ var showPt=null; function showMeasureResults(evt){ measureToolbar.deactivate(); map.setMapCursor("default"); var geometry = evt.geometry; switch (geometry.type) { case "polyline":{ var length = geometry.paths[0].length; showPt = new Point(geometry.paths[0][length-1],map.spatialReference); var lengthParams = new LengthsParameters(); lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER; lengthParams.polylines = [geometry]; gsvc.lengths(lengthParams); break; } case "polygon":{ showPt = new Point(geometry.rings[0][0],map.spatialReference); var areasAndLengthParams = new AreasAndLengthsParameters(); areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER; areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS; gsvc.simplify([geometry], function(simplifiedGeometries) { areasAndLengthParams.polygons = simplifiedGeometries; gsvc.areasAndLengths(areasAndLengthParams); }); break; } } var graphic = new Graphic(geometry, getGeometrySymbol(geometry.type)); map.graphics.add(graphic); }
最後,將返回的結果顯示在地圖上:gsvc.on("lengths-complete",outputLength); function outputLength(evtObj){ var result = evtObj.result; showmeasureInfo(showPt, result.lengths[0].toFixed(3), "千米"); }; gsvc.on("areas-and-lengths-complete",outputAreaAndLength); function outputAreaAndLength(evtObj){ var result = evtObj.result; showmeasureInfo(showPt, result.areas[0].toFixed(3), "平方千米"); };
/**
* 顯示測量結果
* @param showPnt
* @param data
* @param unit
*/
function measureInfo(showPnt,data,unit){
var measureDiv=$("#measure");
var isShow = false;
var screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
isShow = true;
measureDiv.css("z-index","999");
if(unit==="千米"){
measureDiv.css("width","90px");
}
else{
measureDiv.css("width","130px");
}
$("#result").html(data+unit);
$("#infoclose").click(function(){
map.graphics.clear();
measureDiv.css("display","none");
isShow = false;
});
map.on("pan-start", function(){
measureDiv.css("display","none");
});
map.on("pan-end", function(panend){
if(isShow == true){
screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
}
});
map.on("zoom-start", function(){
measureDiv.css("display","none");
});
map.on("zoom-end", function(){
if(isShow == true){
screenPnt=map.toScreen(showPnt);
measureDiv.css("left",screenPnt.x+"px");
measureDiv.css("top",screenPnt.y+"px");
measureDiv.css("position","absolute");
measureDiv.css("height","20px");
measureDiv.css("display","block");
}
});
};
結果的顯示我是通過一個div來顯示的,並且做了縮放和地圖移動的處理。