从单个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%; }
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.9);
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
border-radius: 3px;
font-family: Arial, sans-serif;
font-size: 14px;
max-width: 300px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.map-overlay h3 {
margin: 0 0 10px 0;
font-size: 16px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.map-overlay p {
margin: 0 0 10px 0;
line-height: 1.4;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
<h3>从单个GeoJSON源添加多个几何图形</h3>
<p>此示例展示了如何从单个GeoJSON源中加载不同类型的几何图形（点、线和多边形），并为每种类型应用不同的样式。</p>
</div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-100, 40],
zoom: 3
});
map.on('load', () => {
// 添加单个GeoJSON源，其中包含不同类型的几何图形
map.addSource('multiple-geometry-source', {
type: 'geojson',
data: {
'type': 'FeatureCollection',
'features': [
// 1. 点几何图形
{
'type': 'Feature',
'properties': {
'name': '纽约市',
'type': 'city',
'population': 8804190
},
'geometry': {
'type': 'Point',
'coordinates': [-74.0060, 40.7128]
}
},
{
'type': 'Feature',
'properties': {
'name': '洛杉矶',
'type': 'city',
'population': 3898747
},
'geometry': {
'type': 'Point',
'coordinates': [-118.2437, 34.0522]
}
},
{
'type': 'Feature',
'properties': {
'name': '芝加哥',
'type': 'city',
'population': 2746388
},
'geometry': {
'type': 'Point',
'coordinates': [-87.6298, 41.8781]
}
},
// 2. 线几何图形 - 高速公路
{
'type': 'Feature',
'properties': {
'name': 'I-90 高速公路',
'type': 'highway'
},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.3321, 47.6062], // 西雅图
[-87.6298, 41.8781], // 芝加哥
[-74.0060, 40.7128] // 纽约
]
}
},
{
'type': 'Feature',
'properties': {
'name': 'I-10 高速公路',
'type': 'highway'
},
'geometry': {
'type': 'LineString',
'coordinates': [
[-118.2437, 34.0522], // 洛杉矶
[-95.3698, 29.7604], // 休斯顿
[-81.3790, 28.5383] // 奥兰多
]
}
},
// 3. 多边形几何图形 - 国家公园
{
'type': 'Feature',
'properties': {
'name': '黄石国家公园',
'type': 'park'
},
'geometry': {
'type': 'Polygon',
'coordinates': [[
[-111.2, 45.0],
[-111.2, 44.5],
[-110.0, 44.5],
[-110.0, 45.0],
[-111.2, 45.0]
]]
}
},
{
'type': 'Feature',
'properties': {
'name': '大峡谷国家公园',
'type': 'park'
},
'geometry': {
'type': 'Polygon',
'coordinates': [[
[-112.3, 36.5],
[-112.3, 36.0],
[-111.8, 36.0],
[-111.8, 36.5],
[-112.3, 36.5]
]]
}
}
]
}
});
// 为点几何图形添加图层
map.addLayer({
'id': 'city-points',
'type': 'circle',
'source': 'multiple-geometry-source',
'filter': ['==', '$type', 'Point'], // 仅使用点几何图形
'paint': {
'circle-radius': [
'interpolate', ['linear'], ['get', 'population'],
1000000, 5,
8000000, 15
],
'circle-color': '#4264fb',
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
// 为线几何图形添加图层
map.addLayer({
'id': 'highway-lines',
'type': 'line',
'source': 'multiple-geometry-source',
'filter': ['==', '$type', 'LineString'], // 仅使用线几何图形
'paint': {
'line-width': 3,
'line-color': '#e55e5e',
'line-dasharray': [2, 1]
}
});
// 为多边形几何图形添加图层
map.addLayer({
'id': 'park-polygons',
'type': 'fill',
'source': 'multiple-geometry-source',
'filter': ['==', '$type', 'Polygon'], // 仅使用多边形几何图形
'paint': {
'fill-color': '#00AA46',
'fill-opacity': 0.5,
'fill-outline-color': '#006E2E'
}
});
// 为所有特征添加标签
map.addLayer({
'id': 'feature-labels',
'type': 'symbol',
'source': 'multiple-geometry-source',
'layout': {
'text-field': ['get', 'name'],
'text-size': 14,
'text-offset': [0, -1.5],
'text-anchor': 'bottom'
},
'paint': {
'text-color': '#333',
'text-halo-color': '#fff',
'text-halo-width': 1.5
}
});
});
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
</script>
</body>
</html>