Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 1x 1x 1x 1x | import { loadModules } from 'esri-loader'; import { Drawer } from './drawer'; import { MapComponent } from '../map.component'; import { DrawingTexture, DrawActionEvent, getDefaultOutline, getDrawingSymbol } from './utils'; export class PolygonDrawer extends Drawer { /** * Draw a polygon on a map. * * @param map The MapComponent on which the polygon must be drawn. * @param texture The texture which must be used to draw the polygon. */ async draw( map: MapComponent, texture: DrawingTexture ) { const [Draw] = await loadModules(['esri/views/2d/draw/Draw']); this.clearListeners(); const draw: __esri.Draw = new Draw({ view: map.mapView }); const drawAction = draw.create('polygon', {}); this.drawActionListeners.push( drawAction.on( 'vertex-add', async (event) => await this.createPolygon(event, map, texture) ), drawAction.on( 'vertex-remove', async (event) => await this.createPolygon(event, map, texture) ), drawAction.on( 'cursor-update', async (event) => await this.createPolygon(event, map, texture) ), drawAction.on( 'draw-complete', async (event) => { await this.createPolygon(event, map, texture); this.currentGraphic = null; this.draw(map, texture); } ), ); } /** * Generate a poylgon for the vertices captured by a DrawActionEvent and * add it to the drawingsLayer of a MapComponent. * * @param event The DrawActionEvent which triggered the polygon's drawing. * @param map The MapComponent on which the polygon must be drawn. * @param texture The texture to use to draw the polygon. */ private async createPolygon( event: DrawActionEvent, map: MapComponent, texture: DrawingTexture ) { const [ Graphic, Polygon, Polyline, SimpleFillSymbol ] = await loadModules([ 'esri/Graphic', 'esri/geometry/Polygon', 'esri/geometry/Polyline', 'esri/symbols/SimpleFillSymbol' ]); const drawingSymbol: __esri.SimpleFillSymbol = new SimpleFillSymbol({ color: [143, 143, 143, 0.75] }); if (this.currentGraphic != null) { map.drawingsLayer.remove(this.currentGraphic); } if (Array(event.vertices).length === 2) { const polyline: __esri.Polyline = new Polyline({ spatialReference: map.mapView.spatialReference.clone(), paths: [Array(event.vertices)] }); const lineSymbol = await getDefaultOutline(); this.currentGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol }); } else { const polygon: __esri.Polygon = new Polygon({ spatialReference: map.mapView.spatialReference.clone(), rings: event.vertices }); this.currentGraphic = new Graphic({ geometry: polygon, symbol: drawingSymbol, }); if (this.currentGraphic != null) { if (event.type === 'cursor-update') { (this.currentGraphic.symbol as __esri.FillSymbol).outline = await getDefaultOutline(); } else if (event.type === 'draw-complete') { this.currentGraphic.symbol = await getDrawingSymbol(texture); // (this.currentGraphic.symbol as __esri.FillSymbol).outline = {} as __esri.SimpleLineSymbol; } map.drawingsLayer.add(this.currentGraphic); } } } } |