问OpenLayers 热力图不显示？

提问于 2025-11-17 09:07:43

回答 0关注 0查看 50

我在一个大屏项目上使用openLayers3写一个热力图。在本地运行时通过缩小浏览器显示比例查看大屏页面，第一次打开页面显示热力时是正常的，再次刷新页面后热力图不显示了。将浏览器缩放比例放大后热力图正常显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenLayers 热力图</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@8.2.0/ol.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #map {
      width: 100%;
      height: 100vh;
    }
    .info {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px;
      border-radius: 5px;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div class="info">
    <h3>OpenLayers 热力图</h3>
    <p>随机生成的热力图数据</p>
  </div>
  <div id="map"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/ol@8.2.0/dist/ol.js"></script>
  <script>
    // 生成随机热力图数据点
    function generateRandomHeatmapData(count = 200) {
      const features = [];
      // 中国大致范围（经度：73-135，纬度：18-54）
      const minLon = 100;
      const maxLon = 120;
      const minLat = 30;
      const maxLat = 45;
      
      for (let i = 0; i < count; i++) {
        // 随机生成经纬度
        const lon = minLon + Math.random() * (maxLon - minLon);
        const lat = minLat + Math.random() * (maxLat - minLat);
        
        // 随机生成权重值（0.1 到 1.0）
        const weight = 0.1 + Math.random() * 0.9;
        
        const feature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
          weight: weight
        });
        
        features.push(feature);
      }
      
      return features;
    }
    
    // 创建热力图图层
    const heatmapLayer = new ol.layer.Heatmap({
      source: new ol.source.Vector({
        features: generateRandomHeatmapData(300)
      }),
      blur: 15,
      radius: 20,
      weight: function(feature) {
        return feature.get('weight') || 1;
      },
      gradient: [
        'rgba(0, 0, 255, 0)',      // 蓝色（低）
        'rgba(0, 255, 255, 0.5)',  // 青色
        'rgba(0, 255, 0, 0.7)',    // 绿色
        'rgba(255, 255, 0, 0.8)',  // 黄色
        'rgba(255, 0, 0, 1)'       // 红色（高）
      ]
    });
    
    // 创建底图图层
    const baseLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    
    // 创建地图
    const map = new ol.Map({
      target: 'map',
      layers: [baseLayer, heatmapLayer],
      view: new ol.View({
        center: ol.proj.fromLonLat([110, 37.5]),
        zoom: 5
      })
    });
    
    // 控制台输出数据点数量
    console.log('热力图数据点已生成：', heatmapLayer.getSource().getFeatures().length);
  </script>
</body>
</html>

我想知道这是什么原因？

openlayers

openlayers-3

浏览器

回答

和开发者交流更多问题细节吧，去写回答

相似问题

问OpenLayers 热力图不显示？

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐