1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

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

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

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

      時間:2024-07-10來源:風信官網 點擊: 888次
      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/
      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片