Skip to content

Commit ab3717a

Browse files
a-dutremblea-dutremble
committed
refactor(example): add color interaction in SourceStreamWFS3D
1 parent 860fb6e commit ab3717a

File tree

1 file changed

+111
-97
lines changed

1 file changed

+111
-97
lines changed

‎examples/source_stream_wfs_3d.html

Lines changed: 111 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -62,84 +62,25 @@
6262
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
6363
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
6464

65-
var color = new itowns.THREE.Color();
66-
var tile;
67-
function altitudeLine(properties, contour) {
68-
var result;
69-
var z = 0;
70-
if (contour) {
71-
result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, contour, 0, tile);
72-
if (!result) {
73-
result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, contour, 0);
74-
}
75-
tile = [result.tile];
76-
if (result) {
77-
z = result.coord.z;
78-
}
79-
return z + 5;
80-
}
81-
}
82-
83-
function colorLine(properties) {
84-
return color.set(Math.round(Math.random() * 0xffffff));
85-
}
86-
87-
function acceptFeatureBus(properties) {
88-
if (properties.sens == 'Aller') {
89-
var line = properties.ligne;
90-
if (linesBus.indexOf(line) === -1) {
91-
linesBus.push(line);
92-
return true;
93-
}
94-
}
95-
return false;
96-
}
97-
98-
var lyonTclBusSource = new itowns.WFSSource({
99-
protocol: 'wfs',
100-
url: 'https://download.data.grandlyon.com/wfs/rdata?',
101-
version: '2.0.0',
102-
typeName: 'tcl_sytral.tcllignebus',
103-
crs: 'EPSG:3946',
104-
extent: {
105-
west: 1822174.60,
106-
east: 1868247.07,
107-
south: 5138876.75,
108-
north: 5205890.19,
109-
},
110-
format: 'geojson',
111-
});
112-
113-
var lyonTclBusLayer = new itowns.FeatureGeometryLayer('WFS Bus lines',{
114-
name: 'lyon_tcl_bus',
115-
filter: acceptFeatureBus,
116-
source: lyonTclBusSource,
117-
zoom: { min: 9 },
118-
119-
style: {
120-
stroke: {
121-
color: colorLine,
122-
base_altitude: altitudeLine,
123-
width: 5,
124-
}
125-
}
126-
});
127-
view.addLayer(lyonTclBusLayer);
128-
65+
var buildcolor = new itowns.THREE.Color();
12966
function colorBuildings(properties) {
130-
if (properties.usage_1 === 'Résidentiel') {
131-
return color.set(0xFDFDFF);
132-
} else if (properties.usage_1 === 'Annexe') {
133-
return color.set(0xC6C5B9);
134-
} else if (properties.usage_1 === 'Commercial et services') {
135-
return color.set(0x62929E);
136-
} else if (properties.usage_1 === 'Religieux') {
137-
return color.set(0x393D3F);
138-
} else if (properties.usage_1 === 'Sportif') {
139-
return color.set(0x546A7B);
67+
if (!properties.selected) {
68+
if (properties.usage_1 === 'Résidentiel') {
69+
return buildcolor.set(0xFDFDFF);
70+
} else if (properties.usage_1 === 'Annexe') {
71+
return buildcolor.set(0xC6C5B9);
72+
} else if (properties.usage_1 === 'Commercial et services') {
73+
return buildcolor.set(0x62929E);
74+
} else if (properties.usage_1 === 'Religieux') {
75+
return buildcolor.set(0x393D3F);
76+
} else if (properties.usage_1 === 'Sportif') {
77+
return buildcolor.set(0x546A7B);
78+
}
79+
} else {
80+
return buildcolor.set(0xFFFF00);
14081
}
14182

142-
return color.set(0x555555);
83+
return buildcolor.set(0x555555);
14384
}
14485

14586
function altitudeBuildings(properties) {
@@ -188,6 +129,7 @@
188129
},
189130
});
190131

132+
console.log(wfsBuildingSource);
191133
var wfsBuildingLayer = new itowns.FeatureGeometryLayer('WFS Building',{
192134
batchId: function (property, featureId) { return featureId; },
193135
onMeshCreated: function scaleZ(mesh) {
@@ -210,6 +152,72 @@
210152
});
211153
view.addLayer(wfsBuildingLayer);
212154

155+
var tile;
156+
var linesBus = [];
157+
158+
function altitudeLine(properties, ctx) {
159+
var result;
160+
var z = 0;
161+
if (ctx.coordinates) {
162+
result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, ctx.coordinates, 0, tile);
163+
if (!result) {
164+
result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, ctx.coordinates, 0);
165+
}
166+
if (result) {
167+
tile = [result.tile];
168+
z = result.coord.z;
169+
}
170+
return z + 5;
171+
}
172+
}
173+
174+
function acceptFeatureBus(properties) {
175+
return properties.sens === "Aller";
176+
}
177+
178+
lyonTclBusSource = new itowns.WFSSource({
179+
url: "https://data.grandlyon.com/geoserver/sytral/ows?",
180+
protocol: 'wfs',
181+
version: '2.0.0',
182+
id: 'tcl_bus',
183+
typeName: "tcl_sytral.tcllignebus_2_0_0",
184+
crs: 'EPSG:3946',
185+
extent: {
186+
west: 1822174.60,
187+
east: 1868247.07,
188+
south: 5138876.75,
189+
north: 5205890.19,
190+
},
191+
format: 'application/json',
192+
});
193+
194+
const colorsLine = new Map();
195+
196+
function colorLine(properties) {
197+
const line = properties.ligne;
198+
var lineColor = colorsLine.get(line);
199+
if (lineColor === undefined) {
200+
lineColor = new itowns.THREE.Color(0xffffff * Math.random());
201+
colorsLine.set(line, lineColor);
202+
}
203+
return colorsLine.get(line);
204+
}
205+
206+
var lyonTclBusLayer = new itowns.FeatureGeometryLayer('WFS Bus lines', {
207+
filter: acceptFeatureBus,
208+
source: lyonTclBusSource,
209+
zoom: { min: 1 },
210+
211+
style: {
212+
stroke: {
213+
base_altitude: altitudeLine,
214+
color: colorLine,
215+
width: 5,
216+
}
217+
}
218+
});
219+
view.addLayer(lyonTclBusLayer);
220+
213221
var menuGlobe = new GuiTools('menuDiv', view);
214222
// Listen for globe full initialisation event
215223
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
@@ -220,31 +228,37 @@
220228
debug.createTileDebugUI(menuGlobe.gui, view);
221229

222230
function picking(event) {
223-
if(view.controls.isPaused) {
224-
var htmlInfo = document.getElementById('info');
225-
var intersects = view.pickObjectsAt(event, 3, 'WFS Building');
226-
var properties;
227-
var info;
228-
var batchId;
229-
230-
htmlInfo.innerHTML = ' ';
231+
var htmlInfo = document.getElementById('info');
232+
var properties;
233+
var info;
234+
var intersects;
231235

232-
if (intersects.length) {
233-
batchId = intersects[0].object.geometry.attributes.batchId.array[intersects[0].face.a];
234-
properties = intersects[0].object.feature.geometries[batchId].properties;
236+
var intersects = view.pickGeometryAt(event, 3, 'WFS Building');
237+
var layer = view.getLayerById('WFS Building');
238+
239+
htmlInfo.innerHTML = ' ';
240+
if (layer.selectedGeometry) {
241+
layer.selectedGeometry.geometry.properties.selected = false;
242+
}
243+
if (intersects) {
244+
properties = intersects.geometry.properties;
245+
layer.selectedGeometry = intersects;
246+
intersects.geometry.properties.selected = true;
235247

236-
Object.keys(properties).map(function (objectKey) {
237-
var value = properties[objectKey];
238-
if (value) {
239-
var key = objectKey.toString();
240-
if (key[0] !== '_' && key !== 'geometry_name') {
241-
info = value.toString();
242-
htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
243-
}
248+
Object.keys(properties).map(function (objectKey) {
249+
var value = properties[objectKey];
250+
if (value) {
251+
var key = objectKey.toString();
252+
if (key[0] !== '_' && key !== 'geometry_name') {
253+
info = value.toString();
254+
htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
244255
}
245-
});
246-
}
247-
}
256+
}
257+
});
258+
}
259+
layer.redrawFeature(intersects);
260+
layer.redrawFeature(layer.selectedGeometry);
261+
view.notifyChange(layer);
248262
}
249263

250264
for (var layer of view.getLayers()) {

0 commit comments

Comments
 (0)