如何解决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);
});
}
这是我的地图的样子。此屏幕快照几乎没有放大。当您看正常时,看起来更糟。
这就是我要显示的方式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。