1、主要用到的两个类
"esri/tasks/GeometryService" //用于计算面积和长度
"esri/widgets/Sketch/SketchViewModel" //地图上鼠标绘制graphic
2、核心代码
注意下面代码第一行,如果未配置本地字体,请把第一行注释了。
GeometryService换成自己可用的GeometryService。
esriConfig.fontsUrl = "http://localhost/ArcGIS_Font"; //配置使用本地字体文件,如果为配置,可以把该行注释
var geometryUrl = 'http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer'
var method;
var map = new Map({basemap: "streets"});
var view = new MapView({center: [-80, 35], container: "viewDiv", map: map, zoom: 3});
var graphicLyr=new GraphicsLayer({id:'lyr1'});
map.add(graphicLyr);
var sketch=new SketchViewModel({
layer:graphicLyr,
view:view
})
var defaultFont=new Font({
size:'12px',
weight:'bold'
});
var defaultMarkSymbol=new SimpleMarkerSymbol({
style:'circle',
color:'red',
size:'7px',
outline:{
color:[255,0,0],
width:1
}
});
var totalDis=0;
var totalLenGraphic;
sketch.on('create',function(evt){
if (method=='长度测量'){
handleLengthMeasure(evt);
} else if(method=='面积测量'){
handleAreaMeasure(evt);
}
});
var inputPt=[];
function handleLengthMeasure(evt){
if(evt.toolEventInfo&&evt.toolEventInfo.type=='vertex-add'){
var pt={
type:'point',
x:evt.toolEventInfo.added[0],
y:evt.toolEventInfo.added[1],
spatialReference:view.spatialReference
}
handleLengthPt(pt);
}
}
function handleLengthPt(pt){
inputPt.push(pt);
var textSymbol;
if (inputPt.length==1){
textSymbol=new TextSymbol({
text:'起点',
font:defaultFont,
color:[255,0,0],
xoffset:0,
yoffset:-20
})
graphicLyr.add(new Graphic({geometry:pt,symbol:textSymbol}));
}
graphicLyr.add(new Graphic({geometry:pt,symbol:defaultMarkSymbol}));
if(inputPt.length>=2){
var params=new LengthsParameters();
var geoservice=new GeometryService(geometryUrl);
params.distanceUnit=GeometryService.UNIT_METER;
params.calculationType='preserveShape';
var p1=inputPt[inputPt.length-2];
var p2=inputPt[inputPt.length-1];
var polyline=new Polyline({spatialReference:view.spatialReference});
polyline.addPath([[p1.x,p1.y],[p2.x,p2.y]]);
params.polylines=[polyline];
geoservice.lengths(params).then(function(distance){
var dis=parseFloat(number.format(distance.lengths[0],{pattern:'#.000'}));
totalDis+=dis;
var betweendis = dis+'米';
var distext=new TextSymbol({
text:betweendis,
font:defaultFont,
color:[255,0,0],
xoffset:40,
yoffset:-3
})
graphicLyr.add(new Graphic({geometry:p2,symbol:distext}));
if(totalLenGraphic){
graphicLyr.remove(totalLenGraphic);
}
var total = number.format(totalDis,{pattern:'#.000'});
var totalSymbol=new TextSymbol({
text:'总长度:'+total+'米',
font:defaultFont,
color:[255,0,0],
xoffset:40,
yoffset:-20
})
totalLenGraphic = new Graphic({geometry:p2,symbol:totalSymbol})
graphicLyr.add(totalLenGraphic);
});
}
}
function handleAreaMeasure(evt){
if(evt.state == 'complete'){
var geometry=evt.graphic.geometry;
var params = new AreasAndLengthsParameters();
var geoservice = new GeometryService({url:geometryUrl});
params.lengthUnit=GeometryService.UNIT_METER;
params.areaUnit = GeometryService.UNIT_SQUARE_METERS;
params.calculationType='preserveShape';
geoservice.simplify([geometry]).then(function(simplifiedGeo){
params.polygons = simplifiedGeo;
geoservice.areasAndLengths(params).then(function(result){
var font = new Font({
size:'18px',
})
var areaRes=new TextSymbol({
text:number.format(result.areas[0],{pattern:'#.000'})+"平方米",
font:font,
color:[255,0,0]
});
var pt=new Point({
x:geometry.centroid.x,
y:geometry.centroid.y,
spatialReference:view.spatialReference
});
graphicLyr.add(new Graphic({geometry:pt,symbol:areaRes}));
console.log(result);
})
})
}
}
document.querySelector("#btn1").addEventListener('click',function(){
method='长度测量';
sketch.create('polyline',{mode:'click'});
})
document.querySelector("#btn2").addEventListener('click',function(){
method='面积测量';
sketch.create('polygon',{mode:'click'});
})
3、页面效果
完整页面案例:https://download.csdn.net/download/shijie_nihao/11549269