Los proyectos de estadísticas de datos recientes deben usarse para los mapas chinos, es decir, mostrar estadísticas dinámicas en una provincia y región en el mapa. El mapa. En este artículo, compartiré con usted cómo usar JS para completar la interacción del mapa.
Presentemos brevemente a Raphael.js. Además, Raphael.js también es compatible con los navegadores, y también es compatible con los dientes viejos IE6. Dirección del sitio web oficial de Raphael.js: http://raphaeljs.com/
Preparación
Necesitamos preparar un mapa vectorial, encontrar un mapa vectorial de Internet o usar Illustrator para dibujar un mapa vectorial, y luego exportar archivos en formato SVG. . (Coordenadas a partir de M). Y prepare la información de la ruta del mapa en el formato de la información de la ruta en el formato de chinamappath.js.
Copiar código del código de la siguiente manera:
var China = [];
function PaintMap (r) {
var att = {{
"Fill": "#97d6f5",
"Stroke": "#ee",
"Width": 1,
"Stroke-Linejoin": "Ronda"
};
China.aomen = {
Nombre: "Macao",
Ruta: R.Path ("M413.032, ........................................... ..... 414.183z "). ATTR (ATTTR)
}
China.hk = {
// El formato es el mismo que el anterior
};
}
Lo anterior es la encapsulación de la información de la ruta del mapa preparada a la función (), y guardar el nombre del archivo es chinamappath.js para llamadas posteriores.
Html
Primero cargue el archivo de la biblioteca Raphael.js y el archivo de información de ruta chinamappath.js en el cabezal.
Copiar código del código de la siguiente manera:
<script type = "text/javaScript" src = "raphael.js"> </script>
<script type = "text/javaScript" src = "chinamappath.js"> </script>
Luego coloque el mapa Div#en el cuerpo.
Copiar código del código de la siguiente manera:
<div id = "map"> </div>
Javascript
En primer lugar, llamamos al mapa en la página, el método es el siguiente:
Copiar código del código de la siguiente manera:
window.onload = function () {
// dibujar un mapa
Var r = raphael ("mapa", 600, 500);
pintura map (r);
}
En este momento, usaremos el navegador para abrir el mapa. A continuación, queremos agregar el nombre de la provincia al área de la provincia correspondiente en el mapa, y el efecto de animación de cambio de color cuando el mouse se desliza hacia cada provincia.
Copiar código del código de la siguiente manera:
window.onload = function () {
var r = raphael ("mapa", 600, 500);
// llamar al método del mapa de dibujo
pintura map (r);
var textattr = {
"Llenar": "#000",
"Fuente del tamaño": "12px",
"Cursor": "puntero"
};
para (estado var en China) {
China [Estado] ['Path'].
(Función (st, estado) {
// Obtener las coordenadas centrales del gráfico actual
var xx = St.getBbox ().
var yy = St.getBbox ().
// Escribir el texto
China [Estado] ['Text'] = R.Text (xx, yy, China [estado] ['nombre']).
st [0] .onmouseover = function () {// Slip de mouse
St.animate ({relleno: St. Color, Stroke: "#eee"}, 500);
China [Estado] ['Texto'].
R.Safari ();
};
st [0] .onmouseout = function () {// mouse deja
St.animate ({relleno: "#97d6f5", Stroke: "#EEE"}, 500);
China [Estado] ['Texto'].
R.Safari ();
};
}) (Chino [estado] ['ruta'], estado);
}
}
El código anterior utiliza los métodos proporcionados por Raphael: GetColor, GetBBox, Animate, ToFront, etc. Estos se pueden encontrar en el documento Raphael.
Además, debido al tamaño del mapa, la posición de visualización de algunos nombres de la provincia en el mapa no es apropiada, y el desplazamiento debe corregirse, de modo que se vea cómodo.
Copiar código del código de la siguiente manera:
window.onload = function () {
var r = raphael ("mapa", 600, 500);
Elástico
para (estado var en China) {
Elástico
(Función (st, estado) {
...
Switch (China [estado] ['nombre']) {
Caso "Jiangsu":
xx += 5;
yy -= 10;
Romper;
Caso "Hebei":
xx- = 10;
yy += 20;
Romper;
Caso "Tianjin":
xx += 10;
yy += 10;
Romper;
Caso "Shanghai":
xx += 10;
Romper;
Caso "Guangdong":
yy -= 10;
Romper;
Caso "Macao":
yy += 10;
Romper;
Caso "Hong Kong":
xx += 20;
yy += 5;
Romper;
Caso "Gansu":
xx -= 40;
yy -= 30;
Romper;
Caso "Shaanxi":
xx += 5;
yy += 10;
Romper;
Caso "Mongolia interna":
xx- = 15;
yy += 65;
Romper;
POR DEFECTO:
}
Elástico
}) (Chino [estado] ['ruta'], estado);
}
}