简单自定义地球仪
创建一个使用自定义纹理的简单地球仪;
<!DOCTYPE html>
<html lang="en">
<head>
<title>简单自定义地球仪</title>
<meta property="og:description" content="创建一个使用自定义纹理的简单地球仪" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 创建地图实例并设置为地球仪投影
const map = new maplibregl.Map({
container: 'map',
center: [0, 0],
zoom: 0,
pitch: 0,
projection: 'globe',
// 简单自定义地球仪的样式
style: {
version: 8,
glyphs: 'https://tiles.stadiamaps.com/fonts/{fontstack}/{range}.pbf',
sources: {
basemap: {
type: 'image',
url: 'https://maplibre.org/maplibre-gl-js/docs/assets/world-mercator-simple.png',
coordinates: [
[-180, 90],
[180, 90],
[180, -90],
[-180, -90]
]
}
},
layers: [
{
id: 'basemap',
type: 'raster',
source: 'basemap',
minzoom: 0,
maxzoom: 22
}
]
}
});
map.on('style.load', () => {
// 设置大气层以获得更好的视觉效果
map.setFog({
color: 'rgb(186, 210, 235)', // 天蓝色
'high-color': 'rgb(36, 92, 223)', // 高处的深蓝色
'horizon-blend': 0.02, // 地平线混合
'space-color': 'rgb(11, 11, 25)', // 太空的颜色
'star-intensity': 0.6 // 星星强度
});
});
</script>
</body>
</html>