You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
997 B
JavaScript
29 lines
997 B
JavaScript
6 years ago
|
import { map as LMap, tileLayer } from 'leaflet'
|
||
|
|
import 'leaflet/dist/leaflet.css'
|
||
|
|
|
||
|
|
export const map = LMap('map')
|
||
|
|
map.setView([0, 0], 1)
|
||
|
|
|
||
|
|
// background tilelayer (OSM)
|
||
|
|
tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 18,
|
||
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||
|
|
opacity: 0.9
|
||
|
|
}).addTo(map)
|
||
|
|
// wundertiles tilelayer
|
||
|
|
tileLayer('/tiles/{z}/{x}/{y}', {
|
||
|
|
attribution: '',
|
||
|
|
maxZoom: 22
|
||
|
|
}).addTo(map)
|
||
|
|
|
||
|
|
// compute Tile Coordinates
|
||
|
|
const toRad = (num) => num * Math.PI / 180
|
||
|
|
const getTileCoords = (lat, lon, zoom) => {
|
||
|
|
let xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom)))
|
||
|
|
let ytile = parseInt(Math.floor((1 - Math.log(Math.tan(toRad(lat)) + 1 / Math.cos(toRad(lat))) / Math.PI) / 2 * (1 << zoom)))
|
||
|
|
return { x: xtile, y: ytile, z: zoom }
|
||
|
|
}
|
||
|
|
|
||
|
|
// demo: how to get tile coords on click
|
||
|
|
map.on('click', (e) => { console.log(getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())) })
|