有带有图像的AmChart amMap，即 imageSeries 。目的是在不丢失缩放级别的情况下更改点击的图像或说服 imageSeries 。在开发人员模式下，图像已使用 imageURL 进行了更改，但是如何在图表上动态更新？
我从文档Amcharts4 imapimageseriesevents
中获得了参考点击颜色浓密的区域，即北方邦以查看图像。
<div *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</div>
trackByFn(index, item) {
return index;
}
[
{
name: "ProformaInvoiceNumber",
type: "text",
options: Array(0),
isCommon: false,
required: true
},
{
name: "ProformaInvoiceDate",
type: "date",
options: Array(0),
isCommon: false,
required: true
},
{
name: "ProformaInvoiceNumber",
type: "text",
options: Array(0),
isCommon: false,
required: true
},
{
name: "ProformaInvoiceDate",
type: "date",
options: Array(0),
isCommon: false,
required: true
}
]
[
{
$$hashKey: "005"
name: "ProformaInvoiceNumber",
type: "text",
options: Array(0),
isCommon: false,
required: true
},
{
$$hashKey: "006"
name: "ProformaInvoiceDate",
type: "date",
options: Array(0),
isCommon: false,
required: true
},
{
$$hashKey: "007"
name: "ProformaInvoiceNumber",
type: "text",
options: Array(0),
isCommon: false,
required: true
},
{
$$hashKey: "008"
name: "ProformaInvoiceDate",
type: "date",
options: Array(0),
isCommon: false,
required: true
}
]
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_indiaLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
//Set min/max fill color for each area
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
min: chart.colors.getIndex(1).brighten(1),
max: chart.colors.getIndex(1).brighten(-0.3)
});
// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;
// Set heatmap values for each state
polygonSeries.data = [
{
id: "IN-UP",
value: 5130632
}
];
// Set up heat legend
let heatLegend = chart.createChild(am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.valign = "bottom";
heatLegend.width = am4core.percent(20);
heatLegend.marginRight = am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 40000000;
// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.text = "Little";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.text = "A lot!";
// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(labelText) {
return "";
});
// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.applyOnClones = true;
polygonTemplate.togglable = true;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeOpacity = 0.5;
polygonTemplate.fill = chart.colors.getIndex(0);
var lastSelected;
polygonTemplate.events.on("hit", function(ev) {
if (lastSelected) {
lastSelected.isActive = false;
}
ev.target.series.chart.zoomToMapObject(ev.target);
if (lastSelected !== ev.target) {
lastSelected = ev.target;
}
});
/* Create selected and hover states and set alternative fill color */
var ss = polygonTemplate.states.create("active");
ss.properties.fill = chart.colors.getIndex(4);
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = chart.colors.getIndex(2);
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.id = "markers";
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.propertyFields.longitude = "longitude";
imageTemplate.propertyFields.latitude = "latitude";
imageTemplate.nonScaling = true;
let jsonSelected = [];
imageTemplate.events.on("hit", function(ev) {
ev.target.dataItem.dataContext.imageURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=";
if ($.inArray(ev.target.dataItem.dataContext.id, jsonSelected) !== -1) {
jsonSelected.splice($.inArray(ev.target.dataItem.dataContext.id, jsonSelected), 1);
} else {
jsonSelected.push(ev.target.dataItem.dataContext.id);
}
$('#list').empty();
$.each(jsonSelected, (index, value) => {
$('#list').append('<div class="selected">' + value + '<i id="' + value + '" class="removeItem fas fa-times"></i></div>');
});
$(".selected .removeItem").click(function() {
jsonSelected.splice(jsonSelected.indexOf(+this.id), 1);
$(this).parents('.selected').remove();
});
});
var image = imageTemplate.createChild(am4core.Image);
image.propertyFields.href = "imageURL";
image.width = 20;
image.height = 20;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
imageSeries.data = [{
"id": 101,
"minZoomLevel": 2,
"latitude": 28.340322,
"longitude": 77.922881,
"imageURL": "data:image/png;base64,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",
"width": 5,
"height": 5,
"label": "[font-size:10]Meerut[/]"
}, {
"id": 102,
"minZoomLevel": 2,
"latitude": 30.340322,
"longitude": 78.922881,
"imageURL": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=",
"width": 5,
"height": 5,
"label": "[font-size:10]Dehradun[/]"
}, {
"id": 103,
"minZoomLevel": 3,
"latitude": 26.378494,
"longitude": 80.96383,
"imageURL": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=",
"width": 5,
"height": 5,
"label": "[font-size:10]Lucknow[/]"
}, {
"id": 104,
"minZoomLevel": 3,
"latitude": 26.378494,
"longitude": 82.96383,
"imageURL": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=",
"width": 5,
"height": 5,
"label": "[font-size:10]Dummy[/]"
}];
var hoverState = image.states.create("hover");
hoverState.properties.scale = 1.9;
image.tooltipText = "{label}";
imageSeries.events.on("datavalidated", updateImageVisibility);
chart.events.on("zoomlevelchanged", updateImageVisibility);
function updateImageVisibility(ev) {
var chart = ev.target.baseSprite;
var series = chart.map.getKey("markers");
series.mapImages.each(function(image) {
if (image.dataItem.dataContext.minZoomLevel) {
if (image.dataItem.dataContext.minZoomLevel >= chart.zoomLevel) {
image.hide();
} else {
image.show();
}
}
});
}body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 100%;
}
.selected {
border: 1px solid red;
border-radius: 5px;
display: inline;
padding-right: 2px;
margin-right: 4px;
}
答案 0 :(得分：2)
目前还不清楚您要做什么。单击图像时，您试图将其更改为什么图像？为什么会影响缩放级别？
我检查了您的jsfiddle，而不是缩放级别，它是图表本身在上下移动，因为您正在填充以前没有高度的元素。如果您给它一个min-height，则图表在第一次生孩子或失去孩子时都会停止上下移动。
这里有一个叉子可以做到这一点：
#list {
min-height: 25px;
}
mapImage更改图片要更改点击时的图像，请直接更新href属性，而不是尝试更新用于属性字段绑定的原始数据。
即代替：
ev.target.dataItem.dataContext.imageURL = "data:image/png;base64,...";
只需：
ev.target.href = "data:image/png;base64,...";
下面的演示已更新为包括此内容，请单击北方邦->然后单击Meerut（具有手/指针的图标）：
https://jsfiddle.net/notacouch/d6u9ofh7/
如果要进行上述操作，请确保注释掉图像重新分配行：ev.target.href = "...";。
如果要在单击mapImage元素时更改.selected的图像，建议在父#list div上使用事件委托来处理其点击事件，而不是重新创建每新一格然后在该事件处理程序中，由于您使用的是jQuery，因此可以通过.text()检查其文本内容，将其转换为Number，然后迭代mapImages直到匹配的{{1 }}被发现。然后分配其孩子的图像。
下面的事件处理程序示例：
mapImage.dataItem.dataContext.id演示：
https://jsfiddle.net/notacouch/bxgz74t1/
或者代替迭代，因为在这种情况下$('#list').on('click', '.selected', function(event) {
var id = Number($(event.target).text());
var totalImages = imageSeries.mapImages.length;
var mapImage;
for(var i = 0; i < totalImages; ++i) {
mapImage = imageSeries.mapImages.getIndex(i);
if (mapImage.dataItem.dataContext.id === id) {
mapImage.children.getIndex(0).href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=";
break;
}
}
});
是id的实际id，因此我们可以使用mapImages'getImageById() method：< / p>
MapImageSeries演示：