使用经纬度在地图上放置位置时如何使用zoomToMapObject

如何解决使用经纬度在地图上放置位置时如何使用zoomToMapObject

我正在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);
      })
    }

  }