From 6dfc7dc57d9a13e8516a99d073a7a90592b074e4 Mon Sep 17 00:00:00 2001 From: Bertil Chapuis Date: Thu, 5 Oct 2023 21:49:01 +0200 Subject: [PATCH] Add colorfull building extrusions --- basemap/layers/building/extrusion.js | 64 ++++++++++++++++++++++++++++ basemap/layers/building/tileset.js | 42 ++++++++++++++++-- basemap/style.js | 2 + 3 files changed, 104 insertions(+), 4 deletions(-) create mode 100644 basemap/layers/building/extrusion.js diff --git a/basemap/layers/building/extrusion.js b/basemap/layers/building/extrusion.js new file mode 100644 index 000000000..2c28e5ed7 --- /dev/null +++ b/basemap/layers/building/extrusion.js @@ -0,0 +1,64 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import theme from "../../theme.js"; + +export default { + id: 'building-extrusion', + type: 'fill-extrusion', + source: 'baremaps', + 'source-layer': 'building', + filter: ['!=', ['get', 'building'], 'no'], + layout: { + visibility: 'visible', + }, + minzoom: 16, + paint: { + "fill-extrusion-color": [ + "case", + ["has", "building:colour"], + ["get", "building:colour"], + theme.buildingShapeFillColor, + ], + "fill-extrusion-base": [ + 'interpolate', + ['linear'], + ['zoom'], + 16, + 0, + 17, + ['get', "extrusion:base"] + ], + "fill-extrusion-height": [ + 'interpolate', + ['linear'], + ['zoom'], + 16, + 0, + 17, + ['get', "extrusion:height"] + ], + "fill-extrusion-opacity": [ + 'interpolate', + ['linear'], + ['zoom'], + 16, + 0, + 17, + 0.8 + ] + }, +} diff --git a/basemap/layers/building/tileset.js b/basemap/layers/building/tileset.js index 66c9bf1f3..47c962e17 100644 --- a/basemap/layers/building/tileset.js +++ b/basemap/layers/building/tileset.js @@ -21,14 +21,48 @@ export default { { minzoom: 13, maxzoom: 20, - sql: - "SELECT id, tags, geom FROM osm_ways WHERE tags ? 'building'", + sql: ` + SELECT + id, + tags + || jsonb_build_object('extrusion:base', (CASE + WHEN tags ? 'building:min_height' + THEN tags ->> 'building:min_height' + WHEN tags ->> 'building:min_level' ~ '^[0-9\\\\\\\\.]+$' + THEN tags ->> 'building:min_level' + ELSE '0' END)::real * 3) + || jsonb_build_object('extrusion:height', (CASE + WHEN tags ? 'building:height' + THEN tags ->> 'building:height' + WHEN tags ->> 'building:levels' ~ '^[0-9\\\\\\\\.]+$' + THEN tags ->> 'building:levels' + ELSE '2' END)::real * 3), + geom + FROM osm_ways + WHERE tags ? 'building'`, }, { minzoom: 13, maxzoom: 20, - sql: - "SELECT id, tags, geom FROM osm_relations WHERE tags ? 'building'", + sql: ` + SELECT + id, + tags + || jsonb_build_object('extrusion:base', (CASE + WHEN tags ? 'building:min_height' + THEN tags ->> 'building:min_height' + WHEN tags ->> 'building:min_level' ~ '^[0-9\\\\\\\\.]+$' + THEN tags ->> 'building:min_level' + ELSE '0' END)::real * 3) + || jsonb_build_object('extrusion:height', (CASE + WHEN tags ? 'building:height' + THEN tags ->> 'building:height' + WHEN tags ->> 'building:levels' ~ '^[0-9\\\\\\\\.]+$' + THEN tags ->> 'building:levels' + ELSE '2' END)::real * 3), + geom + FROM osm_relations + WHERE tags ? 'building'`, }, ], } diff --git a/basemap/style.js b/basemap/style.js index 448ff763f..ab23bca43 100644 --- a/basemap/style.js +++ b/basemap/style.js @@ -53,6 +53,7 @@ import highway_label from './layers/highway/highway_label.js'; import ocean_overlay from './layers/ocean/overlay.js'; import route_line from "./layers/route/style.js" import building_shape from "./layers/building/shape.js"; +import building_extrusion from "./layers/building/extrusion.js"; import building_number from "./layers/building/number.js"; import man_made_bridge from "./layers/man_made/bridge.js"; import man_made_pier_line from "./layers/man_made/pier_line.js"; @@ -121,6 +122,7 @@ export default { natural_trunk, boundary_line, waterway_label, + building_extrusion, icon, point_label, country_label,