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 | 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 CircleDrawer extends Drawer { /** * Draw a circle on a map. * * @param map The MapComponent on which the circle must be drawn. * @param texture The texture which must be used to draw the circle. */ async draw( map: MapComponent, texture: DrawingTexture ) { this.clearListeners(); const [Draw] = await loadModules(['esri/views/2d/draw/Draw']); const draw: __esri.Draw = new Draw({ view: map.mapView }); const drawAction = draw.create('circle', {}); this.drawActionListeners.push( drawAction.on( 'vertex-add', async (event) => await this.createCircle(event, map, texture) ), drawAction.on( 'cursor-update', async (event) => await this.createCircle(event, map, texture) ), drawAction.on( 'draw-complete', async (event) => { await this.createCircle(event, map, texture); this.currentGraphic = null; this.draw(map, texture); } ) ); } /** * Generate a circle for the vertices captured by a DrawActionEvent and * add it to the drawingsLayer of a MapComponent. * * @param event The DrawActionEvent which triggered the circle's drawing. * @param map The MapComponent on which the circle must be drawn. * @param texture The texture to use to draw the circle. */ private async createCircle( event: DrawActionEvent, map: MapComponent, texture: DrawingTexture ) { const [ Graphic, Circle, SimpleFillSymbol ] = await loadModules([ 'esri/Graphic', 'esri/geometry/Circle', 'esri/symbols/SimpleFillSymbol' ]); const drawingSymbol: __esri.SimpleFillSymbol = new SimpleFillSymbol({ color: [143, 143, 143, 0.75] }); if (this.currentGraphic != null) { map.drawingsLayer.remove(this.currentGraphic); } function computeRadius(vertices: number[][]) { const width = Math.abs(vertices[0][0] - vertices[1][0]); const height = Math.abs(vertices[0][1] - vertices[1][1]); return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); } const circle = new Circle({ spatialReference: map.mapView.spatialReference.clone(), center: event.vertices[0], radius: event.vertices.length < 2 ? null : computeRadius(event.vertices) * 111500 }); circle.spatialReference = map.mapView.spatialReference.clone(); this.currentGraphic = new Graphic({ geometry: circle, symbol: drawingSymbol, visible: true }); 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); } } } |