Skip to content

Commit 23de259

Browse files
gchoqueuxgchoqueux
committed
refactor(Style/Convert): move options from Converter to Style.
BREAKING CHANGES: * `GeometryLayer.convert` options are moved in Style properties. Use * `Style.xxx.color` * `Style.xxx.base_altitude` * `Style.fill.extrusion_height` * `Style.stroke.width` * `Style.point.radius` * `overrideAltitudeInToZero` layer options is removed use `Style.xxx.base_altitude` instead.
1 parent e244f55 commit 23de259

17 files changed

+381
-280
lines changed

‎docs/tutorials/Display-a-geometry-layer.md

+32-20
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,9 @@ There is a few differences though:
123123
called to update the layer each time the rendering loop is called. For now
124124
let's simply put `itowns.FeatureProcessing.update` and don't touch this
125125
method.
126-
- the third parameter is `convert`, that is more interesting to us. It is the
127-
method that will tell how to use the data to convert it to meshes, and do
128-
other operations on it.
126+
- `Convert` method to convert `FeatureCollection` to `THREE.Mesh`.
127+
- the third parameter is `Style`, that is more interesting to us. It is the
128+
Object that will tell how to use the data to stylize the meshes.
129129

130130
Trying this code will result in... nothing visually ! The data was processed and
131131
displayed, but it is hidden under the elevation layer. If we remove the
@@ -137,7 +137,7 @@ have indeed been added. So let's place the data on the elevation layer !
137137
## Placing the data on the ground
138138

139139
To achieve the positionning relative to the elevation layer, we will need to add
140-
a parameter to the `convert` property: `altitude`, a method that will help us.
140+
a parameter to the `Style` property: `base_altitude`, a method that will help us.
141141

142142
```js
143143
function setAltitude(properties) {
@@ -153,8 +153,11 @@ var geometrySource = new itowns.WFSSource({
153153
var geometryLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
154154
source: geometrySource,
155155
update: itowns.FeatureProcessing.update,
156-
convert: itowns.Feature2Mesh.convert({
157-
altitude: setAltitude
156+
convert: itowns.Feature2Mesh.convert(),
157+
style: new itowns.Style({
158+
fill: {
159+
base_altitude: setAltitude,
160+
}
158161
}),
159162
zoom: { min: 14 },
160163
});
@@ -207,8 +210,8 @@ But now we can't see completely our buildings again. What can we do about that
207210

208211
## Extruding the data
209212

210-
Like the altitude, the volume of a building can be changed using the `extrude`
211-
parameter of the `convert` property.
213+
Like the altitude, the volume of a building can be changed using the `extrusion_height`
214+
parameter of the `Style` property.
212215

213216
```js
214217
function setExtrusion(properties) {
@@ -224,9 +227,12 @@ var geometrySource = new itowns.WFSSource({
224227
var geometryLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
225228
source: geometrySource,
226229
update: itowns.FeatureProcessing.update,
227-
convert: itowns.Feature2Mesh.convert({
228-
altitude: setAltitude,
229-
extrude: setExtrusion,
230+
convert: itowns.Feature2Mesh.convert(),
231+
style: new itowns.Style({
232+
fill: {
233+
base_altitude: setAltitude,
234+
extrusion_height: setExtrusion,
235+
}
230236
}),
231237
zoom: { min: 14 },
232238
});
@@ -245,7 +251,7 @@ nice view of our buildings:
245251

246252
We are not yet touching the color of the buildings. This results in every
247253
building being randomly colored at each time. To solve this, as we did before,
248-
we can add a `color` parameter to the `convert` property.
254+
we can add a `color` parameter to the `Style` property.
249255

250256
```js
251257
function setColor(properties) {
@@ -261,10 +267,13 @@ var geometrySource = new itowns.WFSSource({
261267
var geometryLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
262268
source: geometrySource,
263269
update: itowns.FeatureProcessing.update,
264-
convert: itowns.Feature2Mesh.convert({
265-
altitude: setAltitude,
266-
extrude: setExtrusion,
267-
color: setColor
270+
convert: itowns.Feature2Mesh.convert(),
271+
style: new itowns.Style({
272+
fill: {
273+
color: setColor
274+
base_altitude: setAltitude,
275+
extrusion_height: setExtrusion,
276+
},
268277
}),
269278
zoom: { min: 14 },
270279
});
@@ -381,10 +390,13 @@ layer on a globe, and change some things on this layer. Here is the final code:
381390
var geometryLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
382391
source: geometrySource,
383392
update: itowns.FeatureProcessing.update,
384-
convert: itowns.Feature2Mesh.convert({
385-
altitude: setAltitude,
386-
extrude: setExtrusion,
387-
color: setColor
393+
convert: itowns.Feature2Mesh.convert(),
394+
style: new itowns.Style({
395+
fill: {
396+
color: setColor
397+
base_altitude: setAltitude,
398+
extrusion_height: setExtrusion,
399+
},
388400
}),
389401
zoom: { min: 14 },
390402
});

‎examples/js/plugins/FeatureToolTip.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ var FeatureToolTip = (function _() {
6464
}
6565
}
6666

67+
function getGeometryProperties(geometry) {
68+
return function properties() { return geometry.properties; };
69+
}
70+
6771
function fillToolTip(features, layer, options) {
6872
var content = '';
6973
var feature;
@@ -76,9 +80,10 @@ var FeatureToolTip = (function _() {
7680

7781
for (var p = 0; p < features.length; p++) {
7882
feature = features[p];
79-
8083
geometry = feature.geometry;
8184
style = (geometry.properties && geometry.properties.style) || feature.style || layer.style;
85+
var context = { globals: {}, properties: getGeometryProperties(geometry) };
86+
style = style.drawingStylefromContext(context);
8287
fill = style.fill.color;
8388
stroke = '1.25px ' + style.stroke.color;
8489

‎examples/source_file_geojson_3d.html

+10-7
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,18 @@
5454
crs: 'EPSG:4326',
5555
format: 'application/json',
5656
}),
57+
update: itowns.FeatureProcessing.update,
58+
convert: itowns.Feature2Mesh.convert(),
59+
transparent: true,
60+
opacity: 0.7,
5761
zoom: { min: 10 },
62+
style: new itowns.Style({
63+
fill: {
64+
color: new itowns.THREE.Color(0xbbffbb),
65+
extrusion_height: 80,
66+
}
67+
})
5868
});
59-
marne.update = itowns.FeatureProcessing.update;
60-
marne.convert = itowns.Feature2Mesh.convert({
61-
color: new itowns.THREE.Color(0xbbffbb),
62-
extrude: 80 });
63-
marne.transparent = true;
64-
marne.opacity = 0.7;
65-
6669

6770
view.addLayer(marne).then(function menu(layer) {
6871
var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, view, layer);

‎examples/source_file_gpx_3d.html

+16-19
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
var waypointGeometry = new itowns.THREE.BoxGeometry(1, 1, 80);
6363
var waypointMaterial = new itowns.THREE.MeshBasicMaterial({ color: 0xffffff });
6464
// Listen for globe full initialisation event
65-
var waypoints = [];
6665
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
6766
console.info('Globe initialized');
6867
itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
@@ -72,38 +71,36 @@
7271
},
7372
out: {
7473
crs: view.referenceCrs,
75-
buildExtent: true,
76-
mergeFeatures: true,
7774
structure: '3d',
75+
style: new itowns.Style({
76+
stroke : {
77+
color: 'red',
78+
width: 2,
79+
},
80+
point : {
81+
color: 'white',
82+
}
83+
})
7884
}
7985
}))
80-
.then(collection => itowns.Feature2Mesh.convert({
81-
color: new itowns.THREE.Color(0xff0000),
82-
})(collection))
86+
.then(itowns.Feature2Mesh.convert())
8387
.then(function (mesh) {
8488
if (mesh) {
89+
mesh.updateMatrixWorld();
8590
mesh.traverse((m) => {
86-
if (m.type == 'Line') {
87-
m.material.linewidth = 5;
88-
}
89-
9091
if (m.type == 'Points') {
9192
var vertices = m.feature.vertices;
92-
for (var i = 0; i < vertices.length; i++) {
93+
for (var i = 0; i < vertices.length; i += 3) {
9394
var waypoint = new itowns.THREE.Mesh(waypointGeometry, waypointMaterial);
94-
waypoint.position.set(
95-
vertices[i * 3],
96-
vertices[i * 3 + 1],
97-
vertices[i * 3 + 2]);
98-
waypoint.lookAt(0, 0, 0);
95+
waypoint.position.fromArray(vertices, i);
96+
waypoint.lookAt(mesh.worldToLocal(new itowns.THREE.Vector3()));
9997
waypoint.onBeforeRender = updatePointScale;
98+
waypoint.updateMatrix();
99+
mesh.add(waypoint);
100100
waypoint.updateMatrixWorld();
101-
waypoints.push(waypoint);
102101
}
103102
}
104103
});
105-
mesh.add(...waypoints);
106-
mesh.updateMatrixWorld();
107104
view.scene.add(mesh);
108105
view.notifyChange();
109106
}

‎examples/source_stream_wfs_25d.html

+18-21
Original file line numberDiff line numberDiff line change
@@ -101,18 +101,6 @@
101101

102102
view.addLayer(wmsElevationLayer);
103103

104-
function setMaterialLineWidth(result) {
105-
result.traverse(function _setLineWidth(mesh) {
106-
if (mesh.material) {
107-
mesh.material.linewidth = 5;
108-
}
109-
});
110-
}
111-
112-
function colorLine(properties) {
113-
return color.set(Math.round(Math.random() * 0xffffff));
114-
}
115-
116104
var tile;
117105
var linesBus = [];
118106

@@ -161,13 +149,17 @@
161149

162150
var lyonTclBusLayer = new itowns.GeometryLayer('lyon_tcl_bus', new itowns.THREE.Group(), {
163151
update: itowns.FeatureProcessing.update,
164-
convert: itowns.Feature2Mesh.convert({
165-
color: colorLine,
166-
altitude: altitudeLine }),
167-
onMeshCreated: setMaterialLineWidth,
152+
convert: itowns.Feature2Mesh.convert(),
168153
filter: acceptFeatureBus,
169154
source: lyonTclBusSource,
170155
zoom: { min: 2 },
156+
157+
style: new itowns.Style({
158+
stroke: {
159+
base_altitude: altitudeLine,
160+
width: 5,
161+
}
162+
})
171163
});
172164

173165
view.addLayer(lyonTclBusLayer);
@@ -230,21 +222,26 @@
230222
var wfsBuildingLayer = new itowns.GeometryLayer('wfsBuilding', new itowns.THREE.Group(), {
231223
update: itowns.FeatureProcessing.update,
232224
convert: itowns.Feature2Mesh.convert({
233-
color: colorBuildings,
234-
batchId: function (property, featureId) { return featureId; },
235-
altitude: altitudeBuildings,
236-
extrude: extrudeBuildings }),
225+
batchId: function (property, featureId) { return featureId; }
226+
}),
237227
onMeshCreated: function scaleZ(mesh) {
238228
mesh.children.forEach(c => {
239229
c.scale.z = 0.01;
240230
meshes.push(c);
241231
})
242232
},
243233
filter: acceptFeature,
244-
overrideAltitudeInToZero: true,
245234
crs: 'EPSG:3946',
246235
source: wfsBuildingSource,
247236
zoom: { min: 4 },
237+
238+
style: new itowns.Style({
239+
fill: {
240+
color: colorBuildings,
241+
base_altitude: altitudeBuildings,
242+
extrusion_height: extrudeBuildings,
243+
}
244+
})
248245
});
249246

250247
view.addLayer(wfsBuildingLayer);

‎examples/source_stream_wfs_3d.html

+18-8
Original file line numberDiff line numberDiff line change
@@ -113,13 +113,18 @@
113113
var lyonTclBusLayer = new itowns.GeometryLayer('WFS Bus lines', new itowns.THREE.Group(), {
114114
name: 'lyon_tcl_bus',
115115
update: itowns.FeatureProcessing.update,
116-
convert: itowns.Feature2Mesh.convert({
117-
color: colorLine,
118-
altitude: altitudeLine }),
119-
linewidth: 5,
116+
convert: itowns.Feature2Mesh.convert(),
120117
filter: acceptFeatureBus,
121118
source: lyonTclBusSource,
122119
zoom: { min: 9 },
120+
121+
style: new itowns.Style({
122+
stroke: {
123+
color: colorLine,
124+
base_altitude: altitudeLine,
125+
width: 5,
126+
}
127+
})
123128
});
124129
view.addLayer(lyonTclBusLayer);
125130

@@ -181,20 +186,25 @@
181186
var wfsBuildingLayer = new itowns.GeometryLayer('WFS Building', new itowns.THREE.Group(), {
182187
update: itowns.FeatureProcessing.update,
183188
convert: itowns.Feature2Mesh.convert({
184-
color: colorBuildings,
185189
batchId: function (property, featureId) { return featureId; },
186-
altitude: altitudeBuildings,
187-
extrude: extrudeBuildings }),
190+
}),
188191
onMeshCreated: function scaleZ(mesh) {
189192
mesh.children.forEach(c => {
190193
c.scale.z = 0.01;
191194
meshes.push(c);
192195
})
193196
},
194197
filter: acceptFeature,
195-
overrideAltitudeInToZero: true,
196198
source: wfsBuildingSource,
197199
zoom: { min: 14 },
200+
201+
style: new itowns.Style({
202+
fill: {
203+
color: colorBuildings,
204+
base_altitude: altitudeBuildings,
205+
extrusion_height: extrudeBuildings,
206+
}
207+
})
198208
});
199209
view.addLayer(wfsBuildingLayer);
200210

‎examples/source_stream_wfs_raster.html

+19-3
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,27 @@
7878
transparent: true,
7979
style: {
8080
fill: {
81-
color: 'red',
82-
opacity: 0.5
81+
color: p => {
82+
if (p.geojson.id.indexOf('bati_remarquable') === 0) {
83+
return '#5555ff';
84+
}
85+
if (p.geojson.id.indexOf('bati_industriel') === 0) {
86+
return '#ff5555';
87+
}
88+
return '#eeeeee';
89+
},
90+
opacity: 0.7
8391
},
8492
stroke: {
85-
color: 'white',
93+
color: p => {
94+
if (p.geojson.id.indexOf('bati_remarquable') === 0) {
95+
return '#8888ff';
96+
}
97+
if (p.geojson.id.indexOf('bati_industriel') === 0) {
98+
return '#ff8888';
99+
}
100+
return '#ffffff';
101+
},
86102
width: 2.0,
87103
},
88104
},

‎examples/view_immersive.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,16 @@
135135
// create geometry layer for the buildings
136136
var wfsBuildingLayer = new itowns.GeometryLayer('Buildings', new itowns.THREE.Group(), {
137137
update: itowns.FeatureProcessing.update,
138-
convert: itowns.Feature2Mesh.convert({
139-
altitude: altitudeBuildings,
140-
extrude: extrudeBuildings }),
141-
138+
convert: itowns.Feature2Mesh.convert(),
139+
style: new itowns.Style({
140+
fill: {
141+
base_altitude: altitudeBuildings,
142+
extrusion_height: extrudeBuildings,
143+
}
144+
}),
142145
// when a building is created, it get the projective texture mapping, from oriented image layer.
143146
onMeshCreated: (mesh) => mesh.traverse(object => object.material = orientedImageLayer.material),
144147
source: wfsBuildingSource,
145-
overrideAltitudeInToZero: true,
146148
zoom: { min: 15 },
147149
});
148150

0 commit comments

Comments
 (0)