1. <p id="obnf4"></p>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風信網絡科技有限公司微信公眾號

        當前位置:主頁 > 技術支持 > Javascript/JQuery > 利用raphael.js繪制中國地圖結合項目完成地圖交互

        利用raphael.js繪制中國地圖結合項目完成地圖交互

        時間:2024-07-21來源:風信官網 點擊: 906次
        Raphael 是一個用于在網頁中繪制矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標準和 VML 作為創建圖形的基礎,你可以通過 JavaScript 操作 DOM 來輕松創建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表,還可以繪制任意形狀的圖形,可以進行圖表或圖像的裁剪和旋轉等復雜操作。
         
        Raphaël 是跨瀏覽器的矢量圖形庫,目前支持的瀏覽器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
         
        風信建站在實際開發項目中的應用截圖演示:
        利用raphael.js繪制中國地圖結合項目完成地圖交互

        準備工作

        我們需要準備一張矢量地圖,可以從網上找一張矢量地圖,或者使用illustrator繪制一份矢量地圖,然后導出為SVG格式的文件,這個文件可以在瀏覽器上打開,然后提取里面的path路徑信息(M開頭的坐標)。并將path路徑信息,按照chinamapPath.js的格式準備好地圖路徑信息。

        var china = []; 
         
        function paintMap(R) { 
            var attr = { 
                "fill""#97d6f5", 
                "stroke""#eee", 
                "stroke-width"1, 
                "stroke-linejoin""round" 
            }; 
         
            china.aomen = { 
                name: "澳門", 
                path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr) 
            } 
            china.hk = { 
                //格式同上 
            }} 
        

        以上是我們將準備好的地圖路徑信息封裝到()函數中,并保存文件名為chinamapPath.js,供后面調用。

        HTML

        首先在head部分載入raphael.js庫文件和chinamapPath.js路徑信息文件。

        <script type="text/javascript" src="raphael.js"></script> 
        <script type="text/javascript" src="chinamapPath.js"></script> 
        

        然后在body中需要放置地圖的位置放置div#map。

        <div id="map"></div> 
        

        JAVASCRIPT

        首先我們在頁面中調用地圖,方法如下:

        window.onload = function () { 
            //繪制地圖 
            var R = Raphael("map"600500);//將地圖載入到id為map的div中,并設置區域為600x500px大小。 
            paintMap(R); 
        } 
        

        這個時候我們用瀏覽器打開會顯示載入后的地圖。接下來我們要給地圖中的對應的省份區域加上省份名稱,以及鼠標滑向每個省份區塊時的變色動畫效果。

        window.onload = function () { 
            var R = Raphael("map"600500); 
            //調用繪制地圖方法 
            paintMap(R); 
             
            var textAttr = { 
                "fill""#000", 
                "font-size""12px", 
                "cursor""pointer" 
            }; 
                     
                    
            for (var state in china) { 
                china[state]['path'].color = Raphael.getColor(0.9); 
                         
                (function (st, state) { 
                     
                    //獲取當前圖形的中心坐標 
                    var xx = st.getBBox().x + (st.getBBox().width / 2); 
                    var yy = st.getBBox().y + (st.getBBox().height / 2); 
                     
                    //寫入文字 
                    china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr); 
                     
                    st[0].onmouseover = function () {//鼠標滑向 
                        st.animate({fill: st.color, stroke: "#eee"}500); 
                        china[state]['text'].toFront(); 
                        R.safari(); 
                    }; 
                    st[0].onmouseout = function () {//鼠標離開 
                        st.animate({fill: "#97d6f5", stroke: "#eee"}500); 
                        china[state]['text'].toFront(); 
                        R.safari(); 
                    }; 
                             
                 })(china[state]['path'], state); 
            } 
        } 
        

        以上代碼中運用了raphael提供的方法有:getColor,getBBox,animate,toFront等等,這些可以在raphael文檔中找到使用說明,本文不在講述。

        此外由于地圖尺寸原因,有些省份名稱在地圖中的顯示位置不恰當,需要修正偏移量,這樣看起來舒服點。

        window.onload = function () { 
            var R = Raphael("map"600500); 
            ... 
            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; 
                            break; 
                        default: 
                    } 
                    ... 
              })(china[state]['path'], state); 
           } 
        } 
        

        這樣一個基本的地圖效果就完成了,接下來我們要介紹結合jquery,PHP+MySQL讀取數據到地圖中來,并實現基本的動態加載數據和交互功能

         
        實用網站:
         
        raphael.js地圖演示地址:http://www.helloweba.com/demo/chinamap/
         
        Raphael 官方網站地址:http://raphaeljs.com
         
        Raphael 英文參考文檔:http://raphaeljs.com/reference.html
         
        Raphael 中文幫助文檔:http://julying.com/lab/raphael-js/docs/
        欄目列表
        推薦內容
        熱點內容
        展開
        久久精品国产字幕|中文字幕日韩精品东京热|日韩精品动漫在线一区二|日韩免费看视频三区中文字幕
        1. <p id="obnf4"></p>