几何处理-绘图（点，多点，线，箭头线，面，徒手线，徒手面，圆，矩形）

效果图

几何处理结合api，每一种几乎改动不大。

源码

<template>
  <div id="home">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>Map</el-breadcrumb-item>
      <el-breadcrumb-item>Geometry</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="map"></div>
    <el-row style="position: absolute; top: 100px; left: 300px; width: 1200px;">
      <el-button plain>简单点</el-button>
      <el-button plain>图片点</el-button>
      <el-button plain>基本线</el-button>
      <el-button plain>箭头线</el-button>
      <el-button plain>面样式1</el-button>
      <el-button plain>面样式2</el-button>
      <el-button plain>绘制多点</el-button>
      <el-button plain>自由线</el-button>
      <el-button plain>自由面</el-button>
      <el-button plain>圆</el-button>
      <el-button plain>矩形</el-button>
    </el-row>
  </div>
</template>

<script>
import * as esriLoader from 'esri-loader'

export default {
  data() {
    return {}
  },
  mounted() {
    esriLoader.setDefaultOptions({ version: '3.31' })
    this.createMap()
  },
  methods: {
    createMap: function () {
      esriLoader.loadModules(['esri/map',
        'dojo/dom', 'dojo/on',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'esri/geometry/Point',
        'esri/geometry/Polyline',
        'esri/graphic',
        'esri/Color',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/symbols/SimpleLineSymbol',
        'esri/symbols/SimpleFillSymbol',
        'esri/symbols/PictureMarkerSymbol',
        'esri/renderers/SimpleRenderer',
        'dojo/query',
        'esri/toolbars/draw',
        'esri/SpatialReference',
        'dojo/domReady!'], { css: true })
        .then(([Map, dom, on, ArcGISDynamicMapServiceLayer, Point, Polyline, Graphic, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, SimpleRenderer, query, Draw, SpatialReferenc]) => {
          var map = new Map('map', {
            center: [108.934518, 34.35333],
            zoom: 7,
            logo: false,
            basemap: 'oceans'
          })
          map.on('load', () => {
            var toolbar = new Draw(map, { showTooltips: true })
            var smpPoint = true
            var smpLine = true
            var smpPloy = true

            query('button').on('click', function (event) {
              var value = this.innerHTML
              console.log(value)
              value = value.replace(new RegExp('^\\' + '<!----><!----><span>' + '+', 'g'), '')
              value = value.replace(new RegExp('\\' + '</span>' + '+$', 'g'), '')
              console.log(value)
              switch (value) {
                case '简单点': {
                  toolbar.activate(Draw.POINT, {
                    showTooltips: true
                  })
                  smpPoint = true
                  break
                }
                case '图片点': {
                  toolbar.activate(Draw.POINT, {
                    showTooltips: true
                  })
                  smpPoint = false
                  break
                }
                case '基本线': {
                  toolbar.activate(Draw.POLYLINE, {
                    showTooltips: true
                  })
                  smpLine = true
                  break
                }
                case '箭头线': {
                  toolbar.activate(Draw.POLYLINE, {
                    showTooltips: true
                  })
                  smpLine = false
                  break
                }
                case '面样式1': {
                  toolbar.activate(Draw.POLYGON, {
                    showTooltips: true
                  })
                  smpPloy = true
                  break
                }
                case '面样式2': {
                  toolbar.activate(Draw.POLYGON, {
                    showTooltips: true
                  })
                  smpPloy = false
                  break
                }
                case '绘制多点': {
                  toolbar.activate(Draw.MULTI_POINT, {
                    showTooltips: true
                  })
                  break
                }
                case '自由线': {
                  toolbar.activate(Draw.FREEHAND_POLYLINE, {
                    showTooltips: true
                  })
                  break
                }
                case '自由面': {
                  toolbar.activate(Draw.FREEHAND_POLYGON, {
                    showTooltips: true
                  })
                  break
                }
                case '圆': {
                  toolbar.activate(Draw.CIRCLE, {
                    showTooltips: true
                  })
                  break
                }
                case '矩形': {
                  toolbar.activate(Draw.RECTANGLE, {
                    showTooltips: true
                  })
                  break
                }
              }
              // var markerSym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,
              //   new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              //     new Color([87, 181, 74]), 1),
              //   new Color([255, 0, 0, 0.5]))

              var lineSymbol1 = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 25, 0]), 1)
              var lineSymbol2 = new SimpleLineSymbol(SimpleLineSymbol.STYLE_LONGDASHDOT, new Color([225, 0, 0]), 1)

              var outLineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOTDOT, new Color([235, 235, 5]), 3)
             
              var marker = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, lineSymbol1, new Color([215, 224, 203]))
             var fill1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outLineSymbol, new Color([48, 190, 144, 0.5]))
              var fill2 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_DIAGONAL_CROSS, lineSymbol1, new Color([48, 190, 144]))

              var pictureMarkerSymbol = new PictureMarkerSymbol('https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico', 20, 20)

              lineSymbol2.setMarker({
                style: 'arrow',
                placement: 'end'
              })

              on(toolbar, 'draw-complete', function (result) {
                var geometry = result.geometry
                var type = geometry.type
                var graphic
                switch (type) {
                  case 'point':
                    if (smpPoint) graphic = new Graphic(geometry, marker)
                    else graphic = new Graphic(geometry, pictureMarkerSymbol)
                    break
                  case 'polyline':
                    if (smpLine) graphic = new Graphic(geometry, lineSymbol1)
                    else graphic = new Graphic(geometry, lineSymbol2)
                    break
                  case 'polygon':
                    if (smpPloy) graphic = new Graphic(geometry, fill1)
                    else graphic = new Graphic(geometry, fill2)
                    break
                  case 'multipoint':
                    graphic = new Graphic(geometry, marker)
                    break
                }
                console.log(map.graphics.renderer)
                map.graphics.add(graphic)
                toolbar.deactivate()
              })
            })
          })
        })
    }
  }
}
</script>