README.md · OSCHINA-MIRROR/cheng5x-YcJVectorMap

jVectorMap плагин для отображения карт использует только браузерные технологии JavaScript, CSS, HTML, SVG или VML и не требует Flash или других проприетарных браузерных плагинов. Поэтому jVectorMap работает корректно во всех современных мобильных браузерах.

Официальный сайт:

http://jvectormap.com/

1. Необходимые скрипты

<link href="jvectormap/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="jvectormap/jquery-1.6.min.js" type="text/javascript"></script>
<script src="jvectormap/jquery.vector-map.js" type="text/javascript"></script>
<script src="jvectormap/china-zh.js" type="text/javascript"></script>

2. Отрисовка карты в фронте

<script type="text/javascript">
$(function() {
    /* id — это уникальный идентификатор провинций Китая, name — название провинции,
       value — количество активностей, url — адрес страницы с подробной информацией */
    var dataStatus = @Html.Raw(ViewData["mapDataJson"].ToString());
    $('#map').vectorMap({
        map: 'china_zh',
        backgroundColor: false,
        color: "#BBBBBB",
        hoverColor: false,
        // Отображение названий регионов и количества активностей
        onLabelShow: function(value, label, code) {
            $.each(dataStatus, function(i, items) {
                if (code === items.id) {
                    label.html(items.name + items.value);
                }
            });
        },
        // Изменение курсора при наведении мыши на область региона
        onRegionOver: function(value, code) {
            $.each(dataStatus, function(i, items) {
                if ((code === items.id) && (items.value !== '')) {
                    $('#map').css({cursor: 'pointer'});
                    var josnStr = '{' + items.id + ':\'#00FF00\'}';
                    $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
                }
            });
        },
        // Возврат курсора при выведении мыши из области региона
        onRegionOut: function(value, code) {
            $.each(dataStatus, function(i, items) {
                if ((code === items.id) && (items.value !== '')) {
                    $('#map').css({cursor: 'auto'});
                    if (items.value !== '0') {
                        var josnStr = '{' + items.id + ':\'#0 Yöntem 1\'\'}';
                        $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
                        $('#jvectormap1_' + items.id).attr("fill-opacity", (items.opacity));
                    } else {
                        var josnStr = '{' + items.id + ':\'#BBBBBB\'}';
                        $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
                    }
                }
            });
        },
        // Переход на страницу с активностями при клике на регион
        onRegionClick: function(value, code) {
            $.each(dataStatus, function(i, items) {
                if ((code === items.id) && (items.value !== '')) {
                    window.location.href = items.url;
                }
            });
        }
    });
    // Изменение цвета областей с активностями
    $.each(dataStatus, function(i, items) {
        if (items.value !== '0') {
            var josnStr = '{' + items.id + ':\'#001F76\'}';
            $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
            $('#jvectormap1_' + items.id).attr("fill-opacity", (items.opacity));
        }
    });
});
</script>

<head>
    <body>
        <div id="map" style="margin-left: 45px; padding-top: 10px; padding-left: 10px; background: white;
            width: 650px; height: 530px;">
        </div>
        <div style="width: 420px; height: 15px; margin: 0 auto; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#BBBBBB', endColorStr='#001F76', gradientType='1');
            background: -moz-linear-gradient(left, #BBBBBB, #001F76); background: -o-linear-gradient(left, #BBBBBB, #001F76);
            background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#BBBBBB), to(#001F76));
            position: relative;">
            <div style="position: absolute; top: -18px;">
                0
            </div>
            <div style="position: absolute; top: -18px; right: 0;">
                @ViewData["maxAreaCount"]
            </div>
        </div>
    </body>
</head>

3. Привязка данных контроллера

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        // Преобразование JSON
        JavaScriptSerializer _ser = new JavaScriptSerializer();

        Dictionary<string, string> _mapDataDic = new Dictionary<string, string>();
        List<YcJVectorMap.Model.Map.data> _mapDataList = this.GetMapDefault(out _mapDataDic);
        decimal maxAreaCount = 0;

        // TODO: Изменение значений методом 1
        _mapDataList.Find(_ => _.id == "HKG").value = "26";
        _mapDataList.Find(_ => _.id == "MAC").value = "6";
        _mapDataList.Find(_ => _.id == "GUD").value = "68";

        // TODO: Изменение значений методом 2
        _mapDataList.Find(_ => _.name.Contains("北京")).value = "183";
        _mapDataList.Find(_ => _.name.Contains("海南")).value = "5";

        // TODO: Получение максимального значения
        ViewData["maxAreaCount"] = maxAreaCount = _mapDataList.Max(_ => Convert.ToDecimal(_.value));

        // TODO: Установка прозрачности
        foreach (var item in _mapDataList)
        {
            item.opacity = (Convert.ToDecimal(item.value) / maxAreaCount).ToString();
        }

        // TODO: Установка JSON
        ViewData["mapDataJson"] = _ser.Serialize(_mapDataList);

        return View();
    }

    /// <summary>
    /// Получение начального состояния карты
    /// </summary>
    /// <returns></returns>
    public List<YcJVectorMap.Model.Map.data> GetMapDefault(out Dictionary<string, string> mapDataDic)
    {
        List<YcJVectorMap.Model.Map.data> _mapDataList = new List<Model.Map.data>();

        mapDataDic = new Dictionary<string, string>();
        mapDataDic.Add("MAC", "Макао:");
        mapDataDic.Add("HKG", "Гонконг:");
        mapDataDic.Add("HAI", "Хайнань:");
        mapDataDic.Add("YUN", "Юньнань:");
        mapDataDic.Add("BEJ", "Пекин:");
        mapDataDic.Add("TAJ", "Цзянцзин:");
        mapDataDic.Add("XIN", "Синьцзян:");
        mapDataDic.Add("TIB", "Тибет:");
        mapDataDic.Add("QIH", "Чжунся:");
        mapDataDic.Add("GAN", "Ганьсу:");
        mapDataDic.Add("NMG", "Внутренняя Монголия:");
        mapDataDic.Add("NXA", "Нинся:");
        mapDataDic.Add("SHX", "Шэньси:");
        mapDataDic.Add("LIA", "Ляонин:");
        mapDataDic.Add("JIL", "Цзилинь:");
        mapDataDic.Add("HLJ", "Хэйлунцзян:");
        mapDataDic.Add("HEB", "Хебэй:");
        mapDataDic.Add("SHD", "Шаньдун:");
        mapDataDic.Add("HEN", "Хэнань:");
        mapDataDic.Add("SHA", "Шэньси:");
        mapDataDic.Add("SCH", "Сычуань:");
        mapDataDic.Add("CHQ", "Чунцин:");
        mapDataDic.Add("HUB", "Хубэй:");
        mapDataDic.Add("ANH", "Аньхой:");
        mapDataDic.Add("JSU", "Дзянсу:");
        mapDataDic.Add("SHH", "Шанхай:");
        mapDataDic.Add("ZHJ", "Чжэцзян:");
        mapDataDic.Add("FUJ", "Фуцзянь:");
        mapDataDic.Add("TAI", "Тайвань:");
        mapDataDic.Add("JXI", "Цзянси:");
        mapDataDic.Add("HUN", "Хунань:");
        mapDataDic.Add("GUI", "Гуйчжоу:");
        mapDataDic.Add("GXI", "Гуандун:");
        mapDataDic.Add("GUD", "Гuangdong:");

        foreach (var item in mapDataDic)
        {
            _mapDataList.Add(new YcJVectorMap.Model.Map.data()
            {
                id = item.Key,
                name = item.Value,
                value = "0",
                url = "#"
            });
        }

        return _mapDataList;
    }
}

Демонстрационный пример представлен ниже:

Пример отображения карты

GitHub:

https://github.com/cheng5x/YcJVectorMap

OSChina.NET:

http://git.oschina.net/cheng5x/YcJVectorMap

OSCHINA-MIRROR/cheng5x-YcJVectorMap

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия