Skip to content

Commit 43f20b9

Browse files
HaudinFlorenceHaudinFlorence
committed
Refactor the code.
1 parent ddaa088 commit 43f20b9

File tree

3 files changed

+199
-96
lines changed

3 files changed

+199
-96
lines changed

‎examples/earthquakes.jGIS‎

Lines changed: 48 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{
22
"layerTree": [
33
"8de7c2c0-6024-4716-b542-031a89fb87f9",
4-
"3e21d680-406f-4099-bd9e-3a4edb9a2c8b"
4+
"3e21d680-406f-4099-bd9e-3a4edb9a2c8b",
5+
"5ff49984-5480-4cd4-aabd-3a43186350ba",
6+
"f44d7a8c-2d45-484b-89e3-e59edea8f988"
57
],
68
"layers": {
79
"3e21d680-406f-4099-bd9e-3a4edb9a2c8b": {
@@ -29,32 +31,60 @@
2931
"type": "VectorLayer",
3032
"visible": true
3133
},
34+
"5ff49984-5480-4cd4-aabd-3a43186350ba": {
35+
"name": "Editable GeoJSON Layer 1",
36+
"parameters": {
37+
"opacity": 1.0,
38+
"source": "e5b8b9db-22b3-4439-8db3-59da882636ac"
39+
},
40+
"type": "VectorLayer",
41+
"visible": true
42+
},
3243
"8de7c2c0-6024-4716-b542-031a89fb87f9": {
3344
"name": "OpenStreetMap.Mapnik Layer",
3445
"parameters": {
3546
"source": "b2ea427a-a51b-43ad-ae72-02cd900736d5"
3647
},
3748
"type": "RasterLayer",
3849
"visible": true
50+
},
51+
"f44d7a8c-2d45-484b-89e3-e59edea8f988": {
52+
"name": "Editable GeoJSON Layer 2",
53+
"parameters": {
54+
"opacity": 1.0,
55+
"source": "210844ec-68e3-49d5-afd3-bc9bd872c695"
56+
},
57+
"type": "VectorLayer",
58+
"visible": true
3959
}
4060
},
4161
"metadata": {},
4262
"options": {
4363
"bearing": 0.0,
4464
"extent": [
45-
-15808389.545988183,
46-
-6461894.596411711,
47-
-846988.1649800241,
48-
14932662.897352839
65+
-16434055.989266738,
66+
-3411504.4661820857,
67+
-2212097.8396098875,
68+
14828095.240483545
4969
],
50-
"latitude": 35.52446437432016,
51-
"longitude": -74.80890180273175,
70+
"latitude": 45.54854082519543,
71+
"longitude": -83.75062487261803,
5272
"pitch": 0.0,
5373
"projection": "EPSG:3857",
5474
"zoom": 2.6670105136699993
5575
},
5676
"schemaVersion": "0.5.0",
5777
"sources": {
78+
"210844ec-68e3-49d5-afd3-bc9bd872c695": {
79+
"name": "Editable GeoJSON Layer 2 Source",
80+
"parameters": {
81+
"data": {
82+
"features": [],
83+
"type": "FeatureCollection"
84+
}
85+
},
86+
"type": "GeoJSONSource"
87+
},
5888
"348d85fa-3a71-447f-8a64-e283ec47cc7c": {
5989
"name": "Custom GeoJSON Layer Source",
6090
"parameters": {
@@ -73,6 +103,16 @@
73103
"urlParameters": {}
74104
},
75105
"type": "RasterSource"
106+
},
107+
"e5b8b9db-22b3-4439-8db3-59da882636ac": {
108+
"name": "Custom GeoJSON Layer Source",
109+
"parameters": {
110+
"data": {
111+
"features": [],
112+
"type": "FeatureCollection"
113+
}
114+
},
115+
"type": "GeoJSONSource"
76116
}
77117
}
78-
}
118+
}

‎packages/base/src/mainview/mainView.tsx‎

Lines changed: 131 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,10 @@ import { Coordinate } from 'ol/coordinate';
4242
import { singleClick } from 'ol/events/condition';
4343
import { GeoJSON, MVT } from 'ol/format';
4444
import { Geometry, Point } from 'ol/geom';
45-
import { Type } from 'ol/geom/Geometry';
4645
import { DragAndDrop, Interaction, Select } from 'ol/interaction';
4746
import Draw from 'ol/interaction/Draw.js';
48-
import Modify from 'ol/interaction/Modify.js';
49-
import Snap from 'ol/interaction/Snap.js';
47+
//import Modify from 'ol/interaction/Modify.js';
48+
//import Snap from 'ol/interaction/Snap.js';
5049
import {
5150
Heatmap as HeatmapLayer,
5251
Image as ImageLayer,
@@ -94,6 +93,7 @@ import TemporalSlider from './TemporalSlider';
9493
import { MainViewModel } from './mainviewmodel';
9594
//import Modify from 'ol/interaction/Modify.js';
9695
//import Snap from 'ol/interaction/Snap.js';
96+
import { Type } from 'ol/geom/Geometry';
9797

9898
const drawGeometries = ['Point', 'LineString', 'Polygon'];
9999

@@ -116,7 +116,7 @@ interface IStates {
116116
displayTemporalController: boolean;
117117
filterStates: IDict<IJGISFilterItem | undefined>;
118118
isDrawVectorLayerEnabled: boolean;
119-
drawGeometryType: string | undefined;
119+
drawGeometryLabel: string | undefined;
120120
}
121121

122122
export class MainView extends React.Component<IProps, IStates> {
@@ -184,7 +184,7 @@ export class MainView extends React.Component<IProps, IStates> {
184184
displayTemporalController: false,
185185
filterStates: {},
186186
isDrawVectorLayerEnabled: false,
187-
drawGeometryType: '',
187+
drawGeometryLabel: '',
188188
};
189189

190190
this._sources = [];
@@ -385,6 +385,43 @@ export class MainView extends React.Component<IProps, IStates> {
385385
units: view.getProjection().getUnits(),
386386
},
387387
}));
388+
389+
/* Snap and Modify interactions */
390+
//this._snap = new Snap();
391+
//this._modify = new Modify({});
392+
//this._Map.addInteraction(this._snap);
393+
//this._Map.addInteraction(this._modify);
394+
395+
/* Draw interactions */
396+
this._draw = new Draw({
397+
style: {
398+
'fill-color': 'rgba(255, 255, 255, 0.2)',
399+
'stroke-color': '#ffcc33',
400+
'stroke-width': 2,
401+
'circle-radius': 7,
402+
'circle-fill-color': '#ffcc33',
403+
},
404+
type: 'Point',
405+
});
406+
this._Map.addInteraction(this._draw);
407+
408+
const drawGeometryLabel = 'Point'
409+
this.setState(old => ({
410+
...old,
411+
drawGeometryLabel
412+
}));
413+
this._draw.setActive(false);
414+
//this._modify.setActive(false);
415+
//this._snap.setActive(false);
416+
}
417+
/* Listen to the change in selected layer and get the new source */
418+
this._model.sharedModel.awareness.on('change', this._getDrawSourceFromSelectedLayer)
419+
420+
if (this._currentDrawSourceID) {
421+
const layerSource = this._getVectorSourceFromSourceID(this._currentDrawSourceID)
422+
if (layerSource) {
423+
this._updateDrawSource(layerSource) /*add new features to the JGIS Document in geoJSON format */
424+
}
388425
}
389426
}
390427

@@ -1337,8 +1374,8 @@ export class MainView extends React.Component<IProps, IStates> {
13371374
const parsedGeometry = isOlGeometry
13381375
? geometry
13391376
: new GeoJSON().readGeometry(geometry, {
1340-
featureProjection: this._Map.getView().getProjection(),
1341-
});
1377+
featureProjection: this._Map.getView().getProjection(),
1378+
});
13421379

13431380
const olFeature = new Feature({
13441381
geometry: parsedGeometry,
@@ -2041,8 +2078,8 @@ export class MainView extends React.Component<IProps, IStates> {
20412078
const isDrawVectorLayerEnabled: boolean =
20422079
this._model.isDrawVectorLayerEnabled;
20432080
this.setState(old => ({ ...old, isDrawVectorLayerEnabled }));
2044-
if (isDrawVectorLayerEnabled === false && this._currentDrawInteraction) {
2045-
this._removeCurrentDrawInteraction();
2081+
if (isDrawVectorLayerEnabled === false && this._draw) {
2082+
this._removeDrawInteraction();
20462083
}
20472084
}
20482085

@@ -2058,92 +2095,94 @@ export class MainView extends React.Component<IProps, IStates> {
20582095
// TODO SOMETHING
20592096
};
20602097

2098+
private _getGeometryType(label: string): Type {
2099+
switch (label) {
2100+
case 'Point':
2101+
return "Point";
2102+
case 'LineString':
2103+
return "LineString";
2104+
case 'Polygon':
2105+
return "Polygon";
2106+
default:
2107+
return "Point";
2108+
}
2109+
}
2110+
2111+
private _getVectorSourceFromSourceID = (sourceID: string): VectorSource | undefined => {
2112+
/* get the OL vectorSource corresponding to the JGIS currentDrawSourceID */
2113+
const layerSource: VectorSource | undefined = this._Map
2114+
.getLayers()
2115+
.getArray()
2116+
.find(
2117+
(layer: BaseLayer) => layer.get('id') === sourceID
2118+
)
2119+
?.get('source');
2120+
return layerSource
2121+
}
2122+
20612123
private _handleDrawGeometryTypeChange = (
20622124
event: React.ChangeEvent<HTMLSelectElement>,
20632125
) => {
2064-
const drawGeometryType = event.target.value;
2065-
if (this._model.isDrawVectorLayerEnabled) {
2066-
if (this._currentDrawInteraction) {
2067-
this._removeCurrentDrawInteraction();
2068-
}
2069-
const localState = this._model?.sharedModel.awareness.getLocalState();
2070-
const localStateSelectedLayers = localState?.selected?.value;
2071-
2072-
/** add new feature to the already existing geoJSONSource
2073-
*/
2074-
const localStateSelectedLayerID = Object.keys(
2075-
localStateSelectedLayers,
2076-
)[0];
2077-
const jGISLayer = this._model.getLayer(localStateSelectedLayerID);
2078-
const localStateSourceID = jGISLayer?.parameters?.source;
2079-
let jGISLayerSource = this._model.getSource(localStateSourceID);
2080-
2081-
const layerSource: VectorSource | undefined = this._Map
2082-
.getLayers()
2083-
.getArray()
2084-
.find(
2085-
(layer: BaseLayer) => layer.get('id') === localStateSelectedLayerID,
2086-
)
2087-
?.get('source');
2088-
2089-
const modify = new Modify({ source: layerSource });
2090-
this._Map.addInteraction(modify);
2091-
const draw = new Draw({
2092-
source: layerSource,
2093-
style: {
2094-
'fill-color': 'rgba(255, 255, 255, 0.2)',
2095-
'stroke-color': '#ffcc33',
2096-
'stroke-width': 2,
2097-
'circle-radius': 7,
2098-
'circle-fill-color': '#ffcc33',
2099-
},
2100-
type: drawGeometryType as Type, // Type being a geometry type here,
2126+
const drawGeometryLabel = event.target.value;
2127+
const drawGeometryType = this._getGeometryType(drawGeometryLabel)
2128+
if (this._draw) {
2129+
this._Map.removeInteraction(this._draw);
2130+
2131+
this._draw = new Draw({
2132+
source: this._getVectorSourceFromSourceID(this._currentDrawSourceID),
2133+
type: drawGeometryType, // e.g., 'Point', 'LineString', etc.
21012134
});
2102-
const snap = new Snap({ source: layerSource });
2135+
this._Map.addInteraction(this._draw)
2136+
}
21032137

2104-
this._Map.addInteraction(draw);
2105-
this._Map.addInteraction(snap);
2106-
this._currentDrawInteraction = draw;
2107-
this.setState(old => ({
2108-
...old,
2109-
drawGeometryType,
2110-
}));
2138+
this.setState(old => ({
2139+
...old,
2140+
drawGeometryLabel,
2141+
}));
2142+
};
21112143

2112-
const geojsonWriter = new GeoJSON({
2113-
featureProjection: this._Map.getView().getProjection(),
2114-
});
2144+
_getDrawSourceFromSelectedLayer = () => {
2145+
const localStateSelectedLayers = this._model?.sharedModel.awareness.getLocalState()?.selected?.value;
2146+
const selectedLayerID = Object.keys(
2147+
localStateSelectedLayers,
2148+
)[0];
2149+
console.log('selectedLayerID:', selectedLayerID)
2150+
const jGISLayer = this._model.getLayer(selectedLayerID);
2151+
this._currentDrawSourceID = jGISLayer?.parameters?.source;
2152+
const IJGISSource = this._model.getSource(this._currentDrawSourceID)
2153+
if (IJGISSource) {
2154+
this._currentDrawSource = IJGISSource;
2155+
}
2156+
}
21152157

2116-
layerSource?.on('change', () => {
2117-
if (jGISLayerSource) {
2118-
const features = layerSource
2119-
?.getFeatures()
2120-
.map(feature => geojsonWriter.writeFeatureObject(feature));
2158+
_updateDrawSource = (layerSource: VectorSource) => {
2159+
const geojsonWriter = new GeoJSON({
2160+
featureProjection: this._Map.getView().getProjection(),
2161+
});
2162+
const features = layerSource
2163+
?.getFeatures()
2164+
.map(feature => geojsonWriter.writeFeatureObject(feature));
21212165

2122-
const updatedData = {
2123-
type: 'FeatureCollection',
2124-
features: features,
2125-
};
2126-
const updatedJGISLayerSource: IJGISSource = {
2127-
name: jGISLayerSource.name,
2128-
type: jGISLayerSource.type,
2129-
parameters: {
2130-
data: updatedData,
2131-
},
2132-
};
2133-
jGISLayerSource = updatedJGISLayerSource;
2134-
this._model.sharedModel.updateSource(
2135-
localStateSourceID,
2136-
updatedJGISLayerSource,
2137-
);
2138-
}
2139-
});
2140-
} else {
2141-
return;
2142-
}
2143-
};
2166+
const updatedData = {
2167+
type: 'FeatureCollection',
2168+
features: features,
2169+
};
2170+
const updatedJGISLayerSource: IJGISSource = {
2171+
name: this._currentDrawSource.name,
2172+
type: this._currentDrawSource.type,
2173+
parameters: {
2174+
data: updatedData,
2175+
},
2176+
};
2177+
this._currentDrawSource = updatedJGISLayerSource;
2178+
this._model.sharedModel.updateSource(
2179+
this._currentDrawSourceID,
2180+
updatedJGISLayerSource,
2181+
);
21442182

2145-
private _removeCurrentDrawInteraction = () => {
2146-
this._Map.removeInteraction(this._currentDrawInteraction);
2183+
}
2184+
private _removeDrawInteraction = () => {
2185+
this._Map.removeInteraction(this._draw);
21472186
};
21482187

21492188
render(): JSX.Element {
@@ -2195,7 +2234,7 @@ export class MainView extends React.Component<IProps, IStates> {
21952234
<select
21962235
className="geometry-type-selector"
21972236
id="geometry-type-selector"
2198-
value={this.state.drawGeometryType}
2237+
value={this.state.drawGeometryLabel}
21992238
onChange={this._handleDrawGeometryTypeChange}
22002239
>
22012240
<option value="" selected hidden>
@@ -2265,5 +2304,9 @@ export class MainView extends React.Component<IProps, IStates> {
22652304
private _loadingLayers: Set<string>;
22662305
private _originalFeatures: IDict<Feature<Geometry>[]> = {};
22672306
private _highlightLayer: VectorLayer<VectorSource>;
2268-
private _currentDrawInteraction: Interaction;
2307+
private _draw: Interaction;
2308+
//private _snap: Interaction;
2309+
//private _modify: Interaction;
2310+
private _currentDrawSource: IJGISSource;
2311+
private _currentDrawSourceID: string;
22692312
}

0 commit comments

Comments
 (0)