Arcgis Draw 绘制图形

记录一下draw的绘图方法 HTML+JS

代码保存过程中格式化出现了问题，手动恢复格式后可能会出现不对的地方，切记不可直接复制粘贴。更多的是参考思路。

// 绑定面按钮绘制事件
  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',
      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',
    };

    // 生成绘制的图形 
    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',
      color: [0, 0, 0, 0.1], style: 'solid',
      outline: {
        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', 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(); // 清楚之前的绘制 }
  };