YULIN

Arcgis Draw 绘制图形

记录一下draw的绘图方法,这个编译器对代码支持不是很好,格式先这样吧,后面有时间换个编译器重新排版。
HTML+JS

<div id="query-area-button" class="esri-widget esri-widget--button esri-interactive" title="多边形选区查询">
<span [ngClass]="!showPolyline?'esri-icon-polygon':'esri-icon-close'"></span>

 // 绑定面按钮绘制事件
  const drawAreaButton = document.getElementById('query-area-button');
  drawAreaButton.onclick = () => {
    if (that.showPolyline) {
      that.stateService.map.remove(that.stateService.map.findLayerById('polygon'));
      that.showAreaDataTree = false;
      that.showPolyline = false;
    } else {
      this.stateService.activeTool$.next('query-area-button')
      that.enableCreateArea(draw, that.stateService.view);
    }
  };

// ==================绘图方法===========================

/**

  • 开始监听画线

*/
enableCreateLine(draw, view): void {

const action = draw.create('polyline', {
  mode: 'click'
});
let graphicsLayer = view.map.findLayerById('polyline') as GraphicsLayer;
if (!graphicsLayer) {
  graphicsLayer = new GraphicsLayer({
    title: 'polyline',
    id: 'polyline',
    listMode: 'hide',
  });
  view.map.add(graphicsLayer);
}
// 获取焦点
view.focus();
// 顶点添加事件
action.on('vertex-add', (event) => {
  this.createPolyline(event, graphicsLayer);
});
// 顶点移除事件
action.on('vertex-remove', (event) => {
  this.createPolyline(event, graphicsLayer);
});
// 鼠标移动事件
action.on('cursor-update', (event) => {
  this.createPolyline(event, graphicsLayer);
});
// 绘制完成事件
action.on('draw-complete', (event) => {
  this.createPolyline(event, graphicsLayer);
});

}

/**

  • 开始监听画面 绘制多边形

*/
enableCreateArea(draw, view): void {

const action = draw.create('polygon', {
  mode: 'click'// 点击方式加点
});
let graphicsLayer = view.map.findLayerById('polygon') as GraphicsLayer;
if (!graphicsLayer) {
  graphicsLayer = new GraphicsLayer({
    title: '多边形区域查询',
    id: 'polygon',
    listMode: 'hide',
  });
  view.map.add(graphicsLayer);
}
// 获取焦点
view.focus();
// 顶点添加事件
action.on('vertex-add', (event) => {
  this.createPolygon(event, graphicsLayer);
});
// 顶点移除事件
action.on('vertex-remove', (event) => {
  this.createPolygon(event, graphicsLayer);
});
// 鼠标移动事件
action.on('cursor-update', (event) => {
  this.createPolygon(event, graphicsLayer);
});
// 绘制完成事件
action.on('draw-complete', (event) => {
  this.showPolyline = true;
  this.createPolygon(event, graphicsLayer);
  console.log('区域绘图完成,准备查询。', this.AreaGeometry);
  this.handleIdentify(this.AreaGeometry);
});

}

/**

  • 开始监听画点

*/
enableCreatePoint(draw, view): void {

const action = draw.create('point', {
  mode: 'click'// 点击方式加点
});
let graphicsLayer = view.map.findLayerById('Point') as GraphicsLayer;
if (!graphicsLayer) {
  graphicsLayer = new GraphicsLayer({
    title: 'Point',
    id: 'Point',
    listMode: 'hide',
  });
  view.map.add(graphicsLayer);
}
// 获取焦点
view.focus();
// 顶点添加事件
action.on('vertex-add', (event) => {
  this.createPoint(event, graphicsLayer);
});
// 顶点移除事件
action.on('vertex-remove', (event) => {
  this.createPoint(event, graphicsLayer);
});
// 绘制完成事件
action.on('draw-complete', (event) => {
  this.createPoint(event, graphicsLayer);
});

}

/**

  • 开始监听画圆

*/
enableCreateCircle(draw, view): void {

const action = draw.create('circle', {
  mode: 'click'// 点击方式加点
});
let graphicsLayer = view.map.findLayerById('Circle') as GraphicsLayer;
if (!graphicsLayer) {
  graphicsLayer = new GraphicsLayer({
    title: '圆形选区查询',
    id: 'Circle',
    listMode: 'hide',
  });
  view.map.add(graphicsLayer);
}
// 获取焦点
view.focus();
// 顶点移除事件
action.on('vertex-remove', (event) => {
  this.createCircle(event, graphicsLayer);
});
// 鼠标移动事件
action.on('cursor-update', (event) => {
  this.createCircle(event, graphicsLayer);
});
// 绘制完成事件
action.on('draw-complete', (event) => {
  this.showCircle = true;
  this.createCircle(event, graphicsLayer);
  console.log('圆形绘图完成,准备查询。', this.CircleGeometry);
  this.handleIdentify(this.CircleGeometry);
});

}

/**

  • 开始监听画矩形

*/
enableCreateRectangle(draw, view): void {

const action = draw.create('rectangle', {
  mode: 'click'// 点击方式加点
});
let graphicsLayer = view.map.findLayerById('rectangle') as GraphicsLayer;
if (!graphicsLayer) {
  graphicsLayer = new GraphicsLayer({
    title: '矩形选区查询',
    id: 'rectangle',
    listMode: 'hide',
  });
  view.map.add(graphicsLayer);
}
// 获取焦点
view.focus();
// 顶点移除事件
action.on('vertex-remove', (event) => {
  this.createRectangle(event, graphicsLayer);
});
// 鼠标移动事件
action.on('cursor-update', (event) => {
  this.createRectangle(event, graphicsLayer);
});
// 绘制完成事件
action.on('draw-complete', (event) => {
  this.showRectangle = true;
  this.createRectangle(event, graphicsLayer);
  console.log('长方形绘图完成,准备查询。', this.RectangleGeometry);
  this.handleIdentify(this.RectangleGeometry);
});

}

/**

  • 根据点坐标生成新的线

*/
createPolyline(event, graphicsLayer): void {

const that = this;
// 获取所有顶点
const vertices = event.vertices;
// 清除之前绘制
graphicsLayer.removeAll();
// 生成绘制的图形
const symbolData = {
  type: 'simple-line',
  color: [4, 90, 141],
  width: 4,
  cap: 'round',
  join: 'round'
};
const graphic = new Graphic({
  geometry: new Polyline({
    paths: vertices,
    spatialReference: that.stateService.view.spatialReference
  }),
  symbol: symbolData
});
// 将绘制的图形添加到view
graphicsLayer.add(graphic);

}

/**

  • 根据点坐标生成新的线

*/
createPolygon(event, graphicsLayer): void {

const that = this;
// 获取所有顶点
const vertices = event.vertices;
// 清除之前绘制
graphicsLayer.removeAll();
const symbolData = {
  type: 'simple-fill',  // autocasts as new SimpleFillSymbol()
  color: [0, 0, 0, 0.1],
  style: 'solid',
  outline: {
    color: 'black',
    width: 1,
    style: 'dash'
  }
};
// 生成绘制的图形
const graphic = new Graphic({
  geometry: new Polygon({
    hasZ: false,
    hasM: false,
    rings: [vertices],
    spatialReference: that.stateService.view.spatialReference
  }),
  symbol: symbolData
});
this.AreaGeometry = new Polygon({
  hasZ: false,
  hasM: false,
  rings: [vertices],
  spatialReference: that.stateService.view.spatialReference
});
// 将绘制的图形添加到view
graphicsLayer.add(graphic);

}

/**

  • 根据点坐标生成新的线

*/
createPoint(event, graphicsLayer): void {

const that = this;
// 获取所有顶点
const coordinates = event.coordinates;
const symbolData = {
  type: 'simple-marker',  // autocasts as new SimpleMarkerSymbol()
  style: 'square',
  color: 'blue',
  size: '8px',  // pixels
  outline: {  // autocasts as new SimpleLineSymbol()
    color: [255, 255, 0],
    width: 3  // points
  }
};
// 生成绘制的图形
const graphic = new Graphic({
  geometry: new Point({
    hasZ: false,
    hasM: false,
    x: coordinates[0],
    y: coordinates[1],
    spatialReference: that.stateService.view.spatialReference
  }),
  symbol: symbolData
});
// 将绘制的图形添加到view
graphicsLayer.add(graphic);

}

/**

  • 根据点坐标生成新的线

*/
createCircle(event, graphicsLayer): void {

// 获取所有顶点
const vertices = event.vertices;
// 少于一个点无法展示圆
if (vertices.length < 2) {
  return;
}

// 清除之前绘制
graphicsLayer.removeAll();
// 生成绘制的图形,两点画圆
const center = new Point({
  hasZ: false,
  hasM: false,
  x: vertices[0][0],
  y: vertices[0][1],
  spatialReference: this.stateService.view.spatialReference
});
const dis = center.distance(new Point({
  hasZ: false,
  hasM: false,
  x: vertices[1][0],
  y: vertices[1][1],
  spatialReference: this.stateService.view.spatialReference
}));
const symbolData = {
  type: 'simple-fill',  // autocasts as new SimpleFillSymbol()
  color: [0, 0, 0, 0.1],
  style: 'solid',
  outline: {  // autocasts as new SimpleLineSymbol()
    color: 'black',
    width: 1,
    style: 'dash'
  }
};
const graphic = new Graphic({
  geometry: new Circle({
    hasZ: false,
    hasM: false,
    center,
    radius: dis,
    spatialReference: this.stateService.view.spatialReference
  }),
  symbol: symbolData
});
this.CircleGeometry = new Circle({
  hasZ: false,
  hasM: false,
  center,
  radius: dis,
  spatialReference: this.stateService.view.spatialReference
});
// 将绘制的图形添加到view
graphicsLayer.add(graphic);

}

createRectangle(event, graphicsLayer): void {

// 获取所有顶点
const vertices = event.vertices;
// 两点画矩形
if (vertices.length < 2) {
  return;
}
const rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
// 清除之前绘制
graphicsLayer.removeAll();
const symbolData = {
  type: 'simple-fill',  // autocasts as new SimpleFillSymbol()
  color: [0, 0, 0, 0.1],
  style: 'solid',
  outline: {
    color: 'black',
    width: 1,
    style: 'dash'
  }
};
// 生成绘制的图形
const graphic = new Graphic({
  geometry: new Polygon({
    hasZ: false,
    hasM: false,
    rings: [rings],
    spatialReference: this.stateService.view.spatialReference
  }),
  symbol: symbolData
});
// 保存geometry 用于查询数据
this.RectangleGeometry = new Polygon({
  hasZ: false,
  hasM: false,
  rings: [rings],
  spatialReference: this.stateService.view.spatialReference
});
// 将绘制的图形添加到view
graphicsLayer.add(graphic);

}

close(): void {

this.dataSource.data = [];
this.showAreaDataTree = false;

}

remove(): void {

this.stateService.view.graphics.removeAll(); // 清楚之前的绘制

}