111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useRef } from 'react'
|
|
import maplibregl, { ProjectionDefinition } from 'maplibre-gl'
|
|
import 'maplibre-gl/dist/maplibre-gl.css'
|
|
import { useMap } from '@/app/map-context'
|
|
import { apply, applyStyle } from 'ol-mapbox-style';
|
|
import { useTheme } from '@/components/theme-provider'
|
|
// import TileWMS from 'ol/source/TileWMS.js';
|
|
// import Map from 'ol/Map';
|
|
// import View from 'ol/View';
|
|
// import TileLayer from 'ol/layer/Tile';
|
|
// import { transformExtent, fromLonLat } from 'ol/proj.js';
|
|
// import StadiaMaps from 'ol/source/StadiaMaps.js';
|
|
// import XYZ from 'ol/source/XYZ';
|
|
// import 'ol/ol.css';
|
|
import { useMapLocation } from '@/hooks/use-map-location'
|
|
|
|
interface MapComponentProps {
|
|
style?: string
|
|
center?: [number, number]
|
|
zoom?: number
|
|
}
|
|
|
|
// const extent = transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');
|
|
|
|
export function MapComponent({
|
|
style = 'https://api.maptiler.com/maps/019817f1-82a8-7f37-901d-4bedf68b27fb/style.json?key=hj3fxRdwF9KjEsBq8sYI',
|
|
// center = [103.851959, 1.290270],
|
|
// zoom = 11
|
|
}: MapComponentProps) {
|
|
const mapContainer = useRef<HTMLDivElement>(null)
|
|
const { setMap } = useMap()
|
|
const { location } = useMapLocation()
|
|
|
|
useEffect(() => {
|
|
if (!mapContainer.current) return
|
|
|
|
// const tileWmsLayer = new TileLayer({
|
|
// extent: extent,
|
|
// source: new TileWMS({
|
|
// attributions: ['Iowa State University'],
|
|
// url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
|
|
// params: { 'LAYERS': 'nexrad-n0r-wmst' },
|
|
// }),
|
|
// opacity: 0.7,
|
|
// });
|
|
|
|
// const map = new Map({
|
|
// target: mapContainer.current,
|
|
// view: new View({
|
|
// center: fromLonLat(location.center),
|
|
// zoom: location.zoom,
|
|
// projection: 'EPSG:3857',
|
|
|
|
// showFullExtent: true,
|
|
// enableRotation: true
|
|
|
|
// }),
|
|
// })
|
|
|
|
// apply(map, style).then(() => {
|
|
// map.addLayer(tileWmsLayer)
|
|
// })
|
|
|
|
const map = new maplibregl.Map({
|
|
container: mapContainer.current,
|
|
style: style,
|
|
center: location.center,
|
|
zoom: location.zoom,
|
|
canvasContextAttributes: {
|
|
contextType: 'webgl2', // 请求 WebGL2
|
|
antialias: true // 打开多重采样抗锯齿
|
|
}
|
|
})
|
|
|
|
map.on('style.load', () => {
|
|
map.setProjection({
|
|
type: 'globe'
|
|
})
|
|
|
|
map.addSource('nexrad', {
|
|
type: 'raster',
|
|
tiles: [
|
|
// 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?service=WMS&version=1.3.0&request=GetMap&layers=nexrad-n0r-wmst&styles=&format=image/png&transparent=true&crs=EPSG:3857&bbox={bbox-epsg-3857}&width=256&height=256'
|
|
'http://127.0.0.1:3050/tiles/{z}/{x}/{y}?time=202507220012'
|
|
],
|
|
tileSize: 256
|
|
});
|
|
|
|
map.addLayer({
|
|
id: 'nexrad-layer',
|
|
type: 'raster',
|
|
source: 'nexrad',
|
|
paint: { 'raster-opacity': 0.8 }
|
|
});
|
|
})
|
|
|
|
|
|
setMap(map, [])
|
|
|
|
}, [mapContainer])
|
|
|
|
return (
|
|
<div
|
|
ref={mapContainer}
|
|
className="w-full h-full"
|
|
style={{ minHeight: '400px' }}
|
|
/>
|
|
)
|
|
}
|