问题描述
我正在amcharts map
中研究angular
。我在lat
和long
上使用绑定位置,但我没有国家(id
)而是具有位置名称。我想使用zoomToMapObject
缩放特定位置。
我有一个下拉菜单,当我从其中选择一个国家时,我想对其进行缩放。
这是我object
中的locationData
{
"dId": 28046,"lat": 33.8627681,"long": -117.8870831,"loc": "Fullerton CA"
"color":"red"
},{
"dId": 25535,"lat": 31.5649775,"long": -110.2591639,"loc": "Sierra Vista AZ"
"color":"yellow"
},"dId": 31222,"lat": 33.4308114,"long": -70.7828727,"loc": "Pudahuel Metropolitana"
"color":"green"
},{
"dId": 23280,"lat": 36.1676717,"long": -94.1298177,"loc": "SpringDale AR"
"color":"red"
},
当我选择下拉菜单时,如何在SelectCountry
中使代码正常工作。这些所有变量都返回undefined
,因此zoomToMapObject
不起作用
public mapCountry_selected(country)
{
setTimeout( () => {
this.mapChart.zoomToGeoPoint({latitude:country.lat,longitude:country.long},17,true)
},100);
}
这是我的代码
public locationMap()
{
this.mapChart = am4core.create("productsMap",am4maps.MapChart);
this.mapChart .geodata = am4geodata_worldLow;
this.mapChart .projection = new am4maps.projections.Miller();
this.polygonSeries = this.mapChart .series.push(new am4maps.MappolygonSeries());
this.polygonSeries.exclude = ["AQ"];
this.polygonSeries.useGeodata = true;
this.polygonSeries.calculateVisualCenter = true;
let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "lat";
place.propertyFields.longitude = "long";
imageSeries.data=this.locationData;
var circle = place.createChild(am4core.Circle);
circle.propertyFields.fill = "color";
imageSeries.heatRules.push({
"target": circle,"property": "radius","min": 3,"max": 10,"datafield": "value",})
}
编辑1:
我在每个位置("target": circle
)上显示绿色,黄色,红色三种颜色的圆圈。现在,在添加true
之后,第二点和第三点已解决(根据我的评论)。从下拉列表中选择一个后,我需要突出显示/弹出位置,以便用户可以直接知道我选择的这个位置,因为彼此之间有很多位置。
编辑2:
从下拉菜单中选择位置后的地图
解决方法
问题修订1的初始响应
推荐方法
根据可用的信息,使用MapChart对象上可用的zoomToGeoPoint方法可能更容易考虑,例如
//assuming the selected country is as follows
var country = {
"dId": 23280,"lat": 36.1676717,"long": -94.1298177,"loc": "Springdale AR","color":"red",};
this.mapChart.zoomToGeoPoint({latitude:country.lat,longitude:country.long},17)
其中17
是您所需的缩放级别。 zoomToMapObject
在处理图表事件时特别有用。
更具体地针对您的问题
但是,如果您想使用zoomToMapObject方法,则可以根据您的示例考虑以下方法。
对于数据集中的每个数据点,并使用存储在am4geodata_worldLow
中且具有每个多边形“ id”的初始数据(例如,提取第一个am4geodata_worldLow.features[0].id
的ID),您可以使用最接近每个多边形中心的纬度/经度坐标确定每个国家/地区。
在您存储在MapChart
中的this.mapChart
对象中,您必须检查多个多边形(通常被视为图层),以检查多边形或MapObjects。这些可以使用以下方法提取:
var mapPolygons = this.mapChart.series.values.flatMap(function(seriesItem){return seriesItem.mapPolygons.values;});
然后,您可以构建一个数据结构,将每个自定义国家/地区映射到地图上可用的ID(例如,对象{"your-country-id":mapPolygonObject}
)
对于每个mapPolygon
,您可以使用来提取坐标点
var coordinates = mapPolygon.points[0][0]; //returns an array of x,y coordinates
//eg
coordinates =
[{"x":691.2713756097037,"y":137.68935508639663},{"x":691.2544487420046,"y":137.69150482342081},"y":137.67239542245633},{"x":691.2695833531237,"y":137.6702455263596}];
然后您可以使用这些点作为边界来找到该多边形的center/centroid,然后对于您的每个国家/地区点,都可以在多边形中心点和您所在的国家/地区之间找到euclidean distance。最短距离可以假定该国家/地区与此点相关。可能会考虑距离(注意。由于您使用的是坐标,因此请确保至少考虑5个小数点)为50,000英里(请注意您的坐标系,以将经纬度转换为米/英里)表示这些是不同的地方。
然后,您可以提取ID并构建地图对象,以供稍后在脚本中使用。这可能会很耗时且需要大量计算,并且如果您之前进行过并存储了必要的引用以供以后使用,那么理想情况下会更好。
另一种搜索ID的方法
此外,如果您有国家/地区ID,则搜索起来会更简单,如下所示:
//assuming the selected country is as follows
var country = {
"dId": 23280,};
//for this example I am extracting the country id from the object,it would be ideal to have it otherwise
//NB. country ids are also available in the `am4geodata_worldLow` used to initialize the map
var countryId = country.loc.split(" ")[1]; //this would return the country code - 'AR'
//we will now search the created chart for mapObjects with this id
//this will give us an array of map objects/polygons with the id if found
var possibleMapObjects = this.mapChart.series.values.map(function(seriesItem){
return seriesItem.getPolygonById(countryId)
}).flat();
if(possibleMapObjects.length > 0){
// we have found a map object
var countryMapObject = possibleMapObjects[0]; //taking the first item of array
//now we can zoom to map object
//the 3rd parameter true implies centering the map
this.mapChart.zoomToMapObject(countryMapObject,17,true)
}
问题修订2(Edit1)的初始响应
基于更新的代码,我注意到了一些问题,我无法在您的地图上看到标记,因此我进行了一些修改。另外,由于我使用您使用过的ID扩充了数据,因此,修改现在允许您按ID检索标记/地图对象,请参见下面的更新代码。
我创建了一个下拉/选择节点来模拟onchange事件,在回调/事件处理程序onCountryChange
中,您将看到如何通过我们指定的新伪ID检索标记并调用操作(我将打开一个弹出窗口),根据Documented MapImage API
locationData = [
{
"dId": 28046,"lat": 33.8627681,"long": -117.8870831,"loc": "Fullerton CA","color": "red"
},{
"dId": 25535,"lat": 31.5649775,"long": -110.2591639,"loc": "Sierra Vista AZ","color": "yellow"
},{
"dId": 31222,"lat": 33.4308114,"long": -70.7828727,"loc": "Pudahuel Metropolitana","color": "green"
},{
"dId": 23280,].map(function(place) {
place.id = place.dId;
return place;
});
this.mapChart = am4core.create("productsMap",am4maps.MapChart);
this.mapChart.geodata = am4geodata_worldLow;
this.mapChart.projection = new am4maps.projections.Miller();
this.polygonSeries = this.mapChart.series.push(new am4maps.MapPolygonSeries());
this.polygonSeries.exclude = ["AQ"];
this.polygonSeries.useGeodata = true;
this.polygonSeries.calculateVisualCenter = true;
let imageSeries = this.mapChart.series.push(new am4maps.MapImageSeries());
var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "lat";
place.propertyFields.longitude = "long";
imageSeries.data = locationData;
var circle = place.createChild(am4core.Circle);
circle.propertyFields.fill = "color";
/// code below made circles visible and used value in {loc} / location name as tooltiptext
circle.width = 20;
circle.height = 20;
circle.nonScaling = false;
circle.tooltipText = "{loc}";
circle.horizontalCenter = "middle";
circle.verticalCenter = "bottom";
var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
circle2.radius = 3;
circle2.propertyFields.fill = "color";
circle2.events.on("inited",function(event){
animateBullet(event.target);
})
function animateBullet(circle) {
var animation = circle.animate([{ property: "scale",from: 1,to: 5 },{property: "opacity",to: 0 }],1000,am4core.ease.circleOut);
animation.events.on("animationended",function(event){
animateBullet(event.target.object);
})
}
imageSeries.heatRules.push({
"target": circle,"property": "radius","min": 3,"max": 10,"dataField": "value",});
//just initializing the ui (you have already done this in angular)
var ddlPlaceChooser = document.getElementById("ddlPlaceChooser");
locationData.map(function(location) {
var option = document.createElement("option");
option.value = location.id;
option.innerText = location.loc;
return option;
})
.forEach(function(option) {
ddlPlaceChooser.appendChild(option)
})
function onCountryChange(event) {
//however you retrieve the selected id
var placeId = ddlPlaceChooser.selectedOptions[0].value;
//retrieve map object
var mapObject = imageSeries.getImageById(placeId);
//zoom to map object
mapChart.zoomToMapObject(mapObject,true);
//optionally open popup with message of choice
mapObject.openModal("You choose me!")
//mapObject.openPopup("You choose me!")
}
ddlPlaceChooser.addEventListener('change',onCountryChange)
<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/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div>
<label for="placeChooser">Choose Place</label>
<select id="ddlPlaceChooser" name="placeChooser"></select>
</div>
<hr />
<div id="productsMap"></div>
,
我就是这样解决的
public selectedLocation(country)
{
var imageSeries = this.mChart.series.push(new am4maps.MapImageSeries());
var mapImage = imageSeries.mapImages.template;
var mapMarker = mapImage.createChild(am4core.Sprite);
mapMarker.path = "M4 12 A12 12 0 0 1 28 12 C28 20,16 32,16 32 C16 32,4 20 4 12 M11 12 A5 5 0 0 0 21 12 A5 5 0 0 0 11 12 Z";
mapMarker.width = 5;
mapMarker.height = 3;
mapMarker.scale = 0.02;
mapMarker.fill = am4core.color("#ff0000");
mapMarker.fillOpacity = 0.8;
mapMarker.horizontalCenter = "middle";
mapMarker.verticalCenter = "bottom";
var marker = imageSeries.mapImages.create();
marker.latitude = country.lat;
marker.longitude = country.long;
setTimeout( () => {
this.Animate = this.mChart.zoomToGeoPoint({latitude:country.lat,25,true)
},100);
marker.events.on("inited",function(event){
animateBullet(event.target);
})
function animateBullet(obj) {
let animation = obj.animate([{ property: "scale",to: 3 },{ property: "opacity",from: 0,to: 1 }],am4core.ease.circleOut);
animation.events.on("animationended",function(event){
animateBullet(event.target.object);
})
}
}