查看本地GeoJSON文件
使用传统方法加载本地GeoJSON文件;
<!DOCTYPE html>
<html lang="en">
<head>
<title>查看本地GeoJSON文件</title>
<meta property="og:description" content="使用传统方法加载本地GeoJSON文件" />
<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%; }
.file-input-container {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
width: 250px;
background: white;
border-radius: 3px;
padding: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
}
.file-input-header {
font-weight: bold;
margin-bottom: 10px;
}
#file-input {
display: none;
}
.file-label {
display: inline-block;
padding: 8px 12px;
background: #4285F4;
color: white;
cursor: pointer;
border-radius: 3px;
margin-top: 5px;
}
#file-name {
margin-top: 8px;
font-style: italic;
word-break: break-all;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="file-input-container">
<div class="file-input-header">查看本地GeoJSON文件</div>
<div>选择一个本地的.geojson或.json文件加载到地图上</div>
<input type="file" id="file-input" accept=".geojson,.json">
<label for="file-input" class="file-label">选择文件</label>
<div id="file-name"></div>
</div>
<script>
// 创建地图
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [0, 0],
zoom: 1
});
// 获取DOM元素
const fileInput = document.getElementById('file-input');
const fileNameDisplay = document.getElementById('file-name');
// 添加文件选择监听器
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
// 显示所选文件的名称
fileNameDisplay.textContent = file.name;
// 创建文件读取器
const reader = new FileReader();
// 设置文件读取完成后的处理函数
reader.onload = function(e) {
try {
// 解析GeoJSON数据
const geoJsonData = JSON.parse(e.target.result);
// 移除已有的源和图层（如果存在）
if (map.getSource('uploaded-geojson')) {
if (map.getLayer('geojson-polygons')) {
map.removeLayer('geojson-polygons');
}
if (map.getLayer('geojson-lines')) {
map.removeLayer('geojson-lines');
}
if (map.getLayer('geojson-points')) {
map.removeLayer('geojson-points');
}
map.removeSource('uploaded-geojson');
}
// 添加新的GeoJSON数据源
map.addSource('uploaded-geojson', {
type: 'geojson',
data: geoJsonData
});
// 添加多边形图层
map.addLayer({
'id': 'geojson-polygons',
'type': 'fill',
'source': 'uploaded-geojson',
'paint': {
'fill-color': '#88888855',
'fill-outline-color': 'red'
},
'filter': ['==', '$type', 'Polygon']
});
// 添加线图层
map.addLayer({
'id': 'geojson-lines',
'type': 'line',
'source': 'uploaded-geojson',
'paint': {
'line-color': '#ff0000',
'line-width': 2
},
'filter': ['==', '$type', 'LineString']
});
// 添加点图层
map.addLayer({
'id': 'geojson-points',
'type': 'circle',
'source': 'uploaded-geojson',
'paint': {
'circle-radius': 5,
'circle-color': '#0000ff'
},
'filter': ['==', '$type', 'Point']
});
// 自动缩放到GeoJSON数据的范围
try {
const bounds = new maplibregl.LngLatBounds();
geoJsonData.features.forEach(feature => {
if (feature.geometry && feature.geometry.coordinates) {
if (feature.geometry.type === 'Point') {
bounds.extend(feature.geometry.coordinates);
} else if (feature.geometry.type === 'LineString') {
feature.geometry.coordinates.forEach(coord => bounds.extend(coord));
} else if (feature.geometry.type === 'Polygon') {
// 对于多边形，取第一个环（外环）
feature.geometry.coordinates[0].forEach(coord => bounds.extend(coord));
}
}
});
if (!bounds.isEmpty()) {
map.fitBounds(bounds, { padding: 50 });
}
} catch (e) {
console.error('计算边界失败:', e);
}
} catch (e) {
alert('无法解析GeoJSON文件。错误: ' + e.message);
console.error('解析错误:', e);
}
};
// 将文件作为文本读取
reader.readAsText(file);
}
});
</script>
</body>
</html>