agentscript/leaflet/leafletUtils.js 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
135
136
137
138
139
140
141
142
143
144
145
export function testEvents(map, elevationLayer) {
    const eventFcn = ev => {
        // console.log(ev.type, ev, ev.coords ? this.tileName(ev.coords) : '')
        console.log(ev.type, ev.coords || '', ev)
    }

    map.on('zoomstart', eventFcn) // zoomstart/end => movestart/end too?
    map.on('zoomend', eventFcn)
    map.on('movestart', eventFcn)
    map.on('moveend', eventFcn)
    map.on('resize', eventFcn)

    elevationLayer.on('loading', eventFcn)
    elevationLayer.on('tileunload', eventFcn)
    elevationLayer.on('tileloadstart', eventFcn)
    elevationLayer.on('tileerror', eventFcn)
    elevationLayer.on('tileload', eventFcn)
    elevationLayer.on('load', eventFcn)
}

export function testZooms(tileLayer) {
    const eventFcn = ev => {
        console.log(ev.type, ev.coords)
    }
    tileLayer.on('tileerror', eventFcn)
    tileLayer.on('tileload', eventFcn)

    let zoom = 0,
        id
    let fcn = () => {
        if (zoom === 20) clearInterval(id)
        console.log('zoom:', zoom)
        map.setZoom(zoom++)
    }
    id = setInterval(fcn, 2000)
}

// https://stackoverflow.com/questions/18968986/leaflet-set-rectangle-coordinated-from-mouse-events
export function mouseBounds(L, map, ev, fcn) {
    let corner1, corner2, rect, bounds

    const down = ev => {
        map.dragging.disable()
        corner1 = ev.latlng
        console.log('down:', ev.latlng)

        bounds = L.latLngBounds(corner1, corner1)
        rect = L.rectangle(bounds, {
            color: 'red',
            fillColor: 'yellow',
        })
        rect.addTo(map)

        map.on('mousemove', move)
        map.on('mouseup', up)
    }
    const move = ev => {
        console.log('move:', ev.latlng)
        corner2 = ev.latlng
        bounds = L.latLngBounds(corner1, corner2)
        rect.setBounds(bounds)
    }
    const up = ev => {
        map.dragging.enable()
        // map.off('mousedown', down)
        map.off('mousemove', move)
        map.off('mouseup', up)

        corner2 = ev.latlng
        // console.log('up:', ev.latlng)
        const bounds = L.latLngBounds(corner1, corner2)
        // console.log(bounds)

        console.log('fcn', fcn, 'bounds', bounds)
        fcn(bounds)

        rect.remove()
    }

    // map.on('mousedown', down)
    down(ev)
}

export function eventKeys(ev) {
    const { altKey, ctrlKey, metaKey, shiftKey } = ev.originalEvent
    console.log('altKey, ctrlKey, metaKey, shiftKey')
    console.log(altKey, ctrlKey, metaKey, shiftKey)
}

// https://gis.stackexchange.com/questions/149062/display-tile-grid-borders-with-leaflet-visual-debugging
// export function getCss(id) {
//     const css = `
// * {
//     padding: 0;
//     margin: 0;
// }

// #${id} {
//     height: 100vh
// }

// .terrain-pane .leaflet-tile {
//     border: solid black 1px;
// }

// .leaflet-container {
//     isolation: isolate;
// }`
//     return css
// }
//  .leaflet-tile {
//     border: solid black 1px;
// }

// export function pixelBounds2bbox(leafletPixelBounds) {
//     let { lng: eastPx, lat: northPx } = leafletBounds.getNorthEast()
//     let { lng: westPx, lat: southPx } = leafletBounds.getSouthWest()
//     return [westPx, southPx, eastPx, northPx]
// }

// // LonLat corners to bbox: [west, south, east, north]
// export function topLeftBottomRight2bbox(topLeft, bottomRight) {
//     const [west, north] = topLeft
//     const [east, south] = bottomRight
//     return [west, south, east, north]
// }
// export function bottomLeftTopRight2bbox(bottomLeft, topRight) {
//     const [west, south] = bottomLeft
//     const [east, north] = topRight
//     return [west, south, east, north]
// }

// export function bboxPixels(map, bbox) {
//     const [west, south, east, north] = bbox
//     // const northWest = L.latLng(north, west)
//     // const southEast = L.latLng(south, east)
//     const northWestPx = map.latLngToContainerPoint([north, west])
//     const southEastPx = map.latLngToContainerPoint([south, east])
//     // const { x: northPx, y: westPx } = L.CRS.latLngToPoint(northWest, Z)
//     // const { x: eastPx, y: southPx } = L.CRS.latLngToPoint(southEast, Z)
//     // const { x: northPx, y: westPx } = L.CRS.latLngToPoint([north, west], Z)
//     // const { x: eastPx, y: southPx } = L.CRS.latLngToPoint([south, east], Z)
//     // return [westPx, southPx, eastPx, northPx]
//     return [westPx, southPx, eastPx, northPx]
// }