динамический маркер местоположения amcharts4 - PullRequest
Новая
       6

динамический маркер местоположения amcharts4

1 голос
/ 13 марта 2019

https://www.amcharts.com/demos/custom-html-elements-map-markers/

Мне нужно добавить маркер местоположения, когда я нажимаю кнопку. Я пробовал imageSeries.data.push, addData, init и другие методы, но при перемещении диаграммы (mappositionchanged) срабатывает обновление местоположения. Мне нужно, чтобы он работал автоматически, не перемещая и не масштабируя диаграмму.

Я использую amcharts версии 4. 

function test() {
    imageSeries.addData({
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Pretoria",
        "latitude": -25.7463,
        "longitude": 28.1876
    });
    alert(imageSeries.data);
}

<button onClick="test();">click</button>

1 Ответ

0 голосов
/ 13 марта 2019

Я не могу воспроизвести это поведение, когда динамическое добавление данных в MapImageSeries с помощью его метода addData требует обновления диаграммы (для чего бы то ни было, пользователь опубликовал ту же проблемуна наш GitHub и решил его там.)imageSeries.addData(...) должно работать просто отлично.

Код установки: 

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());

// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#B27799");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";

// Set property fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";

Тестовый код (addPlace метод): 

// Add data for the three cities

var data = [{
  "latitude": 48.856614,
  "longitude": 2.352222,
  "title": "Paris",
  zoomLevel: 1
}, {
  "latitude": 40.712775,
  "longitude": -74.005973,
  "title": "New York",
  zoomLevel: 2
}, {
  "latitude": 49.282729,
  "longitude": -123.120738,
  "title": "Vancouver",
  zoomLevel: 4
}];

const dataIterator = data[Symbol.iterator]();

function addPlace() {
  var item = dataIterator.next();
  if ( !item.done) {
    imageSeries.addData(item.value);
  }
}

Вот краткая демонстрация:

https://codepen.io/team/amcharts/pen/c5a5803d81b9517a8fd37d4e2c6541ed

Кнопка «Добавить маркер» добавляет маркер каждый раз (до 3 раз, поскольку в массиве всего 3 элемента) без необходимости обновления диаграммы (через invalidateили что угодно).

...