微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。