首页leaflet加载历史卫星影像，并写成html

leaflet加载历史卫星影像，并写成html

时间: 2024-12-16 14:26:16 浏览: 12

Leaflet是一个流行的开源JavaScript库，用于创建交互式地图。如果你想在HTML页面上加载历史卫星影像，可以利用像Google Maps API的Historical Imagery功能，或者一些专门提供卫星图像数据的服务，如NASA WorldWind或者OpenStreetMap的历史tiles。以下是一个简单的示例，展示如何使用Leaflet加载来自NASA WorldWind的历史卫星图像： ```html <!DOCTYPE html> <html lang="en"> <head> <title>Leaflet Historical Satellite Image</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> </head> <body> <div id="map" style="height: 600px; width: 100%;"></div> <script> // 创建 Leaflet 地图实例 var map = L.map('map').setView([your_latitude], [your_longitude], 13); // 加载历史卫星图层 L.tileLayer('http://{s}.worldwind.arc.nasa.gov/worldwind-tiles/wms/ows?service=WMS&version=1.1.1&request=GetMap&layers=NASA_WorldWind_Historic_Airborne_Imagery&styles=&format=image/jpeg&transparent=true&width={width}&height={height}&crs=EPSG:4326&BBOX={bbox}', { attribution: 'Data from NASA WorldWind', maxZoom: 18, subdomains: ['thumb', 'tl', 'tr', 'br'], }).addTo(map); </script> </body> </html> ``` 在这个示例中，你需要替换`[your_latitude]`和`[your_longitude]`为你要显示的具体地理位置坐标。请注意，实际使用时可能需要获取API密钥并调整URL结构。

阅读全文