【前端】【高德地图WebJs】【知识体系搭建】图层知识点——＞热力图，瓦片图层，自定义图层

高德地图WebJS - 图层知识点

1. AMap.Heatmap 热力图

1.1 基础用法

热力图用于展示数据的密度分布，常用于人流量、销售额等数据可视化。

// 准备热力图数据
var heatmapData = [{"lng": 116.191031, "lat": 39.988585, "count": 10},{"lng": 116.389275, "lat": 39.925818, "count": 15},{"lng": 116.287444, "lat": 39.810742, "count": 20},{"lng": 116.481707, "lat": 39.940089, "count": 25},{"lng": 116.410588, "lat": 39.880172, "count": 30}
];// 创建热力图实例
var heatmap = new AMap.Heatmap(map, {radius: 25, // 热力图的半径，单位：像素opacity: [0, 0.8], // 热力图的透明度，分别对应最小权重和最大权重的透明度gradient: { // 热力图的渐变色0.4: 'blue',0.6: 'cyan',0.7: 'lime',0.8: 'yellow',1.0: 'red'}
});// 设置热力图数据
heatmap.setDataSet({data: heatmapData,max: 30 // 数据的最大权重值
});

1.2 热力图配置选项

属性	类型	说明
radius	Number	热力图的半径，单位：像素，默认30
opacity	Array	透明度区间[min, max]，默认[0, 1]
gradient	Object	渐变色配置，键为0-1的数值，值为颜色
blur	Number	模糊半径，默认15
zooms	Array	显示的缩放级别范围，如[3, 20]

1.3 动态热力图

// 动态热力图管理器
class DynamicHeatmap {constructor(map, options = {}) {this.map = map;this.heatmap = new AMap.Heatmap(map, {radius: options.radius || 25,opacity: options.opacity || [0, 0.8],gradient: options.gradient || {0.4: 'blue',0.6: 'cyan', 0.7: 'lime',0.8: 'yellow',1.0: 'red'}});this.dataPoints = [];this.maxWeight = 1;}// 添加数据点addDataPoint(lng, lat, weight = 1) {this.dataPoints.push({lng: lng,lat: lat,count: weight});// 更新最大权重this.maxWeight = Math.max(this.maxWeight, weight);// 更新热力图this.updateHeatmap();}// 批量添加数据点addDataPoints(points) {points.forEach(point => {this.dataPoints.push({lng: point.lng,lat: point.lat,count: point.count || 1});this.maxWeight = Math.max(this.maxWeight, point.count || 1);});this.updateHeatmap();}// 更新热力图updateHeatmap() {this.heatmap.setDataSet({data: this.dataPoints,max: this.maxWeight});}// 清除数据clearData() {this.dataPoints = [];this.maxWeight = 1;this.heatmap.setDataSet({data: [],max: 1});}// 显示/隐藏热力图setVisible(visible) {if (visible) {this.heatmap.show();} else {this.heatmap.hide();}}// 更新样式updateStyle(options) {this.heatmap.setOptions(options);}
}// 使用示例
var dynamicHeatmap = new DynamicHeatmap(map, {radius: 30,opacity: [0, 0.9]
});// 模拟实时数据添加
setInterval(function() {var lng = 116.397428 + (Math.random() - 0.5) * 0.1;var lat = 39.90923 + (Math.random() - 0.5) * 0.1;var weight = Math.floor(Math.random() * 50) + 1;dynamicHeatmap.addDataPoint(lng, lat, weight);
}, 1000);

1.4 时间序列热力图

// 时间序列热力图
class TimeSeriesHeatmap {constructor(map, timeData) {this.map = map;this.timeData = timeData; // 按时间分组的数据this.currentTimeIndex = 0;this.heatmap = new AMap.Heatmap(map, {radius: 25,opacity: [0, 0.8],gradient: {0.4: 'blue',0.6: 'cyan',0.7: 'lime', 0.8: 'yellow',1.0: 'red'}});this.isPlaying = false;this.playInterval = null;}// 显示指定时间的数据showTimeData(timeIndex) {if (timeIndex >= 0 && timeIndex < this.timeData.length) {this.currentTimeIndex = timeIndex;var data = this.timeData[timeIndex];this.heatmap.setDataSet({data: data.points,max: data.max});// 触发时间变化事件this.onTimeChange && this.onTimeChange(timeIndex, data.timestamp);}}// 播放时间序列play(speed = 1000) {if (this.isPlaying) return;this.isPlaying = true;this.playInterval = setInterval(() => {this.currentTimeIndex++;if (this.currentTimeIndex >= this.timeData.length) {this.currentTimeIndex = 0; // 循环播放}this.showTimeData(this.currentTimeIndex);}, speed);}// 暂停播放pause() {this.isPlaying = false;if (this.playInterval) {clearInterval(this.playInterval);this.playInterval = null;}}// 停止播放stop() {this.pause();this.currentTimeIndex = 0;this.showTimeData(0);}
}// 使用示例
var timeSeriesData = [{timestamp: '2024-01-01 08:00',max: 20,points: [{lng: 116.397428, lat: 39.90923, count: 10},{lng: 116.398428, lat: 39.91023, count: 15}]},{timestamp: '2024-01-01 12:00',max: 30,points: [{lng: 116.397428, lat: 39.90923, count: 20},{lng: 116.398428, lat: 39.91023, count: 25}]}
];var timeHeatmap = new TimeSeriesHeatmap(map, timeSeriesData);
timeHeatmap.onTimeChange = function(index, timestamp) {console.log('时间变化:', timestamp);
};timeHeatmap.play(2000); // 2秒切换一次

2. AMap.TileLayer 瓦片图层

2.1 基础用法

瓦片图层用于加载自定义的地图瓦片服务。

// 创建自定义瓦片图层
var tileLayer = new AMap.TileLayer({tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png', // 瓦片服务地址zIndex: 10, // 图层叠加顺序opacity: 0.8, // 透明度zooms: [3, 18], // 支持的缩放级别detectRetina: true // 是否检测Retina屏幕
});// 添加到地图
map.add(tileLayer);

2.2 常用瓦片服务

// OpenStreetMap瓦片
var osmLayer = new AMap.TileLayer({tileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',zIndex: 10,opacity: 1
});// 卫星图层
var satelliteLayer = new AMap.TileLayer.Satellite({zIndex: 10,opacity: 0.8
});// 路网图层
var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex: 15,opacity: 0.8
});// 实时交通图层
var trafficLayer = new AMap.TileLayer.Traffic({zIndex: 20,opacity: 0.8,autoRefresh: true, // 自动刷新interval: 180 // 刷新间隔（秒）
});// 添加到地图
map.add([satelliteLayer, roadNetLayer, trafficLayer]);

2.3 瓦片图层管理器

// 瓦片图层管理器
class TileLayerManager {constructor(map) {this.map = map;this.layers = new Map();this.currentBaseLayer = null;}// 添加图层addLayer(id, layer, isBaseLayer = false) {this.layers.set(id, {layer: layer,isBaseLayer: isBaseLayer,visible: false});return this;}// 显示图层showLayer(id) {var layerInfo = this.layers.get(id);if (layerInfo && !layerInfo.visible) {this.map.add(layerInfo.layer);layerInfo.visible = true;// 如果是底图图层，隐藏其他底图if (layerInfo.isBaseLayer) {this.hideOtherBaseLayers(id);this.currentBaseLayer = id;}}return this;}// 隐藏图层hideLayer(id) {var layerInfo = this.layers.get(id);if (layerInfo && layerInfo.visible) {this.map.remove(layerInfo.layer);layerInfo.visible = false;}return this;}// 隐藏其他底图图层hideOtherBaseLayers(currentId) {this.layers.forEach((layerInfo, id) => {if (id !== currentId && layerInfo.isBaseLayer && layerInfo.visible) {this.hideLayer(id);}});}// 切换图层显示状态toggleLayer(id) {var layerInfo = this.layers.get(id);if (layerInfo) {if (layerInfo.visible) {this.hideLayer(id);} else {this.showLayer(id);}}return this;}// 设置图层透明度setLayerOpacity(id, opacity) {var layerInfo = this.layers.get(id);if (layerInfo) {layerInfo.layer.setOpacity(opacity);}return this;}// 获取所有图层信息getAllLayers() {var result = [];this.layers.forEach((layerInfo, id) => {result.push({id: id,isBaseLayer: layerInfo.isBaseLayer,visible: layerInfo.visible,opacity: layerInfo.layer.getOpacity()});});return result;}// 清除所有图层clearAll() {this.layers.forEach((layerInfo, id) => {if (layerInfo.visible) {this.map.remove(layerInfo.layer);}});this.layers.clear();this.currentBaseLayer = null;}
}// 使用示例
var layerManager = new TileLayerManager(map);// 添加不同类型的图层
layerManager.addLayer('osm', new AMap.TileLayer({tileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}), true) // 底图图层.addLayer('satellite', new AMap.TileLayer.Satellite(), true) // 卫星底图.addLayer('traffic', new AMap.TileLayer.Traffic({autoRefresh: true})) // 交通图层.addLayer('roadnet', new AMap.TileLayer.RoadNet()); // 路网图层// 显示卫星底图
layerManager.showLayer('satellite');// 显示交通图层
layerManager.showLayer('traffic');

3. 自定义图层开发

3.1 Canvas图层

// 自定义Canvas图层
class CustomCanvasLayer {constructor(map, options = {}) {this.map = map;this.options = {zIndex: 10,opacity: 1,...options};this.canvas = null;this.context = null;this.isVisible = false;this.initCanvas();this.bindEvents();}// 初始化CanvasinitCanvas() {this.canvas = document.createElement('canvas');this.context = this.canvas.getContext('2d');// 设置Canvas样式this.canvas.style.position = 'absolute';this.canvas.style.top = '0';this.canvas.style.left = '0';this.canvas.style.pointerEvents = 'none';this.canvas.style.zIndex = this.options.zIndex;this.canvas.style.opacity = this.options.opacity;this.updateCanvasSize();}// 绑定地图事件bindEvents() {this.map.on('resize', () => {this.updateCanvasSize();this.render();});this.map.on('moveend', () => {this.render();});this.map.on('zoomend', () => {this.render();});}// 更新Canvas尺寸updateCanvasSize() {var size = this.map.getSize();this.canvas.width = size.width;this.canvas.height = size.height;this.canvas.style.width = size.width + 'px';this.canvas.style.height = size.height + 'px';}// 显示图层show() {if (!this.isVisible) {this.map.getContainer().appendChild(this.canvas);this.isVisible = true;this.render();}}// 隐藏图层hide() {if (this.isVisible) {this.map.getContainer().removeChild(this.canvas);this.isVisible = false;}}// 渲染方法（子类需要重写）render() {// 清除画布this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);// 子类实现具体绘制逻辑this.draw(this.context);}// 绘制方法（子类重写）draw(context) {// 默认实现：绘制一个简单的网格context.strokeStyle = 'rgba(255, 0, 0, 0.3)';context.lineWidth = 1;var gridSize = 50;// 绘制垂直线for (var x = 0; x < this.canvas.width; x += gridSize) {context.beginPath();context.moveTo(x, 0);context.lineTo(x, this.canvas.height);context.stroke();}// 绘制水平线for (var y = 0; y < this.canvas.height; y += gridSize) {context.beginPath();context.moveTo(0, y);context.lineTo(this.canvas.width, y);context.stroke();}}// 经纬度转屏幕坐标lngLatToPixel(lnglat) {return this.map.lngLatToContainer(lnglat);}// 屏幕坐标转经纬度pixelToLngLat(pixel) {return this.map.containerToLngLat(pixel);}// 销毁图层destroy() {this.hide();this.canvas = null;this.context = null;}
}// 风场图层示例
class WindFieldLayer extends CustomCanvasLayer {constructor(map, windData, options = {}) {super(map, options);this.windData = windData; // 风场数据this.particles = [];this.maxParticles = options.maxParticles || 1000;this.initParticles();this.startAnimation();}// 初始化粒子initParticles() {for (var i = 0; i < this.maxParticles; i++) {this.particles.push({x: Math.random() * this.canvas.width,y: Math.random() * this.canvas.height,vx: (Math.random() - 0.5) * 2,vy: (Math.random() - 0.5) * 2,life: Math.random() * 100});}}// 绘制风场draw(context) {// 设置混合模式context.globalCompositeOperation = 'screen';context.fillStyle = 'rgba(0, 0, 0, 0.05)';context.fillRect(0, 0, this.canvas.width, this.canvas.height);context.globalCompositeOperation = 'lighter';// 绘制粒子this.particles.forEach(particle => {// 更新粒子位置particle.x += particle.vx;particle.y += particle.vy;particle.life--;// 边界检查if (particle.x < 0 || particle.x > this.canvas.width ||particle.y < 0 || particle.y > this.canvas.height ||particle.life <= 0) {// 重置粒子particle.x = Math.random() * this.canvas.width;particle.y = Math.random() * this.canvas.height;particle.life = Math.random() * 100;}// 绘制粒子var alpha = particle.life / 100;context.fillStyle = `rgba(255, 255, 255, ${alpha})`;context.fillRect(particle.x, particle.y, 1, 1);});}// 开始动画startAnimation() {var animate = () => {if (this.isVisible) {this.render();requestAnimationFrame(animate);}};animate();}
}// 使用示例
var windLayer = new WindFieldLayer(map, [], {maxParticles: 500,zIndex: 15
});windLayer.show();

3.2 WebGL图层

// WebGL自定义图层基类
class WebGLLayer {constructor(map, options = {}) {this.map = map;this.options = options;this.canvas = null;this.gl = null;this.program = null;this.isVisible = false;this.initWebGL();this.bindEvents();}// 初始化WebGLinitWebGL() {this.canvas = document.createElement('canvas');this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');if (!this.gl) {console.error('WebGL not supported');return;}// 设置Canvas样式this.canvas.style.position = 'absolute';this.canvas.style.top = '0';this.canvas.style.left = '0';this.canvas.style.pointerEvents = 'none';this.updateCanvasSize();this.initShaders();}// 初始化着色器initShaders() {var vertexShaderSource = `attribute vec2 a_position;uniform vec2 u_resolution;void main() {vec2 zeroToOne = a_position / u_resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);}`;var fragmentShaderSource = `precision mediump float;uniform vec4 u_color;void main() {gl_FragColor = u_color;}`;var vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);var fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);this.program = this.createProgram(vertexShader, fragmentShader);}// 创建着色器createShader(type, source) {var shader = this.gl.createShader(type);this.gl.shaderSource(shader, source);this.gl.compileShader(shader);if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));this.gl.deleteShader(shader);return null;}return shader;}// 创建程序createProgram(vertexShader, fragmentShader) {var program = this.gl.createProgram();this.gl.attachShader(program, vertexShader);this.gl.attachShader(program, fragmentShader);this.gl.linkProgram(program);if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {console.error('Program link error:', this.gl.getProgramInfoLog(program));this.gl.deleteProgram(program);return null;}return program;}// 绑定事件bindEvents() {this.map.on('resize', () => {this.updateCanvasSize();this.render();});this.map.on('moveend', () => {this.render();});this.map.on('zoomend', () => {this.render();});}// 更新Canvas尺寸updateCanvasSize() {var size = this.map.getSize();this.canvas.width = size.width;this.canvas.height = size.height;this.canvas.style.width = size.width + 'px';this.canvas.style.height = size.height + 'px';if (this.gl) {this.gl.viewport(0, 0, size.width, size.height);}}// 显示图层show() {if (!this.isVisible) {this.map.getContainer().appendChild(this.canvas);this.isVisible = true;this.render();}}// 隐藏图层hide() {if (this.isVisible) {this.map.getContainer().removeChild(this.canvas);this.isVisible = false;}}// 渲染render() {if (!this.gl || !this.program) return;this.gl.clearColor(0, 0, 0, 0);this.gl.clear(this.gl.COLOR_BUFFER_BIT);this.gl.useProgram(this.program);// 设置分辨率var resolutionLocation = this.gl.getUniformLocation(this.program, 'u_resolution');this.gl.uniform2f(resolutionLocation, this.canvas.width, this.canvas.height);// 子类实现具体绘制this.draw();}// 绘制方法（子类重写）draw() {// 默认实现}// 销毁destroy() {this.hide();if (this.gl) {this.gl.deleteProgram(this.program);}this.canvas = null;this.gl = null;}
}

4. 图层管理和切换

4.1 图层控制面板

// 图层控制面板
class LayerControlPanel {constructor(map, containerId) {this.map = map;this.container = document.getElementById(containerId);this.layerManager = new TileLayerManager(map);this.initUI();}// 初始化UIinitUI() {this.container.innerHTML = `<div class="layer-control-panel"><h3>图层控制</h3><div class="base-layers"><h4>底图图层</h4><div id="base-layer-list"></div></div><div class="overlay-layers"><h4>叠加图层</h4><div id="overlay-layer-list"></div></div></div>`;// 添加样式var style = document.createElement('style');style.textContent = `.layer-control-panel {background: white;padding: 15px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);max-width: 250px;}.layer-item {margin: 8px 0;display: flex;align-items: center;justify-content: space-between;}.layer-item label {flex: 1;margin-left: 8px;}.opacity-slider {width: 60px;margin-left: 10px;}`;document.head.appendChild(style);}// 添加底图图层addBaseLayer(id, name, layer) {this.layerManager.addLayer(id, layer, true);var baseLayerList = document.getElementById('base-layer-list');var layerItem = document.createElement('div');layerItem.className = 'layer-item';layerItem.innerHTML = `<input type="radio" name="base-layer" value="${id}" id="base-${id}"><label for="base-${id}">${name}</label>`;var radio = layerItem.querySelector('input');radio.addEventListener('change', () => {if (radio.checked) {this.layerManager.showLayer(id);}});baseLayerList.appendChild(layerItem);}// 添加叠加图层addOverlayLayer(id, name, layer) {this.layerManager.addLayer(id, layer, false);var overlayLayerList = document.getElementById('overlay-layer-list');var layerItem = document.createElement('div');layerItem.className = 'layer-item';layerItem.innerHTML = `<input type="checkbox" value="${id}" id="overlay-${id}"><label for="overlay-${id}">${name}</label><input type="range" class="opacity-slider" min="0" max="100" value="80" id="opacity-${id}">`;var checkbox = layerItem.querySelector('input[type="checkbox"]');var opacitySlider = layerItem.querySelector('.opacity-slider');checkbox.addEventListener('change', () => {if (checkbox.checked) {this.layerManager.showLayer(id);} else {this.layerManager.hideLayer(id);}});opacitySlider.addEventListener('input', () => {var opacity = opacitySlider.value / 100;this.layerManager.setLayerOpacity(id, opacity);});overlayLayerList.appendChild(layerItem);}
}// 使用示例
var layerControl = new LayerControlPanel(map, 'layer-control-container');// 添加底图图层
layerControl.addBaseLayer('standard', '标准地图', new AMap.TileLayer());
layerControl.addBaseLayer('satellite', '卫星地图', new AMap.TileLayer.Satellite());// 添加叠加图层
layerControl.addOverlayLayer('traffic', '实时交通', new AMap.TileLayer.Traffic());
layerControl.addOverlayLayer('roadnet', '路网图层', new AMap.TileLayer.RoadNet());

4.2 图层预设管理

// 图层预设管理器
class LayerPresetManager {constructor(layerManager) {this.layerManager = layerManager;this.presets = new Map();}// 保存当前图层状态为预设savePreset(name) {var currentState = this.layerManager.getAllLayers();this.presets.set(name, {timestamp: Date.now(),layers: currentState.map(layer => ({id: layer.id,visible: layer.visible,opacity: layer.opacity}))});console.log(`预设 "${name}" 已保存`);}// 应用预设applyPreset(name) {var preset = this.presets.get(name);if (!preset) {console.warn(`预设 "${name}" 不存在`);return;}// 先隐藏所有图层var allLayers = this.layerManager.getAllLayers();allLayers.forEach(layer => {if (layer.visible) {this.layerManager.hideLayer(layer.id);}});// 应用预设状态preset.layers.forEach(layerState => {if (layerState.visible) {this.layerManager.showLayer(layerState.id);}this.layerManager.setLayerOpacity(layerState.id, layerState.opacity);});console.log(`预设 "${name}" 已应用`);}// 删除预设deletePreset(name) {if (this.presets.delete(name)) {console.log(`预设 "${name}" 已删除`);} else {console.warn(`预设 "${name}" 不存在`);}}// 获取所有预设getAllPresets() {var result = [];this.presets.forEach((preset, name) => {result.push({name: name,timestamp: preset.timestamp,layerCount: preset.layers.length});});return result;}// 导出预设exportPresets() {var data = {};this.presets.forEach((preset, name) => {data[name] = preset;});return JSON.stringify(data, null, 2);}// 导入预设importPresets(jsonData) {try {var data = JSON.parse(jsonData);Object.keys(data).forEach(name => {this.presets.set(name, data[name]);});console.log('预设导入成功');} catch (error) {console.error('预设导入失败:', error);}}
}// 使用示例
var presetManager = new LayerPresetManager(layerManager);// 保存预设
presetManager.savePreset('白天模式');
presetManager.savePreset('夜间模式');
presetManager.savePreset('交通模式');// 应用预设
presetManager.applyPreset('交通模式');// 获取所有预设
console.log('所有预设:', presetManager.getAllPresets());