raphael.jsで中国地図を描く地図描画方法_JavaScriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:00:21

オリジナル

2291 人が閲覧しました

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

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

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); 
 } 
} 

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

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