48 lines
1.3 KiB
React
48 lines
1.3 KiB
React
|
import maplibregl from 'maplibre-gl'
|
||
|
|
import 'maplibre-gl/dist/maplibre-gl.css'
|
||
|
|
import { style } from '../style'
|
||
|
|
|
||
|
|
export function useMapbox() {
|
||
|
|
return {
|
||
|
|
initMapbox,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initMapbox() {
|
||
|
|
const map = new maplibregl.Map({
|
||
|
|
container: 'place-earth', // container id
|
||
|
|
// style: 'https://demotiles.maplibre.org/style.json', // style URL
|
||
|
|
// style: '/style.json', // style URL
|
||
|
|
style, // style URL
|
||
|
|
|
||
|
|
center: [121, 19], // starting position [lng, lat]
|
||
|
|
zoom: 5,
|
||
|
|
})
|
||
|
|
|
||
|
|
map.on('load', function () {
|
||
|
|
console.log(style)
|
||
|
|
|
||
|
|
// map.addSource('openmaptiles', {
|
||
|
|
// type: 'vector',
|
||
|
|
// scheme: 'tms',
|
||
|
|
// tiles: ['http://192.168.10.187:8080/tmp/pbfMulti/{z}/{x}/{y}.pbf'],
|
||
|
|
// // tiles: [
|
||
|
|
// // 'https://api.maptiler.com/tiles/countries/{z}/{x}/{y}.pbf?key=bydP6fjhLOyifgD8sPeV',
|
||
|
|
// // ],
|
||
|
|
// glyphs:
|
||
|
|
// 'https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=bydP6fjhLOyifgD8sPeV',
|
||
|
|
// sprite:
|
||
|
|
// 'https://cloud.maptiler.com/api/v1/sprites/fc5c10f7-9003-43f2-bc30-3834f546927c/content',
|
||
|
|
// })
|
||
|
|
// style.layers.forEach(layer => {
|
||
|
|
// // console.log(layer)
|
||
|
|
// map.addLayer(layer)
|
||
|
|
// })
|
||
|
|
})
|
||
|
|
|
||
|
|
map.on('click', e => {
|
||
|
|
const features = map.queryRenderedFeatures(e.point)
|
||
|
|
console.log(features)
|
||
|
|
})
|
||
|
|
}
|