Leaflet-GeoTIFF 使用教程

最新推荐文章于 2025-01-24 09:19:09 发布

喻昊沙Egerton

最新推荐文章于 2025-01-24 09:19:09 发布

阅读量1.2k

点赞数 18

本文链接：https://blog.csdn.net/gitblog_00655/article/details/141238418

版权

Leaflet-GeoTIFF 使用教程

项目地址:https://gitcode.com/gh_mirrors/le/leaflet-geotiff

项目介绍

Leaflet-GeoTIFF 是一个用于在 Leaflet 地图上显示 GeoTIFF 栅格数据的开源插件。该项目支持多种数据可视化方式，包括颜色渲染、矢量箭头等，适用于地理空间数据的展示和分析。

项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Leaflet 和 Leaflet-GeoTIFF：

npm install leaflet leaflet-geotiff

引入必要的库

在你的 HTML 文件中引入 Leaflet 和 Leaflet-GeoTIFF 的相关脚本和样式：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-geotiff"></script>
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 你的代码将放在这里
    </script>
</body>
</html>

初始化地图和 GeoTIFF 图层

在 <script> 标签中添加以下代码来初始化地图并加载 GeoTIFF 数据：

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

const geotiffLayer = L.leafletGeotiff(
    'path/to/your/geotiff/file.tif',
    {
        renderer: L.LeafletGeotiff.plotty({
            colorScale: 'viridis'
        })
    }
).addTo(map);