This is an automated email from the ASF dual-hosted git repository. bchapuis pushed a commit to branch 580-layer-ordering in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git
commit 9cae8d45f61e0c1bf70a453cbb4be87986834b4e Author: Bertil Chapuis <[email protected]> AuthorDate: Wed Feb 8 16:07:06 2023 +0100 Make the transformation of directives more explicit --- basemap/layers/amenity/background.js | 13 +- basemap/layers/amenity/fountain.js | 7 +- basemap/layers/boundary/line.js | 8 +- basemap/layers/highway/bridge_line.js | 7 +- basemap/layers/highway/bridge_outline.js | 7 +- basemap/layers/highway/highway_dash.js | 7 +- basemap/layers/highway/highway_line.js | 7 +- basemap/layers/highway/highway_outline.js | 7 +- basemap/layers/highway/tunnel_line.js | 7 +- basemap/layers/highway/tunnel_outline.js | 7 +- basemap/layers/landuse/background.js | 13 +- basemap/layers/landuse/overlay.js | 7 +- basemap/layers/leisure/background.js | 7 +- basemap/layers/leisure/overlay.js | 7 +- basemap/layers/man_made/bridge.js | 7 +- basemap/layers/natural/background.js | 7 +- basemap/layers/natural/overlay.js | 7 +- basemap/layers/ocean/background.js | 7 +- basemap/layers/point/icon.js | 7 +- basemap/layers/point/label.js | 87 +++++++------- basemap/layers/railway/line.js | 9 +- basemap/layers/railway/tunnel.js | 9 +- basemap/layers/route/style.js | 9 +- basemap/style.js | 78 ++++++------ basemap/utils/layer.js | 179 ---------------------------- basemap/utils/utils.js | 191 +++++++++++++++++++++++++++++- 26 files changed, 345 insertions(+), 363 deletions(-) diff --git a/basemap/layers/amenity/background.js b/basemap/layers/amenity/background.js index fe3bdf7d..f6ed6ad5 100644 --- a/basemap/layers/amenity/background.js +++ b/basemap/layers/amenity/background.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {withFillSortKey, asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -35,16 +35,9 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'amenity_fill_1', type: 'fill', source: 'baremaps', 'source-layer': 'amenity', - layout: { - visibility: 'visible', - }, - paint: { - 'fill-antialias': true, - }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/amenity/fountain.js b/basemap/layers/amenity/fountain.js index fdb839ea..c2859b16 100644 --- a/basemap/layers/amenity/fountain.js +++ b/basemap/layers/amenity/fountain.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject} from "../../utils/utils.js"; let directives = [ { @@ -8,7 +8,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(directives, { id: 'amenity_fill_2', type: 'fill', source: 'baremaps', @@ -19,5 +19,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/boundary/line.js b/basemap/layers/boundary/line.js index 8fb9ac83..55590dd2 100644 --- a/basemap/layers/boundary/line.js +++ b/basemap/layers/boundary/line.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -19,7 +19,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'boundary', type: 'line', source: 'baremaps', @@ -30,6 +30,4 @@ export default { paint: { 'line-dasharray': [4, 1, 1, 1], }, - directives: directives.map(withLineSortKey), - -} +}); diff --git a/basemap/layers/highway/bridge_line.js b/basemap/layers/highway/bridge_line.js index c9e3674a..41f966ed 100644 --- a/basemap/layers/highway/bridge_line.js +++ b/basemap/layers/highway/bridge_line.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -87,7 +87,7 @@ let directives = [ }, ] -export default { +export default asLayerObject(withSortKeys(directives), { id: 'bridge_line', source: 'baremaps', 'source-layer': 'highway', @@ -98,5 +98,4 @@ export default { 'line-join': 'miter', }, filter: ['any', ['==', ['get', 'bridge'], 'yes']], - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/bridge_outline.js b/basemap/layers/highway/bridge_outline.js index 7fefb147..0dc79e90 100644 --- a/basemap/layers/highway/bridge_outline.js +++ b/basemap/layers/highway/bridge_outline.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -87,7 +87,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'bridge_outline', source: 'baremaps', 'source-layer': 'highway', @@ -98,5 +98,4 @@ export default { 'line-join': 'miter', }, filter: ['any', ['==', ['get', 'bridge'], 'yes']], - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/highway_dash.js b/basemap/layers/highway/highway_dash.js index 3ca4eda7..b63e38ad 100644 --- a/basemap/layers/highway/highway_dash.js +++ b/basemap/layers/highway/highway_dash.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -65,7 +65,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'highway_dash', type: 'line', source: 'baremaps', @@ -78,5 +78,4 @@ export default { paint: { 'line-dasharray': [2, 2], }, - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/highway_line.js b/basemap/layers/highway/highway_line.js index acb43d8f..c72f4e95 100644 --- a/basemap/layers/highway/highway_line.js +++ b/basemap/layers/highway/highway_line.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -83,7 +83,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'highway_line', source: 'baremaps', 'source-layer': 'highway', @@ -100,5 +100,4 @@ export default { ['!=', ['get', 'layer'], '-1'], ['!=', ['get', 'covered'], 'yes'], ], - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/highway_outline.js b/basemap/layers/highway/highway_outline.js index 40c732e3..6b7512ff 100644 --- a/basemap/layers/highway/highway_outline.js +++ b/basemap/layers/highway/highway_outline.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives =[ { @@ -96,7 +96,7 @@ let directives =[ }, ] -export default { +export default asLayerObject(withSortKeys(directives), { id: 'highway_outline', source: 'baremaps', 'source-layer': 'highway', @@ -113,5 +113,4 @@ export default { ['!=', ['get', 'layer'], '-1'], ['!=', ['get', 'covered'], 'yes'], ], - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/tunnel_line.js b/basemap/layers/highway/tunnel_line.js index 69714a06..c628c5ff 100644 --- a/basemap/layers/highway/tunnel_line.js +++ b/basemap/layers/highway/tunnel_line.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -87,7 +87,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'tunnel_line', source: 'baremaps', 'source-layer': 'highway', @@ -103,5 +103,4 @@ export default { ['==', ['get', 'layer'], '-1'], ['==', ['get', 'covered'], 'yes'], ], - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/highway/tunnel_outline.js b/basemap/layers/highway/tunnel_outline.js index 9ef45f7c..6ce21959 100644 --- a/basemap/layers/highway/tunnel_outline.js +++ b/basemap/layers/highway/tunnel_outline.js @@ -1,4 +1,4 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -87,7 +87,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'tunnel_outline', source: 'baremaps', 'source-layer': 'highway', @@ -106,5 +106,4 @@ export default { paint: { 'line-dasharray': [1, 1], }, - directives: directives.map(withLineSortKey), -} +}); diff --git a/basemap/layers/landuse/background.js b/basemap/layers/landuse/background.js index 6931b687..0e5067fb 100644 --- a/basemap/layers/landuse/background.js +++ b/basemap/layers/landuse/background.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {withFillSortKey, asLayoutProperty, asPaintProperty} from "../../utils/utils.js"; let directives = [ { @@ -101,18 +101,17 @@ let directives = [ filter: ['==', ['get', 'landuse'], 'pedestrian'], 'fill-color': 'rgb(221, 221, 233)', }, -]; +].map(withFillSortKey); export default { id: 'landuse_background', type: 'fill', source: 'baremaps', 'source-layer': 'landuse', - layout: { + layout: asLayoutProperty(directives, { visibility: 'visible', - }, - directives: directives.map(withFillSortKey), - paint: { + }), + paint: asPaintProperty(directives, { 'fill-antialias': true, - }, + }), } diff --git a/basemap/layers/landuse/overlay.js b/basemap/layers/landuse/overlay.js index 9a0f6295..b5059eb5 100644 --- a/basemap/layers/landuse/overlay.js +++ b/basemap/layers/landuse/overlay.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject, withFillSortKey} from "../../utils/utils.js"; let directives = [ { @@ -19,7 +19,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withFillSortKey(directives), { id: 'landuse_overlay', type: 'fill', source: 'baremaps', @@ -30,5 +30,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/leisure/background.js b/basemap/layers/leisure/background.js index ddbdaede..23ed22ca 100644 --- a/basemap/layers/leisure/background.js +++ b/basemap/layers/leisure/background.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -60,7 +60,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'leisure', type: 'fill', source: 'baremaps', @@ -71,5 +71,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/leisure/overlay.js b/basemap/layers/leisure/overlay.js index f23b9f68..51512ab9 100644 --- a/basemap/layers/leisure/overlay.js +++ b/basemap/layers/leisure/overlay.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -8,7 +8,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'leisure_overlay', type: 'fill', source: 'baremaps', @@ -19,5 +19,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/man_made/bridge.js b/basemap/layers/man_made/bridge.js index 18332b8f..3ba32e3c 100644 --- a/basemap/layers/man_made/bridge.js +++ b/basemap/layers/man_made/bridge.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject} from "../../utils/utils.js"; let directives = [ { @@ -7,7 +7,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(directives, { id: 'man_made_bridge', type: 'fill', source: 'baremaps', @@ -15,8 +15,7 @@ export default { layout: { visibility: 'visible', }, - directives: directives.map(withFillSortKey), paint: { 'fill-antialias': true, }, -} +}); diff --git a/basemap/layers/natural/background.js b/basemap/layers/natural/background.js index fa3dc385..12f7a327 100644 --- a/basemap/layers/natural/background.js +++ b/basemap/layers/natural/background.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -35,7 +35,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'natural', type: 'fill', //filter: ['==', ['get', 'type'], 'Polygon'], @@ -47,5 +47,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/natural/overlay.js b/basemap/layers/natural/overlay.js index 2b760d6d..7f35beb7 100644 --- a/basemap/layers/natural/overlay.js +++ b/basemap/layers/natural/overlay.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { @@ -20,7 +20,7 @@ let directives = [ } ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'natural_overlay', type: 'fill', source: 'baremaps', @@ -31,5 +31,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/ocean/background.js b/basemap/layers/ocean/background.js index a0ad4c2c..a0eed8b5 100644 --- a/basemap/layers/ocean/background.js +++ b/basemap/layers/ocean/background.js @@ -1,4 +1,4 @@ -import {withFillSortKey} from "../../utils/utils.js"; +import {withSortKeys, asLayerObject} from "../../utils/utils.js"; let directives = [ { @@ -8,7 +8,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'ocean', type: 'fill', source: 'baremaps', @@ -19,5 +19,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: directives.map(withFillSortKey), -} +}); diff --git a/basemap/layers/point/icon.js b/basemap/layers/point/icon.js index ac94f962..25da68d3 100644 --- a/basemap/layers/point/icon.js +++ b/basemap/layers/point/icon.js @@ -1,3 +1,5 @@ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + let directives = [ // Amenity: sustenance { @@ -866,7 +868,7 @@ let directives = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'icon', type: 'symbol', source: 'baremaps', @@ -891,5 +893,4 @@ export default { 'text-halo-width': 1, 'text-halo-color': 'rgba(255, 255, 255, 0.8)', }, - directives: directives, -} +}); diff --git a/basemap/layers/point/label.js b/basemap/layers/point/label.js index eea0e315..0e7fa1fe 100644 --- a/basemap/layers/point/label.js +++ b/basemap/layers/point/label.js @@ -1,4 +1,47 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'place'], 'city'], + 'text-size': 16, + 'text-color': 'rgb(25, 25, 25)', + }, + { + filter: ['==', ['get', 'place'], 'town'], + 'text-size': 14, + 'text-color': 'rgb(50,50,50)', + }, + { + filter: ['==', ['get', 'place'], 'village'], + 'text-size': 12, + 'text-color': 'rgb(75,75,75)', + }, + { + filter: ['==', ['get', 'place'], 'locality'], + 'text-size': 12, + 'text-color': 'rgb(75,75,75)', + }, + // { + // filter: [ + // 'in', + // ['get', 'place'], + // [ + // 'literal', [ + // 'neighbourhood', + // 'quarter', + // 'hamlet', + // 'isolated_dwelling', + // 'islet' + // ] + // ] + // ], + // 'text-size': 11, + // 'text-color': 'rgba(100, 100, 100, 1)', + // }, + +]; + +export default asLayerObject(withSortKeys(directives), { id: 'label', type: 'symbol', source: 'baremaps', @@ -12,44 +55,4 @@ export default { 'text-halo-color': 'rgba(255, 255, 255, 0.8)', 'text-halo-width': 1, }, - directives: [ - { - filter: ['==', ['get', 'place'], 'city'], - 'text-size': 16, - 'text-color': 'rgb(25, 25, 25)', - }, - { - filter: ['==', ['get', 'place'], 'town'], - 'text-size': 14, - 'text-color': 'rgb(50,50,50)', - }, - { - filter: ['==', ['get', 'place'], 'village'], - 'text-size': 12, - 'text-color': 'rgb(75,75,75)', - }, - { - filter: ['==', ['get', 'place'], 'locality'], - 'text-size': 12, - 'text-color': 'rgb(75,75,75)', - }, - // { - // filter: [ - // 'in', - // ['get', 'place'], - // [ - // 'literal', [ - // 'neighbourhood', - // 'quarter', - // 'hamlet', - // 'isolated_dwelling', - // 'islet' - // ] - // ] - // ], - // 'text-size': 11, - // 'text-color': 'rgba(100, 100, 100, 1)', - // }, - - ] -} +}); diff --git a/basemap/layers/railway/line.js b/basemap/layers/railway/line.js index fb2544b0..f2c52aa2 100644 --- a/basemap/layers/railway/line.js +++ b/basemap/layers/railway/line.js @@ -1,6 +1,6 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; -let directive = [ +export let directives = [ { 'filter': [ 'all', @@ -75,7 +75,7 @@ let directive = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { 'id': 'railway_line', 'source': 'baremaps', 'source-layer': 'railway', @@ -86,5 +86,4 @@ export default { 'line-cap': 'round', 'line-join': 'round', }, - 'directives': directive.map(withLineSortKey), -} +}); diff --git a/basemap/layers/railway/tunnel.js b/basemap/layers/railway/tunnel.js index f366ca38..0e733578 100644 --- a/basemap/layers/railway/tunnel.js +++ b/basemap/layers/railway/tunnel.js @@ -1,6 +1,8 @@ -import line from './line.js' +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; -export default { +import {directives} from './line.js' + +export default asLayerObject(withSortKeys(directives), { 'id': 'railway_tunnel', 'source': 'baremaps', 'source-layer': 'railway', @@ -14,5 +16,4 @@ export default { 'paint': { 'line-dasharray': [1,2] }, - 'directives': line.directives -} +}); diff --git a/basemap/layers/route/style.js b/basemap/layers/route/style.js index c91222b1..1a38b88d 100644 --- a/basemap/layers/route/style.js +++ b/basemap/layers/route/style.js @@ -1,6 +1,6 @@ -import {withLineSortKey} from "../../utils/utils.js"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; -let directive = [ +let directives = [ { filter: ['==', ['get', 'route'], 'ferry'], 'line-color': 'rgb(112, 181, 201)', @@ -8,7 +8,7 @@ let directive = [ }, ]; -export default { +export default asLayerObject(withSortKeys(directives), { id: 'route_ferry', type: 'line', source: 'baremaps', @@ -18,5 +18,4 @@ export default { 'line-join': 'round', visibility: 'visible', }, - directives: directive.map(withLineSortKey), -} +}); diff --git a/basemap/style.js b/basemap/style.js index 438b2d6a..c49c0ed6 100644 --- a/basemap/style.js +++ b/basemap/style.js @@ -1,7 +1,5 @@ import config from "./config.js"; -import layer from './utils/layer.js'; - import background from "./layers/background/style.js"; import amenity_background from "./layers/amenity/background.js"; import amenity_fountain from "./layers/amenity/fountain.js"; @@ -57,43 +55,43 @@ export default { "glyphs": "https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf";, "layers": [ background, - layer(power_background), - layer(amenity_background), - layer(landuse_background), - layer(leisure_background), - layer(natural_background), - layer(ocean_background), - layer(landuse_overlay), - layer(leisure_overlay), - layer(natural_overlay), - layer(waterway_line), - layer(waterway_tunnel_casing), - layer(waterway_tunnel_line), - layer(man_made_bridge), - layer(amenity_fountain), - layer(highway_tunnel_outline), - layer(highway_tunnel_line), - layer(railway_tunnel), - layer(highway_outline), - layer(highway_line), - layer(highway_dash), - layer(highway_pedestrian_area), - layer(railway_line), - layer(highway_bridge_outline), - layer(highway_bridge_line), - layer(highway_label), - layer(route_line), - layer(power_cable), - layer(power_tower), - layer(building_shape), - layer(building_number), - layer(man_made_pier_line), - layer(man_made_pier_label), - layer(natural_tree), - layer(natural_trunk), - layer(boundary_line), - layer(waterway_label), - layer(icon), - layer(label), + power_background, + amenity_background, + landuse_background, + leisure_background, + natural_background, + ocean_background, + landuse_overlay, + leisure_overlay, + natural_overlay, + waterway_line, + waterway_tunnel_casing, + waterway_tunnel_line, + man_made_bridge, + amenity_fountain, + highway_tunnel_outline, + highway_tunnel_line, + railway_tunnel, + highway_outline, + highway_line, + highway_dash, + highway_pedestrian_area, + railway_line, + highway_bridge_outline, + highway_bridge_line, + highway_label, + route_line, + power_cable, + power_tower, + building_shape, + building_number, + man_made_pier_line, + man_made_pier_label, + natural_tree, + natural_trunk, + boundary_line, + waterway_label, + icon, + label, ], }; diff --git a/basemap/utils/layer.js b/basemap/utils/layer.js deleted file mode 100644 index ce6dab0b..00000000 --- a/basemap/utils/layer.js +++ /dev/null @@ -1,179 +0,0 @@ -export default function layer(layer) { - return { - id: layer['id'], - type: layer['type'], - filter: filter(layer), - source: layer['source'], - 'source-layer': layer['source-layer'], - minzoom: layer['minzoom'], - maxzoom: layer['maxzoom'], - layout: layer['directives'] - ? Object.assign( - { - ...textFont(layer), - ...textField(layer), - ...textSize(layer), - ...textMaxWidth(layer), - ...iconImage(layer), - ...lineSortKey(layer), - ...fillSortKey(layer), - }, - layer['layout'], - ) - : layer['layout'], - paint: layer['directives'] - ? Object.assign( - { - ...textColor(layer), - ...textHaloColor(layer), - ...textHaloWidth(layer), - ...iconColor(layer), - ...fillColor(layer), - ...fillOutlineColor(layer), - ...lineColor(layer), - ...lineWidth(layer), - ...lineGapWidth(layer), - ...roadWidth(layer), - ...roadGapWidth(layer), - }, - layer['paint'], - ) - : layer['paint'], - } -} - -function filter(layer) { - if (layer['filter'] && layer['directives']) { - return [ - 'all', - layer['filter'], - ['any', ...layer['directives'].map((rule) => rule['filter'])], - ] - } else if (layer['directives']) { - return ['any', ...layer['directives'].map((rule) => rule['filter'])] - } else if (layer['filter']) { - return layer['filter'] - } else { - return [] - } -} - - -function iconImage(layer) { - return mergeDirectives(layer, 'icon-image', 'none') -} - -function iconColor(layer) { - return mergeDirectives(layer, 'icon-color', 'rgba(0, 0, 0, 0)') -} - -function textFont(layer) { - return mergeDirectives(layer, 'text-font', "Arial") -} - -function textField(layer) { - return mergeDirectives(layer, 'text-field', null) -} - -function textSize(layer) { - return mergeDirectives(layer, 'text-size', 12) -} - -function textMaxWidth(layer) { - return mergeDirectives(layer, 'text-max-width', 4) -} - -function textColor(layer) { - return mergeDirectives(layer, 'text-color', 'rgba(0, 0, 0, 0)') -} - -function textHaloColor(layer) { - return mergeDirectives(layer, 'text-halo-color', 'rgba(0, 0, 0, 0)') -} - -function textHaloWidth(layer) { - return mergeDirectives(layer, 'text-halo-width', 0) -} - -function fillColor(layer) { - return mergeDirectives(layer, 'fill-color', 'rgba(0, 0, 0, 0)') -} - -function fillOutlineColor(layer) { - return mergeDirectives(layer, 'fill-outline-color', 'rgba(0, 0, 0, 0)') -} - -function lineColor(layer) { - return mergeDirectives(layer, 'line-color', 'rgba(0, 0, 0, 0)') -} - -function lineWidth(layer) { - return mergeDirectives(layer, 'line-width', 0) -} - -function lineGapWidth(layer) { - return mergeDirectives(layer, 'line-gap-width', 0) -} - -function lineSortKey(layer) { - return mergeDirectives(layer, 'line-sort-key', 0) -} - -function fillSortKey(layer) { - return mergeDirectives(layer, 'fill-sort-key', 0) -} - -function mergeDirectives(layer, property, value) { - let cases = layer['directives'].flatMap((rule) => { - if (rule[property]) { - return [rule['filter'], rule[property]] - } else { - return [] - } - }) - if (cases.length == 0) { - return {} - } - return { - [property]: ['case', ...cases, value], - } -} - -function roadWidth(layer) { - return mergeInterpolatedDirective(layer, 'road-width', 'line-width', 1) -} - -function roadGapWidth(layer) { - return mergeInterpolatedDirective(layer, 'road-gap-width', 'line-gap-width', 1) -} - -function mergeInterpolatedDirective(layer, property, alias, value) { - let cases = layer['directives'].flatMap((rule) => { - if (rule[property]) { - return [rule['filter'], rule[property]] - } else { - return [] - } - }) - if (cases.length == 0) { - return {} - } - return { - [alias]: [ - 'interpolate', - ['exponential', 1.2], - ['zoom'], - 5, - 0.2, - 20, - ['case', ...cases, value], - ], - } -} - -function groupBy(xs, key) { - return xs.reduce(function (rv, x) { - ;(rv[x[key]] = rv[x[key]] || []).push(x) - return rv - }, {}) -} diff --git a/basemap/utils/utils.js b/basemap/utils/utils.js index 4091cac7..c2e128c1 100644 --- a/basemap/utils/utils.js +++ b/basemap/utils/utils.js @@ -1,13 +1,198 @@ + +export function withSortKeys(directives) { + return directives + .map(withFillSortKey) + .map(withLineSortKey); +} + export function withFillSortKey(directive, index, array) { - return { + return directive['fill-color'] ?{ ...directive, 'fill-sort-key': array.length - index - 1, - } + } : directive; } export function withLineSortKey(directive, index, array) { - return { + return directive['line-width'] ? { ...directive, 'line-sort-key': array.length - index - 1, + } : directive; +} + +export function asLayerObject(directives = [], baseLayer = {}) { + return { + ...baseLayer, + filter: asFilterProperty(directives, baseLayer['filter']), + layout: asLayoutProperty(directives, baseLayer['layout']), + paint: asPaintProperty(directives, baseLayer['paint']), + }; +} + +export function asLayoutProperty(directives = [], baseLayout = {}) { + return Object.assign( + { + ...textFont(directives), + ...textField(directives), + ...textSize(directives), + ...textMaxWidth(directives), + ...iconImage(directives), + ...lineSortKey(directives), + ...fillSortKey(directives), + }, + baseLayout, + ) +} + +export function asPaintProperty(directives = [], basePaint = {}) { + return Object.assign( + { + ...textColor(directives), + ...textHaloColor(directives), + ...textHaloWidth(directives), + ...iconColor(directives), + ...fillColor(directives), + ...fillOutlineColor(directives), + ...lineColor(directives), + ...lineWidth(directives), + ...lineGapWidth(directives), + ...roadWidth(directives), + ...roadGapWidth(directives), + }, + basePaint, + ) +} + +export function asFilterProperty(directives = [], filter = []) { + if (directives.length > 0 && filter.length > 0) { + return [ + 'all', + filter, + ['any', ...directives.map((rule) => rule['filter'])], + ]; + } else if (directives.length > 0) { + return ['any', ...directives.map((rule) => rule['filter'])]; + } else if (filter.length > 0) { + return filter; + } else { + return []; } +} + +function iconImage(directives) { + return mergeDirectives(directives, 'icon-image', 'none') +} + +function iconColor(directives) { + return mergeDirectives(directives, 'icon-color', 'rgba(0, 0, 0, 0)') +} + +function textFont(directives) { + return mergeDirectives(directives, 'text-font', "Arial") +} + +function textField(directives) { + return mergeDirectives(directives, 'text-field', null) +} + +function textSize(directives) { + return mergeDirectives(directives, 'text-size', 12) +} + +function textMaxWidth(directives) { + return mergeDirectives(directives, 'text-max-width', 4) +} + +function textColor(directives) { + return mergeDirectives(directives, 'text-color', 'rgba(0, 0, 0, 0)') +} + +function textHaloColor(directives) { + return mergeDirectives(directives, 'text-halo-color', 'rgba(0, 0, 0, 0)') +} + +function textHaloWidth(directives) { + return mergeDirectives(directives, 'text-halo-width', 0) +} + +function fillColor(directives) { + return mergeDirectives(directives, 'fill-color', 'rgba(0, 0, 0, 0)') +} + +function fillOutlineColor(directives) { + return mergeDirectives(directives, 'fill-outline-color', 'rgba(0, 0, 0, 0)') +} + +function lineColor(directives) { + return mergeDirectives(directives, 'line-color', 'rgba(0, 0, 0, 0)') +} + +function lineWidth(directives) { + return mergeDirectives(directives, 'line-width', 0) +} + +function lineGapWidth(directives) { + return mergeDirectives(directives, 'line-gap-width', 0) +} + +function lineSortKey(directives) { + return mergeDirectives(directives, 'line-sort-key', 0) +} + +function fillSortKey(directives) { + return mergeDirectives(directives, 'fill-sort-key', 0) +} + +function mergeDirectives(directives, property, value) { + let cases = directives.flatMap((rule) => { + if (rule[property]) { + return [rule['filter'], rule[property]] + } else { + return [] + } + }) + if (cases.length == 0) { + return {} + } + return { + [property]: ['case', ...cases, value], + } +} + +function roadWidth(directives) { + return mergeInterpolatedDirective(directives, 'road-width', 'line-width', 1) +} + +function roadGapWidth(directives) { + return mergeInterpolatedDirective(directives, 'road-gap-width', 'line-gap-width', 1) +} + +function mergeInterpolatedDirective(directives, property, alias, value) { + let cases = directives.flatMap((rule) => { + if (rule[property]) { + return [rule['filter'], rule[property]] + } else { + return [] + } + }) + if (cases.length == 0) { + return {} + } + return { + [alias]: [ + 'interpolate', + ['exponential', 1.2], + ['zoom'], + 5, + 0.2, + 20, + ['case', ...cases, value], + ], + } +} + +function groupBy(xs, key) { + return xs.reduce(function (rv, x) { + ;(rv[x[key]] = rv[x[key]] || []).push(x) + return rv + }, {}) } \ No newline at end of file
