今回の成果

センスはさておき、、クリスマスっぽい配色にしてみました

ネタ元のフラグメントシェーダー

ビルの表面は以下の私が過去にNEORTに投稿したシェーダーを使っています

yamlをどのように編集するのか

スタイルを定義するyamlですが、「cameras」、「lights」、「sources」、「layers」、「styles」の大項目があります
かなり大雑把ですが

cameras にカメラの数とタイプの定義
lights　にライティングの定義
sources に地図のタイルの定義
layers に表示するレイヤーの定義
styles にレイヤーに適用するスタイルの定義

上記を理解すれば、あとはドキュメントとサンプルを見て理解出来るのではと思います

今回は以下のマトリックス風のサンプルをベースに

回転のさせかたを変更
色の変更
ビルの表面を変更

しました

利点を考える

地図でアート作品を作るのにはとても良いのではないでしょうか
というのはさておき、基本2Dなので、そこそこ用途が限られてくるかもなあという印象です
（今回3D風に見せていますが、スタイルでシェーダーを書いてそういう風に見せているだけ）

ただ、スタイルのシェーダーを書けば、世界全部どこでも同じスタイルで出せるのはおもしろいなと思いました

成果GIFは都庁を中心とした絵にしていますが、
以下の絵は我らがサッポロファクトリーです

デモはこちら

触ったらわかるのですが、GISとして任意にブラウザ上で動かそうとすると、かなり難易度が高いです（無理やり3Dかつ自動回転させてるので）

最後にstyleのyamlのソースコードを貼っておきます

scene.yml

cameras:
    camera1:
        type: perspective

lights:
    light1:
        type: directional
        direction: [0, 1, -.5]
        diffuse: .3
        ambient: 1

sources:
    nextzen:
        type: MVT
        url: https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        url_params:
            api_key: ********************* ←　取得したAPIキーを入れる
        tile_size: 512
        max_zoom: 16

layers:
    earth:
        data: { source: nextzen }
        draw:
            tiledCross:
                order: 0
                color: [0,0,0]

    landuse:
        data: { source: nextzen }
        draw:
            tiledCross:
                style: tilt
                order: 1
                color: [0.2,0.45,0.87]

    water:
        data: { source: nextzen }
        draw:
            polygons:
                style: tilt
                order: 2
                color: '#88bbee'

    roads:
        data: { source: nextzen }
        filter:
            not: { kind: [path, rail, ferry] }
        draw:
            roads:
                order: 4
                color: gray
                width: 8
                cap: round
        highway:
            filter:
                kind: highway
            draw:
                roads:
                    order: 5
                    color: '#cc6666'
                    width: 12
                    outline:
                        color: grey
                        width: 1.5
        minor_road:
            filter:
                kind: minor_road
            draw:
                roads:
                    order: 4
                    color: lightgrey
                    width: 5

    buildings:
        data: { source: nextzen }
        draw:
            buildings:
                order: 7
                color: [0, 0, 0]
        3d-buildings:
            filter: { $zoom: { min: 13 } }
            draw:
                buildings:
                    extrude: true
                buildingsLines:
                    order: 8
                    color: [0.890,0.0,0.0]
                    width: [[12, .1px], [14, 0.5px], [15, 1.5px], [17, 1.5px], [18, 2px]]
                    extrude: true
styles:
    tilt:
        animated: true
        base: polygons
        shaders:
            blocks:
                global: |
                    mat3 rotateZ3D(float psi){
                        return mat3(
                            vec3(cos(psi),-sin(psi),0.),
                            vec3(sin(psi),cos(psi),0.),
                            vec3(0.,0.,1.));
                    }
                position: |
                    float t = u_time*0.05;
                    position.xyz = mat3(vec3(1.,0.,0.),vec3(0.,.5,-.5),vec3(0.,.5,.5)) * rotateZ3D(t) * position.xyz;
    roads:
        base: lines
        mix: base
        animated: true
        shaders:
            blocks:
                color: |
                    vec2 st = v_texcoord.xy;
                    vec2 rows = vec2(1.,20.);
                    float t = u_time*12.;
                    vec2 ipos = vec2(0.);
                    if ( v_color.r < 0.5) {
                        rows.x = 2.;
                        if (fract(st.x*rows.x * 0.5) < 0.5){
                            t *= -1.0;
                        }
                    }
                    ipos = floor(st*rows);
                    ipos.y -= floor(t);
                    vec2 fpos = fract(st*rows);
                    vec2 center = (.5-fpos);
                    float pct = random(ipos);
                    color.rgb = vec3(0.89,0.2,0.2) * ( pct * 1.5 );
    base:
        mix: tilt
        texcoords: true
        shaders:
            blocks:
                global: |
                    // Variant to be add to both vertex and fragments shaders
                    varying vec3 v_pos;

                    vec2 getTileCoords() {
                        return fract(v_pos.xy);
                    }

                    bool gridLine(vec2 st, float res, float press){
                        vec2 grid = fract(st*res);
                        return grid.x < res*press || grid.y < res*press;
                    }
                    float TileGrid(float res){
                        vec2 st = getTileCoords()*100.*res;
                        float pct = 0.0;
                        float press = 0.4+(1.0-fract(u_map_position.z))*0.1;
                        if (gridLine(st,0.01,press)) pct += 0.5;
                        if (gridLine(st,0.1,press)) pct += 0.1;
                        return pct;
                    }
                    float TileGrid(){ return mix(TileGrid(1.),TileGrid(2.),fract(u_map_position.z)); }

                    float random(float x){ return fract(sin(x)*43758.5453);}
                    float random(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }

                    float grid (in vec2 _pos, in float _zoom, in float _lineWidth){
                        _pos = fract(_pos*_zoom);
                        vec2 g = smoothstep(vec2(0.5-_lineWidth),vec2(0.5),_pos) -
                                 smoothstep(vec2(0.5),vec2(0.5+_lineWidth),_pos);
                        return clamp(g.x+g.y,0.0,1.0);
                    }

                    float box(in vec2 _st, in vec2 _size){
                        _size = vec2(0.5) - _size*0.5;
                        vec2 uv = smoothstep(_size,
                                            _size+vec2(0.001),
                                            _st);
                        uv *= smoothstep(_size,
                                        _size+vec2(0.001),
                                        vec2(1.0)-_st);
                        return uv.x*uv.y;
                    }
                    float cross(in vec2 _st, float _size){
                        return  box(_st, vec2(_size*0.5,_size*0.125)) +
                                box(_st, vec2(_size*0.125,_size*0.5));
                    }
                    float circle(vec2 p, float radius) {
                        return length(p) - radius;
                    }
                    float pattern(vec2 st, float n){
                        vec2 grid = vec2(3.,5.);

                        vec2 ipos = floor(st*grid);
                        vec2 fpos = fract(st*grid);

                        n = floor(mod(n,10.));
                        float pct = 0.0;
                        if (n < 1. ) { pct = st.y-st.x+0.5;; }
                        else if (n < 2. ) { pct = st.x; }
                        else if (n < 3. ) { pct = st.y; }
                        else if (n < 4. ) {  pct = max(st.x,st.y); }
                        else if (n < 5. ) {  pct = circle(st-1.0,0.5); }
                        else if (n < 6. ) {  pct = circle(st,0.5); }
                        else if (n < 7. ) {  pct = min(st.x,st.y); }
                        else if (n < 8. ) {  pct = st.x-st.y+0.5; }
                        else if (n < 9. ) {  pct = circle(vec2(st.x-0.5,st.y-1.0),0.01); }
                        else if (n < 10. ) { pct = circle(vec2(st.x-0.5,st.y),0.01); }

                        return step(.5,1.0-pct);
                    }
                position: |
                    // Normalize the attribute position of a vertex
                    v_pos = modelPosition().xyz;
    tiledCross:
        base: polygons
        mix: base
        animated: false
        shaders:
            blocks:
                color: |
                    vec2 pos = (getTileCoords()+vec2(.5));
                    float pct = clamp(cross(fract(pos),0.1),0.0,1.0);
                    color.rgb *= pct;
                    pos = (getTileCoords()*10.+vec2(.5));
                    pct = clamp(cross(fract(pos),0.3),0.0,0.8);
                    color.rgb = clamp(color.rgb+vec3(0.173,0.235,0.200)*pct,vec3(0.0),vec3(1.0));
    buildings:
        base: polygons
        mix: base
        blend: add
        animated: true
        texcoords: true
        shaders:
            blocks:
                color: |
                    vec3 pos = worldPosition().xyz*0.01;
                    vec2 uv = v_texcoord.xy;

                    float rows = 10.0;
                    vec2 ipos = floor(uv*rows);
                    vec2 fpos = fract(uv*rows);

                    ipos += vec2(0.5,floor(u_time*5.0*random(ipos.x+3.0)));
                    float pct = random(ipos);
                    vec3 c = vec3(pattern(fpos,100.*pct));
                    color.rgb = mix(c,vec3(c.r*0.1,c.g,c.b*0.3),step(.1,pct));

    buildingsLines:
        base: lines
        mix: base
        lighting: false
        shaders:
            blocks:
                width: |
                    width *= 0.2+min(pow(position.z*0.006,2.),.6);