在不丢失缩放控制的情况下更新 amMap 中的图像 - AmCharts v4
Update image in amMap without losing zoom control- AmCharts v4
AmChart 的 amMap 带有图像，即 imageSeries。 objective 是更改单击的图像或说验证 imageSeries 而不丢失缩放级别。在开发模式下，图像已使用 imageURL 更改，但如何在图表上动态更新它？
我参考了文档 Amcharts4 imapimageseriesevents
单击颜色较浓的区域，即 Uttar Pradesh 以查看图像。
// 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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="list"></div>
<div id="chartdiv"></div>
目前还不是很清楚您要做什么。当您单击图像时，您想将其更改为什么图像？为什么这会影响缩放级别？
我检查了你的 jsfiddle，它不是缩放级别，而是图表本身上下移动，因为你正在填充一个以前没有高度的元素。如果你给它 min-height 图表将在它第一次获得 child 或失去它们时停止上下移动。
这是一个可以做到这一点的叉子：
#list {
min-height: 25px;
}
附录 2019-06-22：单击时更改图像 mapImage
要在单击时更改图像，而不是尝试更新 属性 字段绑定的原始数据，请直接更新 href 属性。
即而不是：
ev.target.dataItem.dataContext.imageURL = "data:image/png;base64,...";
就这样：
ev.target.href = "data:image/png;base64,...";
下面的演示已更新为包含此内容，单击 Uttar Pradesh -> 然后单击 Meerut（具有 hand/pointer 的图标）：
https://jsfiddle.net/notacouch/d6u9ofh7/
附录 2019-06-26：单击时更改图像 "id"
如果对以上内容进行分叉，请确保注释掉图像 re-assignment 行：ev.target.href = "...";.
如果您想在单击 .selected 元素时更改 mapImage 的图像，我建议在 parent #list [=78= 上使用事件委托] 来处理他们的点击事件，而不是为每个新的 div 重新创建一个。然后在该事件处理程序中，由于您使用的是 jQuery，因此您可以通过 .text() 检查其文本内容，将其转换为 Number，并遍历 mapImages 直到找到匹配 mapImage.dataItem.dataContext.id。然后分配其 child 的图像。
下面的事件处理程序示例：
$('#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;
}
}
});
演示：
https://jsfiddle.net/notacouch/bxgz74t1/
或者不是迭代，因为在这种情况下 id 是 mapImages 的实际 id，我们可以使用 MapImageSeries' getImageById() method :
$('#list').on('click', '.selected', function(event) {
var id = Number($(event.target).text()); // or via close icon's id
var mapImage = imageSeries.getImageById(id);
if (mapImage) {
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=";
}
});
演示：
AmChart 的 amMap 带有图像，即 imageSeries。 objective 是更改单击的图像或说验证 imageSeries 而不丢失缩放级别。在开发模式下，图像已使用 imageURL 更改，但如何在图表上动态更新它？
我参考了文档 Amcharts4 imapimageseriesevents
单击颜色较浓的区域，即 Uttar Pradesh 以查看图像。
// 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,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAkFBMVEX///8BAQMAAAA5OTnt7e3FxcXj4+MZGRn6+vrz8/M9PT729vbr6+vn5+fR0dHw8PCpqamioqIzMzPc3NyampqOjo4dHR0rKyskJCZISEi5ubkkJCSmpqbS0tJaWlstLS4NDQ1jY2NOTk5wcHCGhoa9vb1+fn+SkpNLS0wUFBRmZmZCQkJ3d3iwsLJtbW9cXF7M6KRpAAAJi0lEQVR4nO2da1fqOhCGJVhoQUQQily8FAFlC/r//91poUCbzKQXm5mU4/tprw21eVZIMpnMTG5uzMh9no2CzqTdaLQnzWA0u3cNvYhHj4OfrTiq0Yj/sX0ZPHK3qyL1Bp2YLanDf3VGPe7W/V69jUqXpNzVnLH1D8U7QwYt7laWlzvI4IshR3Wdde6fcvAdEOcOd1tLaZCP7/hTHXC3tri6P7kBD4zLLneLC8rrFOA7MHZuudtcSK1JQcAQsV2nOdXzCwOGiPM77nbnVn9YAjBE9D3ulufVZynAEHFak4VxowPUzrDinbvtubRHIERKyFf23K3PoTu49SGUvxs4rV6v5Sx2PswY/m8NdlT/4KY3Vk5iTe86qy3MuORreU6tgXYL8QZYZYs2xChm9G0uJBdY6oXY9KHv9lcAoniyfD59gADRncP9Fvj6iLK9heWqa72YaCaPFvD9ttWd+KD87kRTu2noqha6eKBqbRkp7RV+hrF5O1F8VFOatpZSS/WoZW4YHtVnLF4TP5QuzPGLmymIK/MtLat5qR/ci/yUvXNNT+oNIe7TX/CcxcfCkfdI98pj1v5M5cVQ/KQ+9jax1S17D7/l56ydTd+1Xej4cV8J8ZW2ceTJRvwjbXYBNaWGDpN9tT5jhL04TCNK676Y07Y7v+SuSM6J69SH4iX14FjufEunmp48nBI/UnnXKMbJJx3502fqtueTI/dEwl6TXTfp+bLblh61dAs1k4fh5aOFan2mZpMv6VFLJ9O91MzLWPPeVMKUPRdIj1p6jCEthwnH2QjazO8Sj66kRy3dI0o/xQuC+wq6NhK2jTyZfnC0P1toH8pTZfx5YjrZ1KMP0XEIut9Sc81LPcahTNg8fdCECRM+p6n06IIFIFPoegifJSaWRHmutXU9fJRX9RMBclp68cEp+ydLbRpXbudpvsgkHGisIaskeYPPO/xMQnkYWru3+Ja7Ija9swhlB5YI2BAyJJsup5ZmEcoHjrYuFsBePZ5rMghV946lE00o2TqLF/0Mwnf5Kd/SDfCNYl6GvXFY2DDC4zBdK/7SnfYlrAL811EckJbwTj5/svlHqriUItOtryf0vpRHvrgpdALOnr7ckBA220JCV3Z42zyTRvJkv36E6E1RQm+qfl/YHTc0UFnEKxLkJp6BA1Jrd79nATslNMw7AM/xbbVJT4L38whiHWMx1PW7mMQnd/uz1S8SG6wAZp8ZWyAsri0XYR3i2hTnZxHAb+6255R84pkb8CX7b9uhbskY4W19wqBvG6XivOuUAtWD/PhZPViHafQi96dovsVnfX6isXbFcmYCe/f1qHIlrsV8du+YULWQfaEKOLnP/mt2ap+jG2vbgUf13rNzSOueJ3v3gedZRvSrmvNF6qrOmxPgcFG7JQJWE/HT2Ow1LCaMEMxRqKXgU+6GqFfWqE7/V0LxR1gj/RHWX3+E9dcfYf31R1h//X8JT3uLrjOeDueT5W5vbUpXhvSE/bF/KbWwXNfQq5hBuPcTu0dRU7+bljAdqBH146p+3ZhBqHxgf+UIWVpCJSZKycysgbSEQEiYeGNucGFpCaEAnHb8oOt26zEmyxE+fnf8N9EYLleO9aaBlhAK/DoQOomKRJ+Wlx3UEkLlXmLCxFfFu9XBYDpCFyjtphAeTgBsPgDQEcoJsghhlJJqsYscI4wCST2oCA9E2BCv3o2tM6uOsK8m0CKENldz0xHe5ids4OWYuKUjhMq7oYS+rROqjlBOmNER2hshXR1hw9JO1BEqhZd0hEwHcnf7VTCdLjVelooJu7OZQ7j8Oy8J89H/AFdlHaGSSJRN2IpeNRnRQD53RNrLAla0qJ7w8KoNQerJQk0CEkvV7sAI3fKEh+cJCp3voEZ89mTjCjvHb3aaHbCgRC7CiNF4vBhYjVX4cpgTQtjAitHmJWzAg6JSgSWDIxM5FyGWMJSbkKAs7y3cB8P0t3BChNvPSxgimo6Lg3MrpDxXg4TmnatIJ6bHh0lC82k2cPHudDG6woRbJxRYmAggfDVMCFldEaGfsG6KEjbQkt8QofF8PnAkitT4KEyIo0OETbRt1QitUH4ZH0YJCUplQoZN9OK38zxullCq32dA8EhMniCZJjR+GofdhXCeAkwTGi/Yg4zES7adYUICHxxcrezi4DROaHogKoWszm+OZ7kKCUEHJMGZ8RLrxK+qCXebzeZdIewYJ4RMyOO799USwtYOAaFmj9utlhB+i2mr5gYs+BG/fERCaP5MCjojO7787ZaAcEhw6qZU1D+/fXMlhF38Js6eecJXipNTtKSJWF0JIeTZPb5e9IveFFiYcEJy+q2WtDq9f6wG51VMSHO/EGa6hZ34dB2E+Gj7TUkeqwj3pkHYCT0g9ue6CH9RW6guhFDQwXUR4gvG1RDOrp4QihW9MkJ0h3E1hPBZm3lCGrv0IMwldT2Eyi1xV0fYZ7FraPaHseR61zSEFF6Mk+QbIGgICXxtF5nez4OEBB7hi6D4AuOEpBXAOZZE4rtZAwZC2uLDDOY3cdLpryollyQkrl1r2nfITwhcPm6akDhvmN6ZQX7zDrkzg/zuWfS41BghdRlwcts0OqMkFZT4apaQ/LpEarOGnlC9OdYwIXmZXvS01BQh/eW66n06Zgnp74z43T0lxQnpb24hNtzEmpyQeEXkyPGmnWoEQ2kpoHCQSUKGImi0/ijj2V2AitxrVQEhQw47qceN53JdyoF4TCimFuX5hXhiAMQjv00Qslx6iWWZGCHkuQiL8ISG6S4zJKPNCCHP7bprQsIVCyGh15TeiXEUnXOfYYt/EF2kIleBLLoVkeu+Go9qIJrPdMZE5Y4yXxoDE5VpyrO1iPRM9DM9VtFgUbnbSIsT8t3PShRtymS0RSJy7pvP5MZFcxjM4A8+C02FqhSQ9YI6CttUCM4CwxROxXN5cx4VvRW4DCFtUJssrLJLlYTUYQqSzLv3uXaHJ7mm7W/eqTSS6RXDgurJhm03Rqv0LLOLog0XQt+ZDJHi2/4mZXKjSBzEjslgsKItNcwHpnrxWG3ZBq0MIXK5uwGNjSCKCTdXQiMDiIIjkAZX9cmX5iuXFtTza6WMQogFN5Isd1chYgho440lzqQqRiG+7Lzv0l1sq2AUBPXmS8sdIEWQi+CJkcV3P4VyAqzUcz68wLIpFFLvIdiiFa1Rskjz4MGGzUQeea3ZeDkXsCSsg7avL+NZy9ZLu1D1nPV+sAk+O83hZN7ebrdvSW39SXO6DN4/9uv7u8rY/gN8B5Z6zRivZwAAAABJRU5ErkJggg==",
"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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="list"></div>
<div id="chartdiv"></div>
目前还不是很清楚您要做什么。当您单击图像时，您想将其更改为什么图像？为什么这会影响缩放级别？
我检查了你的 jsfiddle，它不是缩放级别，而是图表本身上下移动，因为你正在填充一个以前没有高度的元素。如果你给它 min-height 图表将在它第一次获得 child 或失去它们时停止上下移动。
这是一个可以做到这一点的叉子：
#list {
min-height: 25px;
}
附录 2019-06-22：单击时更改图像 mapImage
要在单击时更改图像，而不是尝试更新 属性 字段绑定的原始数据，请直接更新 href 属性。
即而不是：
ev.target.dataItem.dataContext.imageURL = "data:image/png;base64,...";
就这样：
ev.target.href = "data:image/png;base64,...";
下面的演示已更新为包含此内容，单击 Uttar Pradesh -> 然后单击 Meerut（具有 hand/pointer 的图标）：
https://jsfiddle.net/notacouch/d6u9ofh7/
附录 2019-06-26：单击时更改图像 "id"
如果对以上内容进行分叉，请确保注释掉图像 re-assignment 行：ev.target.href = "...";.
如果您想在单击 .selected 元素时更改 mapImage 的图像，我建议在 parent #list [=78= 上使用事件委托] 来处理他们的点击事件，而不是为每个新的 div 重新创建一个。然后在该事件处理程序中，由于您使用的是 jQuery，因此您可以通过 .text() 检查其文本内容，将其转换为 Number，并遍历 mapImages 直到找到匹配 mapImage.dataItem.dataContext.id。然后分配其 child 的图像。
下面的事件处理程序示例：
$('#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;
}
}
});
演示：
https://jsfiddle.net/notacouch/bxgz74t1/
或者不是迭代，因为在这种情况下 id 是 mapImages 的实际 id，我们可以使用 MapImageSeries' getImageById() method :
$('#list').on('click', '.selected', function(event) {
var id = Number($(event.target).text()); // or via close icon's id
var mapImage = imageSeries.getImageById(id);
if (mapImage) {
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=";
}
});
演示：