draw() {
this.view.container
.querySelector(".esri-view-root > .esri-view-surface")
.setAttribute("data-cursor", "crosshair");//设置鼠标的样式变为十字架
let graphicslayer = new this.esriMudules.GraphicsLayer();//创建一个图形图层来存储画出来的图层。也可以直接将画出来的图层加载到view中，不用图层（使用下面注释掉的代码）
this.map.add(graphicslayer);
let activeGraphic = null;//存储当前正在画的图形
let draw = this.esriMudules.Draw({ view: this.view });//创建画图对象
let drawAction = draw.create("polygon", { mode: "click" });//定义画的几何类型和画图方式
drawAction.on(//定义画图触发的事件
[
"vertex-add", //单击鼠标添加点
"vertex-remove",
"cursor-update", //鼠标移动的事件
"redo",
"undo",
"draw-complete",//双击鼠标完成画图时触发事件
],
(evt) => {
//console.log(evt.type);
//当鼠标移动和点击添加点的时候，判断画的点等于两个时显示线，大于两个时显示面
if (evt.type == "vertex-add" || evt.type == "cursor-update") {
if (evt.vertices.length < 2) {
return;
} else if (evt.vertices.length == 2) {
if (activeGraphic) {//需要先移除之前画的然后在加入现在画的
//this.view.graphics.remove(activeGraphic);
graphicslayer.graphics.remove(activeGraphic);
}
let polyline = this.esriMudules.Polyline({
paths: [evt.vertices],
spatialReference: this.view.spatialReference,
});
activeGraphic = new this.esriMudules.Graphic({
geometry: polyline,
symbol: {
type: "simple-line",
color: [78, 201, 162],
"2px",
style: "solid",
},
});
//this.view.graphics.add(activeGraphic);
graphicslayer.graphics.add(activeGraphic);
} else {
if (activeGraphic) {
//this.view.graphics.remove(activeGraphic);
graphicslayer.graphics.remove(activeGraphic);
}
let ring = [...evt.vertices, evt.vertices[0]];//闭合环
let polygonGeometry = new this.esriMudules.Polygon({
rings: [ring],
spatialReference: this.view.spatialReference,
});
// 将逆时针转到顺时针,是为了解决arcgisapi for js逆时针不填充的问题
if (!polygonGeometry.isClockwise(ring)) {
for (
let from = 1, to = ring.length - 2;
from < to;
++from, --to
) {
let c = ring[from];
ring[from] = ring[to];
ring[to] = c;
}
polygonGeometry = new this.esriMudules.Polygon({
rings: [ring],
spatialReference: this.view.spatialReference,
});
}
// 避免自交
if (polygonGeometry.isSelfIntersecting) {
graphicslayer.graphics.add(activeGraphic);
return;
}
activeGraphic = new this.esriMudules.Graphic({
geometry: polygonGeometry,
symbol: {
type: "simple-fill",
color: [78, 201, 162, 0.3],
style: "solid",
outline: {
color: [255, 255, 255, 0.5],
"2px",
},
},
});
//this.view.graphics.add(activeGraphic);
graphicslayer.graphics.add(activeGraphic);
}
graphicslayer.add(this.activeGraphic);
}
if (evt.type == "draw-complete") {//完成画图后获取画的图层，并将鼠标变回为箭头
console.log(evt.vertices);
this.view.container
.querySelector(".esri-view-root > .esri-view-surface")
.setAttribute("data-cursor", "default");
}
}
);
},