raphael.jsで中国地図を描く 地図描画方法_JavaScriptスキル

最近のデータ統計プロジェクトでは、中国の地図が使用されています。これは、特定の期間における特定の省および地域の統計データを地図上に動的に表示するものです。フラッシュは必要ありません。 raphael.js および SVG 画像を使用して、マップの対話型操作を完了します。この記事では、js を使用してマップの操作を完了する方法を説明します。

raphael.js について簡単に紹介します。raphael.js は、Web ページ上にさまざまなベクター グラフィック、さまざまなグラフ、画像のトリミング、回転、モーション アニメーションなどの機能を描画できる小さな JavaScript ライブラリです。また、raphael.jsはクロスブラウザ互換性もあり、旧IE6にも対応しています。 raphael.jsの公式サイトアドレス：http://raphaeljs.com/

準備

ベクター マップを準備する必要があります。インターネットからベクター マップを見つけるか、イラストレーターを使用してベクター マップを描画し、それを SVG 形式のファイルにエクスポートします。このファイルはブラウザーで開くことができます。次に、内部のコンテンツ パス パス情報 (M で始まる座標) が抽出されます。そしてchimamapPath.jsの形式に従ってマップパス情報を用意します。

コードをコピーします コードは次のとおりです。

var china = [];
functionPaintMap(R) {
var attr = {
"fill": "#97d6f5",
"ストローク": "#eee",
"ストローク幅": 1 ,
"ストローク-ライン結合": "round"
};

china.aomen = {
名前: "マカオ",
パス: R.path("M413. 032,. ......一部省略... ,414.183z").attr(attr)
}
china.hk = {
//形式は上記と同じ
};
}

上記は、準備されたマップ パス情報を () 関数にカプセル化し、後で呼び出すためにファイル名を chinamapPath.js として保存する方法です。

HTML

まず、head セクションに raphael.js ライブラリ ファイルと chimamapPath.js パス情報ファイルを読み込みます。

コードをコピー コードは次のとおりです:

次に、マップを配置する必要がある本文内の場所に div#map を配置します。

コードをコピー コードは次のとおりです:

JAVASCRIPT

最初にページ内のマップを呼び出します。メソッドは次のとおりです:

コードをコピーします コード

window.onload = function () {
//地図を描画します
var R = Raphael("map", 600, 500);//地図を読み込みますid map を使用して div にマップし、領域を 600x500px サイズに設定します。
ペイントマップ(R);
}

この時点でブラウザで開くと読み込まれた地図が表示されます。次に、マップ内の対応する州エリアに州名を追加し、各州ブロック上でマウスをスライドしたときに色が変化するアニメーション効果を追加する必要があります。

コードをコピー コードは次のとおりです:

window.onload = function () {
var R = Raphael("map", 600, 500);
//地図描画メソッドを呼び出します
PaintMap(R); 🎜 >
var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
}; 🎜 >
{

//現在のグラフィックの中心座標を取得します
var xx = st.getBBox().x (st.getBBox().width / 2); 🎜> var yy = st.getBBox().y (st.getBBox().height / 2); ]['name']).attr(textAttr) );

st[0 ].onmouseover = function () {//マウスを
にスライドさせます st.animate({fill: st.color, ストローク : "#eee"},
.onmouseout = function () {//マウスは
St.animate ({Fill: "#97d6F5", Stroke: "#eee"}, 500);
China [State] ['Text'] ); (); 🎜>

上記のコードでは、raphael が提供するメソッド (getColor、getBBox、animate、toFront など) が使用されています。これらの手順は、raphael のドキュメントに記載されているため、この記事では説明しません。
さらに、マップのサイズにより、一部の州名がマップ内で適切に表示されず、より快適に見えるようにオフセットを修正する必要があります。





コードをコピー


コードは次のとおりです:

window.onload = function () {
    var R = Raphael("map", 600, 500);
    ...
    for (var state in china) {
        ...
        (function (st, state) {
            ....
            switch (china[state]['name']) {
                case "江苏":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 10;
                    yy += 10;
                    break;
                case "上海":
                    xx += 10;
                    break;
                case "广东":
                    yy -= 10;
                    break;
                case "澳门":
                    yy += 10;
                    break;
                case "香港":
                    xx += 20;
                    yy += 5;
                    break;
                case "甘肃":
                    xx -= 40;
                    yy -= 30;
                    break;
                case "陕西":
                    xx += 5;
                    yy += 10;
                    break;
                case "内蒙古":
                    xx -= 15;
                    yy += 65;
                    壊す;
デフォルト:
}
...
})(china[state]['path'], state);
}
}