Содержание
Географическая карта — это карта страны, континента или карты региона, цвета и значения которой назначены конкретным регионам, значения которых отображаются в виде цветовой шкалы. Если ваше приложение основано на какой-то панели управления, которая должна отображать карту, чтобы показать разные страны или одну страну с ее регионом, лучше всего использовать библиотеку для ее достижения, вместо того, чтобы отображать SVG вручную с дополнительным кодом, который имеет уже были реализованы в сторонней библиотеке.
В этой статье мы покажем вам, как отображать географическую диаграмму (GeoHeatMap) в приложении WinForms с C # с помощью библиотеки LiveCharts.
1. Установите LiveCharts
Чтобы установить этот пакет в свой проект в Visual Studio, перейдите в обозреватель решений и щелкните правой кнопкой мыши свой проект. В раскрывающемся списке выберите параметр «Управление пакетами NuGet»:
В диспетчере перейдите на вкладку просмотра и найдите пакет LiveCharts:
Выберите пакет WinForms от Beto Rodriguez и установите его в свой проект. После завершения установки вы сможете использовать библиотеку для отображения диаграмм в вашем коде. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.
2. Подготовьте файл карты XML
Важный
Не перетаскивайте GeoChart из поля управления, иначе иногда ваша визуальная студия зависнет из-за исключения, которое выдается компонентом, если вы не укажете путь к XML-файлу карты. Вот почему вам нужно динамически добавлять элемент управления с помощью кода.
Вы можете посмотреть и скачать список всех доступных стран проекта (или карты мира) в репозитории здесь. В нашем первом примере мы будем использовать World.xml файл, который содержит все страны. Теперь, когда у нас есть файл, вы можете хранить файл в нужном вам каталоге, если мы укажем его путь позже при инициализации диаграммы в нашем коде. В нашем случае, чтобы помочь вам понять, что путь не имеет значения, мы будем хранить его на рабочем столе по адресу C:\Users\sdkca\Desktop\World.xml, Однако рекомендуемый путь находится внутри вашего проекта, где вы можете легко получить доступ к файлу в качестве ресурса.
3. Инициализируйте и отобразите GeoMap
Логика для начала работы с картой заключается в следующем. Во-первых, вы должны знать, что элемент управления GeoMap нельзя просто перетащить из панели инструментов, созданной библиотекой в левой части Visual Studio, поскольку он вызывает исключение FileNotFound, и иногда Visual Studio может аварийно завершить работу. Поэтому, чтобы предотвратить это, просто добавьте компонент динамически с кодом во время инициализации формы (при событии загрузки формы).
Создайте переменную, которая будет содержать экземпляр LiveCharts.WinForms.GeoMap Класс и создать словарь, который будет содержать значения, которые будут отображаться в GeoMap. Наконец, присвойте значения свойству HeatMap и, наконец, определите свойство Source с путем к файлу XML карты, которую вы хотите отобразить:
// 1. Create a GeoMap control
LiveCharts.WinForms.GeoMap geoMap1 = new LiveCharts.WinForms.GeoMap();
// 2. Create a dictionary that we'll fill with Random Data in this example
Random r = new Random();
// 3. Note that we define the "key" and number pattern, where the key is the
// ID of the element in the XML where you want to define the numeric value.
Dictionary values = new Dictionary();
// 4. Fill the specific keys of the countries with a random number
values["MX"] = r.Next(0, 100);
values["CA"] = r.Next(0, 100);
values["US"] = r.Next(0, 100);
values["IN"] = r.Next(0, 100);
values["CN"] = r.Next(0, 100);
values["JP"] = r.Next(0, 100);
values["BR"] = r.Next(0, 100);
values["DE"] = r.Next(0, 100);
values["FR"] = r.Next(0, 100);
values["GB"] = r.Next(0, 100);
// 5. Assign data and map file
geoMap1.HeatMap = values;
geoMap1.Source = @"C:\Users\sdkca\Desktop\World.xml";
// 6. Important, you can only add the control to the form after defining the source of the map,
// otherwise it will throw a File Not Found exception
this.Controls.Add(geoMap1);
// 7. Set the style of the control to fill it's container, in this example will fill the entire form
geoMap1.Dock = DockStyle.Fill;Если вы извлекаете содержимое XML-данных карт, вы найдете блок Id, который задает 2 символа:
AF
Afghanistan
EXAMPLE DATA
AO
Angola
EXAMPLE DATA
....Используя идентификатор, вы можете установить данные элемента в вашем коде, например:
// Define data
Dictionary values = new Dictionary();
values["MX"] = 3251;
values["CA"] = 321;
values["US"] = 123;
values["IN"] = 12;
values["CN"] = 123123;
values["JP"] = 9345;
values["BR"] = 3457;
values["DE"] = 7889;
values["FR"] = 321;
values["GB"] = 1234;
// Asign data to HeatMap
geoMap1.HeatMap = values;В следующем полном примере будет отображена та же карта, показанная в начале статьи:
using System;
using System.Windows.Forms;
using System.Collections.Generic;
using System.Drawing;
// Include the required namespace of LiveCharts
using LiveCharts;
using LiveCharts.Wpf;
using LiveCharts.WinForms;
namespace Sandbox
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// Create a GeoMap control
LiveCharts.WinForms.GeoMap geoMap1 = new LiveCharts.WinForms.GeoMap();
// Create a dictionary that we'll fill with Random Data in this example
Random r = new Random();
// Note that we define the "key" and number pattern, where the key is the
// ID of the element in the XML where you want to define the numeric value.
Dictionary values = new Dictionary();
// Fill the specific keys of the countries with a random number
values["MX"] = r.Next(0, 100);
values["CA"] = r.Next(0, 100);
values["US"] = r.Next(0, 100);
values["IN"] = r.Next(0, 100);
values["CN"] = r.Next(0, 100);
values["JP"] = r.Next(0, 100);
values["BR"] = r.Next(0, 100);
values["DE"] = r.Next(0, 100);
values["FR"] = r.Next(0, 100);
values["GB"] = r.Next(0, 100);
geoMap1.HeatMap = values;
geoMap1.Source = @"C:\Users\sdkca\Desktop\World.xml";
// Important, you can only add the control to the form after defining the source of the map,
// otherwise it will throw a File Not Found exception
this.Controls.Add(geoMap1);
// Set the style of the control to fill it's container, in this example will fill the entire form
geoMap1.Dock = DockStyle.Fill;
}
}
}
4. Присоединение слушателя события щелчка
Наконец, функция, которая нужна почти всем, — это возможность узнать, какой элемент на карте был нажат. Это можно сделать через событие LandClick карты, поэтому вы можете просто прикрепить слушателя:
private void Form1_Load(object sender, EventArgs e)
{
// Add the on click listener
geoMap1.LandClick += GeoMap1_LandClick;
}
private void GeoMap1_LandClick(object arg1, LiveCharts.Maps.MapData arg2)
{
// Display the ID of the clicked element in the map
// e.g "FR", "DE"
Console.WriteLine(arg2.Id);
}Поэтому, когда пользователь нажимает на какой-либо элемент карты, вы увидите в консоли идентификатор выбранного элемента. В соответствии с этим, вы можете сделать все, что вам нужно сделать с данными позже.
