Недавние проекты по статистике данных должны использоваться для китайских карт, то есть динамически отображать статистику в провинции и регионе на карте. Карта. В этой статье я поделюсь с вами, как использовать JS для завершения взаимодействия карты.
Давайте кратко представим Raphael.js. Кроме того, Raphael.js также совместим с браузерами, а также совместим со старыми зубами IE6. Официальный веб -сайт Raphael.js Адрес: http://raphaeljs.com/
Подготовка
Нам нужно подготовить векторную карту, найти векторную карту из Интернета или использовать иллюстратор, чтобы нарисовать векторную карту, а затем экспортировать файлы в формате SVG. . (Координаты, начиная с М). И подготовить информацию о пути карты в формате информации о пути пути в формате chinamappath.js.
Код кода копирования следующим образом:
var China = [];
Функция Paintmap (r) {
var attr = {{
"Fill": "#97D6F5",
"ход": "#EE",
"ширина инсульта": 1,
"Инсульт-линейка": "круглый"
};
China.aomen = {
Имя: "Макао",
Путь: R.Path ("M413.032, ........................................... ..... 414.183Z "). ATTR (ATTR)
}
China.hk = {
// формат такой же, как и выше
};
}
Выше приведено инкапсуляция подготовленной информации о пути карты для функции (), и сохранить имя файла chinamappath.js для последующих вызовов.
HTML
Сначала загрузите файл библиотеки Raphael.js и файл информации о пути Chinamappath.js в голову.
Код кода копирования следующим образом:
<script type = "text/javascript" src = "raphael.js"> </script>
<script type = "text/javascript" src = "chinamappath.js"> </script>
Затем поместите карту div#в тело.
Код кода копирования следующим образом:
<div id = "map"> </div>
JavaScript
Прежде всего, мы называем карту на странице, метод заключается в следующем:
Код кода копирования следующим образом:
window.onload = function () {
// Нарисуйте карту
Var r = raphael ("Map", 600, 500);
Paintmap (r);
}
В настоящее время мы будем использовать браузер, чтобы открыть карту. Далее мы хотим добавить имя провинции в соответствующую область провинции на карте, и эффект анимации изменения цвета, когда мышь скользит в сторону каждой провинции.
Код кода копирования следующим образом:
window.onload = function () {
var r = raphael ("map", 600, 500);
// Вызов метод карты чертежа
Paintmap (r);
var textattr = {
"Fill": "#000",
"Размер шрифта": "12px",
"Курсор": "Указатель"
};
для (var cathing в Китае) {
Китай [государство] ['path'].
(Функция (St, State) {
// Получить центральные координаты текущего графика
var xx = st.getbbox ().
var yy = st.getbbox ().
// написать текст
Китай [State] ['Text'] = R.Text (XX, YY, China [State] ['name']).
ST [0] .OnmouseOver = function () {// Slip Mouse
St. ananimate ({Fill: St.color, Incke: "#eee"}, 500);
Китай [штат] ['Текст'].
R.Safari ();
};
ST [0] .onmouseout = function () {// уход мыши
St. ananimate ({fill: "#97d6f5", инсульт: "#eee"}, 500);
Китай [штат] ['Текст'].
R.Safari ();
};
}) (Китайский [государство] ['path'], state);
}
}
Приведенный выше код использует методы, предоставленные Raphael: GetColor, GetBbox, Animate, Tofront и т. Д. Они можно найти в документе Raphael.
Кроме того, из -за размера карты позиция отображения некоторых имен провинций на карте не подходит, и смещение должно быть исправлено, так что оно выглядит комфортно.
Код кода копирования следующим образом:
window.onload = function () {
var r = raphael ("map", 600, 500);
Эластичный
для (var cathing в Китае) {
Эластичный
(Функция (St, State) {
... ...
Switch (China [State] ['name']) {
Дело "Цзянсу":
xx += 5;
yy -= 10;
Перерыв;
Дело "hebei":
xx- = 10;
yy += 20;
Перерыв;
Дело "Тяньцзинь":
xx += 10;
yy += 10;
Перерыв;
Случай "Шанхай":
xx += 10;
Перерыв;
Дело "Гуандун":
yy -= 10;
Перерыв;
Случай "Макао":
yy += 10;
Перерыв;
Дело "Гонконг":
xx += 20;
yy += 5;
Перерыв;
Дело "Гансу":
xx -= 40;
yy -= 30;
Перерыв;
Дело "Shaanxi":
xx += 5;
yy += 10;
Перерыв;
Дело "Внутренняя Монголия":
xx- = 15;
yy += 65;
Перерыв;
ПО УМОЛЧАНИЮ:
}
Эластичный
}) (Китайский [государство] ['path'], state);
}
}