arcgis|arcgis api for js 4.x学习笔记（2）绘制面(Draw)及面积计算(geodesicArea)
//本文对应Api 4.6版本
require([
'dojo/on',
'dojo/dom',
'esri/views/2d/draw/Draw',
'esri/Graphic',
'esri/geometry/geometryEngine',
'esri/geometry/Point',
'esri/geometry/Polyline',
'esri/geometry/Polygon',
'esri/symbols/TextSymbol',
'esri/layers/GraphicsLayer',
"esri/geometry/SpatialReference",
'dojo/domReady!'
],function(on,dom,Draw,Graphic,GeometryEngine,Point,Polyline,Polygon,TextSymbol,
GraphicsLayer,SpatialReference) {
var draw;
on(dom.byId("btnDrawPolygon"),"click",function(){
draw = new Draw({
view: view//view定义见https://blog.csdn.net/wangchaohpu/article/details/107487687
});
var action = draw.create("polygon");
//添加一个点的时候触发
action.on("vertex-add", function (evt) {
createPolygonGraphic(evt.vertices);
});
// Fires when the pointer moves over the view
action.on("cursor-update", function (evt) {
createPolygonGraphic(evt.vertices);
});
// 按ctrl+c撤销一个点的时候触发
action.on("vertex-remove", function (evt) {
createPolygonGraphic(evt.vertices);
});
//双击完成的时候触发
action.on("draw-complete", function (evt) {
createPolygonGraphic(evt.vertices);
});
})
function createPolygonGraphic(vertices){
view.graphics.removeAll();
var polygon = new Polygon({
rings: vertices,
spatialReference: view.spatialReference,//坐标系必须跟当前view的坐标系一致，否则添加不上
})
var graphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill", // autocasts as SimpleFillSymbol
color: [3, 255, 240, 0.1],
style: "solid",
outline: {// autocasts as SimpleLineSymbol
color: [255,116,3],
width: 2
}
}
});
view.graphics.add(graphic);
var polygon = new Polygon({
rings: vertices,
// spatialReference: view.spatialReference
spatialReference: new SpatialReference(4326)
})
//WGS84 (wkid:4326)及墨卡托坐标系用geodesicArea计算面积，其他坐标系用planarArea计算面积
// var area = GeometryEngine.planarArea(polygon);
var area = GeometryEngine.geodesicArea(polygon,'square-meters');
//将面积结果标注在图上
var center = polygon.centroid;
var pointcenter = new Point({
longitude:center.longitude,
latitude:center.latitude,
spatialReference: view.spatialReference//坐标系必须跟当前view的坐标系一致，否则添加不上
})
var unit="平方米";
var textSymbol = new TextSymbol({
type: "text",
color: "red",
haloColor: "black",
haloSize: "5px",
xoffset: '3pt',
yoffset: '3pt',
text:Math.abs(Math.round(area*100)/100)+unit,
font: {
size: 12,
family: "sans-serif",
weight: "bolder"
}
})
var textGraphics=new Graphic({
geometry:pointcenter,
symbol: textSymbol
});
view.graphics.add(textGraphics);
}})【arcgis|arcgis api for js 4.x学习笔记（2）绘制面(Draw)及面积计算(geodesicArea)】
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- whlie循环和for循环的应用
- ffmpeg源码分析01（结构体）
- 【WORKFOR】最真的自己
- 【译】Rails|【译】Rails 5.0正式发布（Action Cable，API模式等）
- R|R for data Science（六）(readr 进行数据导入)
- performSelectorOnMainThread:withObject:waitUntilDone:参数设置为NO或YES的区别
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- ElasticSearch6.6.0强大的JAVA|ElasticSearch6.6.0强大的JAVA API详解
- 前端开发|Vue2.x API 学习