🏃 optimizing draw order based on zoom level

This commit is contained in:
Michael Straßburger 2016-11-09 03:35:43 +01:00
parent d10ed9159f
commit e3f42e46c9
4 changed files with 33 additions and 915 deletions

View File

@ -88,8 +88,6 @@ module.exports = class BrailleBuffer
output.push if @charBuffer[idx] output.push if @charBuffer[idx]
@charBuffer[idx] @charBuffer[idx]
else if @pixelBuffer[idx] is 0
' '
else else
String.fromCharCode 0x2800+@pixelBuffer[idx] String.fromCharCode 0x2800+@pixelBuffer[idx]

View File

@ -17,9 +17,8 @@ utils = require './utils'
#simplify = require 'simplify-js' #simplify = require 'simplify-js'
module.exports = class Renderer module.exports = class Renderer
cache: {}
config: config:
language: 'de' language: 'en'
labelMargin: 5 labelMargin: 5
@ -27,44 +26,6 @@ module.exports = class Renderer
projectSize: 256 projectSize: 256
maxZoom: 14 maxZoom: 14
#"poi_label", "water",
drawOrder: [
"landuse"
"water"
"marine_label"
"building"
"road"
"admin"
"country_label"
"state_label"
"water_label"
"place_label"
"rail_station_label"
"poi_label"
"road_label"
"housenum_label"
]
icons:
car: "🚗"
school: "S" #{}"🏫"
marker: ""
'art-gallery': "A" #"🎨"
attraction: ""
stadium: "🏈"
toilet: "🚽"
cafe: ""
laundry: "👚"
bus: "🚌"
restaurant: "R" #🍛"
lodging: "B" #🛏"
'fire-station': "🚒"
shop: "🛍"
pharmacy: "💊"
beer: "H" #"🍺"
cinema: "C" #"🎦"
layers: layers:
housenum_label: housenum_label:
margin: 4 margin: 4
@ -178,7 +139,7 @@ module.exports = class Renderer
features = {} features = {}
for layer in @config.drawOrder for layer in @_generateDrawOrder zoom
continue unless tile.data.layers?[layer] continue unless tile.data.layers?[layer]
features[layer] = tile.data.layers[layer].search box features[layer] = tile.data.layers[layer].search box
@ -188,7 +149,7 @@ module.exports = class Renderer
_renderTiles: (tiles) -> _renderTiles: (tiles) ->
drawn = {} drawn = {}
for layer in @config.drawOrder for layer in @_generateDrawOrder tiles[0].xyz.z
for tile in tiles for tile in tiles
continue unless tile.features[layer]?.length continue unless tile.features[layer]?.length
for feature in tile.features[layer] for feature in tile.features[layer]
@ -236,7 +197,6 @@ module.exports = class Renderer
feature.properties["name_en"] or feature.properties["name_en"] or
feature.properties["name"] or feature.properties["name"] or
feature.properties.house_num or feature.properties.house_num or
#@config.icons[feature.properties.maki] or
"" ""
points = @_scaleAndReduce tile, feature, feature.points points = @_scaleAndReduce tile, feature, feature.points
@ -308,3 +268,30 @@ module.exports = class Renderer
# @_seen[ka] = @_seen[kb] = true # @_seen[ka] = @_seen[kb] = true
scaled scaled
_generateDrawOrder: (zoom) ->
if zoom < 2
[
"admin"
"water"
"country_label"
"marine_label"
]
else
[
"landuse"
"water"
"marine_label"
"building"
"road"
"admin"
"country_label"
"state_label"
"water_label"
"place_label"
"rail_station_label"
"poi_label"
"road_label"
"housenum_label"
]

View File

@ -1,867 +0,0 @@
{
"version": 8,
"name": "Basic",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
"sources": {
"mapbox": {
"url": "mapbox://mapbox.mapbox-streets-v7",
"type": "vector"
}
},
"sprite": "mapbox://sprites/mapbox/basic-v9",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#dedede"
},
"interactive": true
},
{
"id": "landuse_overlay_national_park",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse_overlay",
"filter": [
"==",
"class",
"national_park"
],
"paint": {
"fill-color": "#d2edae",
"fill-opacity": 0.75
},
"interactive": true
},
{
"id": "landuse_park",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse",
"filter": [
"==",
"class",
"park"
],
"paint": {
"fill-color": "#d2edae"
},
"interactive": true
},
{
"id": "waterway",
"type": "line",
"source": "mapbox",
"source-layer": "waterway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"river",
"canal"
]
],
"paint": {
"line-color": "#a0cfdf",
"line-width": {
"base": 1.4,
"stops": [
[
8,
0.5
],
[
20,
15
]
]
}
},
"interactive": true
},
{
"id": "water",
"type": "fill",
"source": "mapbox",
"source-layer": "water",
"paint": {
"fill-color": "#a0cfdf"
},
"interactive": true
},
{
"id": "building",
"type": "fill",
"source": "mapbox",
"source-layer": "building",
"paint": {
"fill-color": "#d6d6d6"
},
"interactive": true
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"tunnel"
]
]
],
"type": "line",
"source": "mapbox",
"id": "tunnel_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
},
"line-dasharray": [
0.36,
0.18
]
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"tunnel"
]
]
],
"type": "line",
"source": "mapbox",
"id": "tunnel_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
},
"line-dasharray": [
0.28,
0.14
]
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"in",
"structure",
"none",
"ford"
]
]
],
"type": "line",
"source": "mapbox",
"id": "road_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"in",
"structure",
"none",
"ford"
]
]
],
"type": "line",
"source": "mapbox",
"id": "road_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_minor case",
"paint": {
"line-color": "#dedede",
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
},
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_major case",
"paint": {
"line-color": "#dedede",
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
},
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"<=",
"admin_level",
2
],
[
"==",
"maritime",
0
]
]
],
"type": "line",
"source": "mapbox",
"id": "admin_country",
"paint": {
"line-color": "#8b8a8a",
"line-width": {
"base": 1.3,
"stops": [
[
3,
0.5
],
[
22,
15
]
]
}
},
"source-layer": "admin"
},
{
"interactive": true,
"minzoom": 5,
"layout": {
"icon-image": "{maki}-11",
"text-offset": [
0,
0.5
],
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-max-width": 8,
"text-anchor": "top",
"text-size": 11,
"icon-size": 1
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"all",
[
"==",
"scalerank",
1
],
[
"==",
"localrank",
1
]
]
],
"type": "symbol",
"source": "mapbox",
"id": "poi_label",
"paint": {
"text-color": "#666",
"text-halo-width": 1,
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-blur": 1
},
"source-layer": "poi_label"
},
{
"interactive": true,
"layout": {
"symbol-placement": "line",
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-transform": "uppercase",
"text-letter-spacing": 0.1,
"text-size": {
"base": 1.4,
"stops": [
[
10,
8
],
[
20,
14
]
]
}
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
]
],
"type": "symbol",
"source": "mapbox",
"id": "road_major_label",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 2
},
"source-layer": "road_label"
},
{
"interactive": true,
"minzoom": 8,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-max-width": 6,
"text-size": {
"stops": [
[
6,
12
],
[
12,
16
]
]
}
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"in",
"type",
"town",
"village",
"hamlet",
"suburb",
"neighbourhood",
"island"
]
],
"type": "symbol",
"source": "mapbox",
"id": "place_label_other",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 1,
"text-halo-blur": 1
},
"source-layer": "place_label"
},
{
"interactive": true,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Bold",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
12
],
[
8,
16
]
]
}
},
"maxzoom": 16,
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"==",
"type",
"city"
]
],
"type": "symbol",
"source": "mapbox",
"id": "place_label_city",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 1,
"text-halo-blur": 1
},
"source-layer": "place_label"
},
{
"interactive": true,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Regular",
"Arial Unicode MS Regular"
],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
14
],
[
8,
22
]
]
}
},
"maxzoom": 12,
"filter": [
"==",
"$type",
"Point"
],
"type": "symbol",
"source": "mapbox",
"id": "country_label",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.75)",
"text-halo-width": 1,
"text-halo-blur": 1
},
"source-layer": "country_label"
}
]
}

View File

@ -1,11 +1,11 @@
{ {
"name": "Bright", "name": "dark",
"constants": { "constants": {
"@admin_level_2": "#fff", "@admin_level_2": "#fff",
"@admin_level_2_disputed": "#fff", "@admin_level_2_disputed": "#fff",
"@admin_level_2_maritime": "#a0c8f0", "@admin_level_2_maritime": "#9bf",
"@admin_level_3": "#aac", "@admin_level_3": "#aac",
"@admin_level_3_maritime": "#a0c8f0", "@admin_level_3_maritime": "#8af",
"@admin_level_4": "#777", "@admin_level_4": "#777",
"@aeroway_fill": "#f0ede9", "@aeroway_fill": "#f0ede9",