amcharts地图的圆圈显示拥挤,因此看起来像单色

问题描述

我正在研究amcharts map。我必须在很多地方展示它。当我在上面显示位置时,这些位置非常密集,根本看不到圆圈。

这是我的代码

public Map()
{
  this.mapChart = am4core.create("stationsMap",am4maps.MapChart);
  //Set map deFinition
  this.mapChart .geodata = am4geodata_worldLow;
  //Set projection
  this.mapChart .projection = new am4maps.projections.Miller();
  //Create map polygon series
  this.polygonSeries = this.mapChart .series.push(new am4maps.MappolygonSeries());
  this.polygonSeries.exclude = ["AQ"];
  this.polygonSeries.useGeodata = true;
  this.polygonSeries.nonScalingstroke = true;
  this.polygonSeries.strokeWidth = 0.5;
  this.polygonSeries.calculateVisualCenter = true;

  let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
 //imageSeries.datafields.value = "value";
  imageSeries.datafields.value = "dId";
  
  var place = imageSeries.mapImages.template;
  place.nonScaling = true;
  place.propertyFields.latitude = "lat";
  place.propertyFields.longitude = "long";

   var obj=DeviceList_f as any[];

  let result = Object.values(obj.reduce((res,el) => { 
    res[el.orgGN] = el;
    return res;
},{}));


var circle = place.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "[bold]{name}:[/]\nProduct: {activeDevices}\nTotal Product:{product}";

place.events.on("hit",(ev)=>{
    console.log(ev.target.dataItem.dataContext.title)
})

imageSeries.heatRules.push({
    "target": circle,"property": "radius","min": 6,"max": 15,"datafield": "value",})

var polygonTemplate = this.polygonSeries.mappolygons.template;
polygonTemplate.events.on("hit",function(ev) {
   //zoom to an object
  ev.target.series.chart.zoomToMapObject(ev.target);   
  //get object info
console.log(ev.target.dataItem.dataContext.name);
});

}

这是我的地图的样子。此屏幕快照几乎没有放大。当您看正常时,看起来更糟。

enter image description here

这就是我要显示的方式

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)