-
Notifications
You must be signed in to change notification settings - Fork 5
/
MapStore.ts
144 lines (124 loc) · 5.54 KB
/
MapStore.ts
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import { action, makeObservable, observable } from 'mobx';
import RootStore from './RootStore';
import ArcGISMap from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import Sketch from '@arcgis/core/widgets/Sketch';
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import Graphic from '@arcgis/core/Graphic';
import Polygon from '@arcgis/core/geometry/Polygon';
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol';
export default class MapStore {
rootStore: RootStore;
map!: __esri.Map;
noFlyLayer!: __esri.GraphicsLayer;
sketchLayer!: __esri.GraphicsLayer;
sketch!: __esri.Sketch;
sketchState!: string;
constructor(rootStore: RootStore) {
// HINT: you can add additional observable properties to this class
// https://mobx.js.org/observable-state.html
makeObservable(this, { sketchState: observable, setSketchState: action });
this.rootStore = rootStore;
this.setSketchState('idle');
}
setSketchState(state: string) {
this.sketchState = state;
}
constructMap(container: string) {
this.sketchLayer = new GraphicsLayer();
this.noFlyLayer = new GraphicsLayer();
// Define a symbol
// https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html
const symbol = {
type: 'simple-fill',
color: [51, 51, 204, 0.2],
style: 'solid',
outline: {
color: 'white',
width: 2,
},
};
// Construct map graphic
// https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
this.noFlyLayer.add(
new Graphic({
geometry: new Polygon({
spatialReference: { wkid: 102100 },
rings: [
[
[-9278977.502393615, 5196972.662366206],
[-9278404.224681476, 5197240.191965203],
[-9274505.936238931, 5195673.232885358],
[-9275518.726863708, 5190055.1113064],
[-9278881.956108259, 5189061.429938688],
[-9280869.318843672, 5188660.135540191],
[-9282646.479751302, 5192481.986954449],
[-9278977.502393615, 5196972.662366206],
],
],
}),
symbol,
})
);
// Create the map and add the graphics layer
// https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html
this.map = new ArcGISMap({
basemap: 'streets-vector',
layers: [this.noFlyLayer, this.sketchLayer],
});
// Set the map view, including location and zoom level
// https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
const view = new MapView({
map: this.map,
container,
center: [-83.35447311401367, 42.23982914405], // Longitude, latitude
zoom: 11,
});
// When the view finishes loading, add the sketch widget
// https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html
view.when(() => {
this.sketch = new Sketch({
layer: this.sketchLayer,
view,
visibleElements: {
createTools: { point: false, polygon: false, polyline: false },
selectionTools: { 'lasso-selection': false, 'rectangle-selection': false },
settingsMenu: false,
undoRedoMenu: false,
},
creationMode: 'update', // graphic will be selected as soon as it is created
});
view.ui.add(this.sketch, 'top-right');
this.sketch.on('create', this.sketchCreate);
});
}
sketchCreate = async (event: __esri.SketchCreateEvent) => {
this.setSketchState(event.state);
if (event.state !== 'complete') return;
// THERE ARE 3 STEPS TO SATISFYING THE BASE REQUIREMENTS FOR THE CHALLENGE
// STEP 1: determine if the sketch's graphic intersects with the graphic in the noFlyLayer
// STEP 2: if it intersects, compute the area of the intersection, and display it
// STEP 3: create a new graphic with any possible intersection, and display it on the map
// HINT: the event has a graphic property which has a geometry property
// https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Geometry.html
// HINT: you can use getItemAt to access one of the graphics of the noFlyLayer.
// https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Collection.html#getItemAt
// https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
// HINT: you can use the geometry engine to calculate the intersection of two geometries
// https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngine.html#intersect
// HINT: you can use the geometry engine to calculate area of a polygon
// https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngine.html#geodesicArea
// HINT: you can create a graphic using a Graphic object
// https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#symbol
// HINT: you can provide a symbol when creating this graphic to change its appearance
// https://developers.arcgis.com/javascript/latest/sample-code/playground/live/index.html#/config=symbols/2d/SimpleFillSymbol.json
// HINT: you can add a new Graphic to this.sketchLayer to display it on the map
// https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html#add
};
cleanup() {
// Todo, remove any listeners
this.sketch.destroy();
this.setSketchState('idle');
}
}