bus-stop/index.ts at main · gnlow-learn/bus-stop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import "https://esm.sh/adorable-css@1.6.2"
import { html, render } from "https://esm.sh/lit-html@3.3.1"

import {
    Map,
    View,
    Feature,
} from "https://esm.sh/ol@10.7.0"
import * as layer from "https://esm.sh/ol@10.7.0/layer"
import * as source from "https://esm.sh/ol@10.7.0/source"
import * as geom from "https://esm.sh/ol@10.7.0/geom"
import { transform } from "https://esm.sh/ol@10.7.0/proj"
import * as style from "https://esm.sh/ol@10.7.0/style"

import { parse } from "./src/parse.ts"

const data = parse(
    await fetch("https://cdn.jsdelivr.net/gh/gnlow/raw@0.1.0/file/1db7e5d0")
        .then(x => x.bytes())
)

const lonLat =
(lon: number, lat: number) =>
    transform(
        [lon, lat],
        "EPSG:4326",
        "EPSG:3857",
    )

const vs = new source.Vector({
    features: data.filter(x => x.위도 && x.경도)
        .map(x => new Feature({
            geometry: new geom.Point(lonLat(x.경도!, x.위도!)),
        })),
})

render(html`
    <app class="vbox(fill) h(100%) b(1)">
        <div id="map" class="h(100%)"/>
    </app>
`, document.body)

export const map = new Map({
    target: "map",
    layers: [
        new layer.Tile({
            source: new source.OSM(),
        }),
        new layer.Vector({
            source: new source.Cluster({
                distance: 30,
                source: vs,
            }),
            style: feature => new style.Style({
                image: new style.Circle({
                    radius: 10,
                    fill: new style.Fill({ color: "#95c6de" }),
                    stroke: new style.Stroke({ color: "#546771" })
                }),
                text: new style.Text({
                    text: feature.get("features").length+"",
                }),
            })
        })
    ],
    view: new View({
        center: lonLat(128, 36),
        zoom: 7,
    }),
})