<span id="pfnzv"></span>
      <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
      <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

        <sub id="pfnzv"><address id="pfnzv"></address></sub>
          <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
          <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

            <address id="pfnzv"></address>
            0712-2888027 189-8648-0214
            微信公眾號

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

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

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

            時間:2024-06-05來源:風信官網 點擊: 857次
            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/
            欄目列表
            推薦內容
            熱點內容
            展開
            国产精久久久久无码AV动漫|最新亚洲精品国偷自产在线|2021亚洲色中文字幕在线|最新无码av中文字专区 情欲美妇紧致敏感 国产免费AⅤ片在线播放 人妻爽爽免费在线视频 51精品国产人成在线观看 色偷偷av一区二区三区
            <span id="pfnzv"></span>
                <form id="pfnzv"><span id="pfnzv"></span></form><address id="pfnzv"><span id="pfnzv"><nobr id="pfnzv"></nobr></span></address>
                <form id="pfnzv"><dfn id="pfnzv"><listing id="pfnzv"></listing></dfn></form>

                  <sub id="pfnzv"><address id="pfnzv"></address></sub>
                    <address id="pfnzv"><form id="pfnzv"><listing id="pfnzv"></listing></form></address>
                    <address id="pfnzv"><address id="pfnzv"><nobr id="pfnzv"></nobr></address></address>

                      <address id="pfnzv"></address>