agentscript/leaflet/showtiles.html at master · backspaces/agentscript · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>

<head>
    <title>TileInfo</title>
    <link rel="stylesheet" href="https://cdn.skypack.dev/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="./map.css">
</head>

<body>
    <div id="map"></div>

    <script type="module">
        import * as util from '../src/utils.js'
        import * as gis from '../src/gis.js'
        import { mapzen } from '../src/TileData.js'
        import * as L from 'https://unpkg.com/leaflet@1.8.0/dist/leaflet-src.esm.js'

        let [lon, lat, Z] = [-105.941109, 35.68222, 13]
        const map = L.map('map', {
            zoomDelta: 0.25,
            zoomSnap: 0.25,
        }).setView([lat, lon], Z)

        const terrainLayer = L.tileLayer(gis.template('osm'), {
            attribution: gis.attribution('osm'),
            noWrap: true,
        }).addTo(map)

        // https://gis.stackexchange.com/questions/149062/display-tile-grid-borders-with-leaflet-visual-debugging
        L.GridLayer.GridDebug = L.GridLayer.extend({
            createTile: function (coords) {
                const tile = document.createElement('div')
                tile.style.outline = '1px solid green'
                tile.style.fontWeight = 'bold'
                tile.style.fontSize = '14pt'
                tile.innerHTML = tileZxy(coords)
                return tile
            },
        })
        const tileZxy = coords => {
            const { x, y, z } = coords
            return [z, x, y].join(' / ')
        }
        L.gridLayer.gridDebug = function (opts) {
            return new L.GridLayer.GridDebug(opts)
        }
        const debugLayer = map.addLayer(L.gridLayer.gridDebug())

        let popup
        map.on('click', e => {
            const p4 = util.precision

            let { lat, lng: lon } = e.latlng
            let z = Math.round(map.getZoom())
            let [x, y] = gis.lonlatz2xy(lon, lat, z)
            let bbox = gis.xyz2bbox(x, y, z, 4)

            let bboxStr = bbox.toString().replaceAll(',', ', ')
            map.openPopup(`BBox to 4 places:<br />${bboxStr}`, e.latlng)

            let [west, south, east, north] = bbox
            let width = east - west
            let height = north - south

            console.log('lon/lat', p4(lon), p4(lat), 'width/height', p4(width), p4(height))
        })
        map.on('zoom', e => {
            map.closePopup()
        })


    </script>
</body>

</html>

<!--
        const elevationLayer = L.tileLayer(
        mapzen.zxyTemplate,
        {
        opacity: 0.15,
        attribution: 'Elevation Tiles',
        crossOrigin: '',
        }
        ).addTo(map)
        util.toWindow({ terrainLayer, elevationLayer, gis })

        const bounds = centerTileBounds()
        const rectangle = L.rectangle(bounds, { color: 'black' })
        .bindPopup(layer => centerTileString())
        .addTo(map)

        map.on('zoomend', ev => {
        update(ev)
        })
        map.on('moveend', ev => {
        update(ev)
        })

        function centerTileString() {
        const [X, Y, Z] = centerTileXYZ()
        return `X:${X}, Y:${Y}, Z:${Z}`
        }
        function centerTileXYZ() {
        const { lat, lng: lon } = map.getCenter()
        const Z = Math.round(map.getZoom())
        const [X, Y] = gis.lonlatz2xy(lon, lat, Z)
        return [X, Y, Z]
        }
        function centerTileBounds() {
        const [X, Y, Z] = centerTileXYZ()
        const bbox = gis.xyz2bbox(X, Y, Z)
        // console.log('bbox', bbox)
        // console.log('bboxPixels', gis.bboxPixels(L, bbox, Z))
        util.toWindow({ bbox, Z })
        return gis.latlon(gis.bboxBounds(bbox))
        // return gis.bbox2bounds(bbox)
        }
        function update(ev) {
        // if (ev.type === 'moveend') console.log('moved')
        // console.log('event', ev.type)
        rectangle.closePopup()
        const bounds = centerTileBounds()
        rectangle.setBounds(bounds)
        }

        util.toWindow({ L, util, map })

        // // test of crossOrigin: works!
        // const img = elevationLayer.getContainer().firstChild.children[0]
        // console.log(img)
        // const data = new RGBDataSet(img)
        // console.log(data)
    -->