mapboxgl 地图 色斑图实现 完整代码
时间: 2025-06-15 07:22:30 浏览: 21
Mapbox GL JS 是一个用于创建交互式地图的应用程序库,它基于 Leaflet.js,并提供了一些高级特性。要在 Mapbox GL JS 中实现色斑图(也称为热力图或密度图),通常会使用地理编码数据并计算每个区域的点密度。以下是一个简单的示例代码,展示如何在一个地图上画出色斑图:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mapbox GL JS Heatmap Example</title>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; // 替换为你的 Mapbox API 访问令牌
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11', // 可选的基础样式
center: [-74.5, 40], // 纽约坐标
zoom: 9
});
// 假设 data 是包含地理编码数据(经度和纬度)的对象数组
var data = [
/* ... 数据列表 */
];
// 创建一个函数来计算每个特征区间的权重
function getWeight(feature) {
return 1 / (feature.properties.distance * feature.properties.distance); // 这里只是一个简单的距离衰减例子
}
map.on('load', function() {
// 使用GeoJSON数据源
map.addSource('heatmap-source', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: data.map(function(feature) {
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [feature.longitude, feature.latitude]
},
properties: {
weight: getWeight(feature)
}
};
})
}
});
// 添加色斑图层
map.addLayer({
id: 'heatmap-layer',
type: 'heatmap',
source: 'heatmap-source',
paint: {
'heatmap-color': {
stops: [[0, 'rgba(0, 0, 0, 0)'], [1, 'orange']],
maxzoom: 18,
blur: 15
},
'heatmap-opacity': ['interpolate', ['linear'], ['get', 'weight'], 0, 0.1, 1, 0.6],
}
});
});
</script>
</body>
</html>
```
请注意,这只是一个基础示例,实际应用中你可能需要处理更复杂的数据结构、服务请求、以及动态更新数据。同时,你需要替换 `YOUR_ACCESS_TOKEN` 为你自己的 Mapbox API 访问令牌。
阅读全文
相关推荐



















