Os projetos de estatísticas de dados recentes precisam ser usados para mapas chineses, ou seja, exibir dinamicamente estatísticas em uma província e região no mapa. o mapa. Neste artigo, compartilharei com você como usar o JS para concluir a interação do mapa.
Vamos apresentar brevemente o Raphael.js. Além disso, o Raphael.js também é compatível com os navegadores e também é compatível com os dentes velhos, ie6. Raphael.js Endereço oficial do site: http://rafaeljs.com/
Preparação
Precisamos preparar um mapa vetorial, encontrar um mapa vetorial da Internet ou usar o Illustrator para desenhar um mapa de vetor e, em seguida, exportar arquivos no formato SVG. . E prepare as informações do caminho do mapa no formato das informações do caminho do caminho no formato de Chinamappath.js.
Copie o código do código da seguinte forma:
var China = [];
Função PaintMap (R) {
var att = {{
"Preenchimento": "#97d6f5",
"Stroke": "#ee",
"Width Width": 1,
"Stroke-linejoin": "Round"
};
China.aomen = {
Nome: "macau",
Caminho: R.Path ("M413.032, ........................................... ..... 414.183z "). Att (attr)
}
China.hk = {
// formato é o mesmo que acima
};
}
O acima exposto é o encapsulamento das informações do caminho do mapa preparado para a função () e salvar o nome do arquivo é Chinamappath.js para chamadas posteriores.
Html
Primeiro, carregue o arquivo da biblioteca Raphael.js e o arquivo de informações do caminho chinamappath.js na cabeça.
Copie o código do código da seguinte forma:
<script type = "text/javascript" src = "rafael.js"> </script>
<script type = "text/javascript" src = "chinamappath.js"> </sCript>
Em seguida, coloque o mapa div#no corpo.
Copie o código do código da seguinte forma:
<div id = "map"> </div>
JavaScript
Primeiro de tudo, chamamos o mapa na página, o método é o seguinte:
Copie o código do código da seguinte forma:
window.onload = function () {
// Desenhe um mapa
Var r = Raphael ("mapa", 600, 500);
PaintMap (R);
}
Neste momento, usaremos o navegador para abrir o mapa. Em seguida, queremos adicionar o nome da província à área da província correspondente no mapa, e o efeito de animação de mudança de cor quando o mouse desliza em direção a cada província.
Copie o código do código da seguinte forma:
window.onload = function () {
var r = Raphael ("mapa", 600, 500);
// Ligue para o método do mapa de desenho
PaintMap (R);
var textattr = {
"Preenchimento": "#000",
"Size de fonte": "12px",
"Cursor": "ponteiro"
};
para (Var State na China) {
China [estado] ['caminho'].
(Função (st, estado) {
// Obtenha as coordenadas centrais do gráfico atual
var xx = St.getBbox ().
var yy = St.getBbox ().
// Escreva o texto
China [Estado] ['texto'] = R.Text (xx, yy, China [Estado] ['Nome']).
ST [0] .onMouseOver = function () {// Slip de mouse
St.anate ({enchimento: St.Color, AVC: "#EEE"}, 500);
China [estado] ['texto'].
R.Safari ();
};
st [0] .onMouseOut = function () {// Leave de mouse
St.Anate ({Fill: "#97D6F5", AVC: "#EEE"}, 500);
China [estado] ['texto'].
R.Safari ();
};
}) (Chinês [estado] ['caminho'], estado);
}
}
O código acima usa os métodos fornecidos por Raphael: GetColor, GetBbox, Animate, Tofront, etc. Estes podem ser encontrados no documento Raphael.
Além disso, devido ao tamanho do mapa, a posição de exibição de alguns nomes da província no mapa não é apropriada e o deslocamento precisa ser corrigido, para que pareça confortável.
Copie o código do código da seguinte forma:
window.onload = function () {
var r = Raphael ("mapa", 600, 500);
Elástico
para (Var State na China) {
Elástico
(Função (st, estado) {
... ...
Switch (China [estado] ['nome']) {
Caso "jiangsu":
xx += 5;
yy -= 10;
Quebrar;
Caso "hebei":
xx- = 10;
yy += 20;
Quebrar;
Caso "tianjin":
xx += 10;
yy += 10;
Quebrar;
Caso "Xangai":
xx += 10;
Quebrar;
caso "Guangdong":
yy -= 10;
Quebrar;
caso "macau":
yy += 10;
Quebrar;
caso "Hong Kong":
xx += 20;
yy += 5;
Quebrar;
Caso "Gansu":
xx -= 40;
yy -= 30;
Quebrar;
caso "shaanxi":
xx += 5;
yy += 10;
Quebrar;
Caso "Mongólia interna":
xx- = 15;
yy += 65;
Quebrar;
PADRÃO:
}
Elástico
}) (Chinês [estado] ['caminho'], estado);
}
}