Azure Maps自定义GeoJSON数据源热力图无法渲染问题求助

问题描述 #

我是Azure Maps新手，尝试生成加权热力图展示特定区域人口情况。使用自定义GeoJSON作为数据源时，热力图图层无法渲染；但使用USGS地震数据URL时，热力图可正常显示。

原代码：

map.events.add('ready', function () {
    map.events.add('load', function (e) {
        
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);
    
     //datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');   
     alert(geoJson);
     datasource.add(geoJson);

     map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
        radius: 50,
        color: [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0, 'rgba(33,102,172,0)',
            0.2, 'rgb(103,169,207)',
            0.4, 'rgb(209,229,240)',
            0.6, 'rgb(253,219,199)',
            0.8, 'rgb(239,138,98)',
            1, 'rgb(178,24,43)'
        ]
    }), 'labels');
    });
});

原GeoJSON数据：

{
   "type":"FeatureCollection",
   "features":[ 
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.5570726284386,
               25.3115021617515
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.5570726284386,
               25.3115021617515
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.5570726284386,
               25.391562807081
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.5570726284386,
               25.391562807081
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               35.4343604091702,
               33.9136459680463
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               35.5220012295491,
               33.8847298539905
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"40"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.4729695383047,
               25.2856697056661
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"20"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               35.4343604091702,
               33.7574366679259
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               35.4343604091702,
               33.7574366679259
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.4729695383047,
               25.2856697056661
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               35.5220012295491,
               33.8847298539905
            ]
         }
      }
   ]
}

问题排查 #

1. 事件嵌套冗余：同时监听ready和load事件，导致数据源添加逻辑触发时机混乱。Azure Maps中ready事件已表示地图资源加载完成，无需再嵌套load事件。
2. 权重字段类型错误：GeoJSON中density属性是字符串类型（带引号），热力图需要数值型权重才能正确计算密度。
3. 未指定权重字段：地震数据默认使用mag字段作为权重，自定义数据需要显式配置weight选项关联density字段。

解决方案 #

1. 修正事件监听逻辑 #

移除嵌套的load事件，直接在ready事件中处理数据源和图层加载。

2. 修正GeoJSON数据类型 #

将所有density属性的字符串值改为数值类型（去掉引号）。

3. 配置热力图权重字段 #

在HeatMapLayer的配置选项中添加weight属性，指定使用['get', 'density']获取权重值。

修改后的代码 #

map.events.add('ready', function () {
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);
    
    // alert(geoJson); // 可按需保留调试用
    datasource.add(geoJson);

    map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
        radius: 50,
        weight: ['get', 'density'], // 指定权重字段
        color: [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0, 'rgba(33,102,172,0)',
            0.2, 'rgb(103,169,207)',
            0.4, 'rgb(209,229,240)',
            0.6, 'rgb(253,219,199)',
            0.8, 'rgb(239,138,98)',
            1, 'rgb(178,24,43)'
        ]
    }), 'labels');
});

修改后的GeoJSON示例（部分） #

{
   "type":"FeatureCollection",
   "features":[ 
      {
         "type":"Feature",
         "properties":{
            "density":50 // 去掉引号，改为数值类型
         },
         "geometry":{
            "type":"Point",
            "coordinates":[ 
               51.5570726284386,
               25.3115021617515
            ]
         }
      },
      // 其他feature同理修改density字段类型
      ...
   ]
}

内容的提问来源于stack exchange，提问作者Muhammad Usama Alam