leaflet 加载shp文件
时间: 2023-10-16 07:09:42 浏览: 84
要在 Leaflet 中加载 shp 文件,需要使用一个称为 leaflet-omnivore 的插件。以下是使用该插件加载 shp 文件的基本步骤:
1. 将 leaflet-omnivore 的 JS 和 CSS 文件引入你的 HTML 文件中。你可以从这里下载:https://github.com/mapbox/leaflet-omnivore。
```html
<link rel="stylesheet" href="leaflet-omnivore.min.css">
<script src="leaflet-omnivore.min.js"></script>
```
2. 创建一个 Leaflet 的地图对象并将其添加到你的页面中。例如:
```javascript
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
```
3. 使用 leaflet-omnivore 中的 `leafletOmnivore.shp` 函数加载 shp 文件并将其添加到地图中。例如:
```javascript
L.leafletOmnivore.shp('path/to/your/file.shp').addTo(map);
```
完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Omnivore Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-omnivore/leaflet-omnivore.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-omnivore/leaflet-omnivore.min.js"></script>
<style>
#map {
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
L.leafletOmnivore.shp('path/to/your/file.shp').addTo(map);
</script>
</body>
</html>
```