您当前的位置: 首页 > 网站编程 > PHP教程 > php实现地图区域数据统计

php实现地图区域数据统计

作者:不详 来源:网络 发布时间: 2014-08-14 17:36 点击:
效果如下图 HTML 和本站上篇文章使用raphael.js绘制中国地图一样,首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。 代码如下 script type=text/javascript src=jquery.js/script script type=text/javascript src=raphael.js/script script type=t

php实现地图区域数据统计

  效果如下图

  


  HTML

  和本站上篇文章使用raphael.js绘制中国地图一样,首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

  

  

  

  

  

  

  

  

  

  

  
代码如下


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

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

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

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

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

  


  PHP

  我们准备一张mysql表名为mapdata,这张表存储的是产品在各个省份的活跃用户数据。我们使用PHP读取mysql表中的数据,并将读取的数据以json格式输出,并将PHP文件命名为json.php。

  

  

  

  

  

  

  

  

  

  

  
代码如下


  $host="localhost";//主机

  $db_user="root";//数据库用户名

  $db_pass="";//密码

  $db_name="demo";//数据库名称

  $link=mysql_connect($host,$db_user,$db_pass);//连接数据库

  mysql_select_db($db_name,$link);

  mysql_query("SET names UTF8");

  $sql = "select active from mapdata order by id asc";//查询

  $query = mysql_query($sql);

  while($row=mysql_fetch_array($query)){

     $arr[] = $row['active'];

  }

  echo json_encode($arr);//JSON格式

  mysql_close($link);//关闭连接

  


  值得注意的是,我们要把mapdata表中各省份的排序与chinamapPath.js文件中的各省份顺序一致,这样才能保证读取的数据能和地图中的省份对应上。

  jQuery

  首先我们使用jquery的get()方法获取json数据。

  

  

  

  

  

  

  

  

  

  

  
代码如下


  $(function(){

     $.get("json.php",function(json){

         ...

     });

  });

  


  获取到json数据后,我们先要将json数据转换为数组,然后我们遍历整个数组,根据json数据中各省份活跃用户数的多少,我们作一个等级区分,这里我将等级分为0-5六个等级,活跃用户数越大背景颜色越深,这样在地图上显示就会一目了然的看出不同省份的数据等级程度。绘制地图的时候和本站上篇文章使用raphael.js绘制中国地图介绍的基本一样,不同之处在于给每个不同省份填充对应的颜色,请看整理好的代码:

  

  

  

  

  

  

  

  

  

  

  
代码如下
$(function(){

     $.get("json.php",function(json){//获取数据

     var data = string2Array(json);//转换数组

      

     var flag;

     var arr = new Array();//定义新数组,对应等级

     for(var i=0;i<data.length;i++){

         var d = data[i];

         if(d<100){

             flag = 0;

         }else if(d>=100 && d<500){

             flag = 1;

         }else if(d>=500 && d<2000){

             flag = 2;

         }else if(d>=2000 && d<5000){

             flag = 3;

         }else if(d>=5000 && d<10000){

             flag = 4;

         }else{

             flag = 5;

         }

         arr.push(flag);

     }

     //定义颜色

     var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];

      

     //调用绘制地图方法

     var R = Raphael("map", 600, 500);

     paintMap(R);

      

     var textAttr = {

         "fill": "#000",

         "font-size": "12px",

         "cursor": "pointer"

     };

              

     var i=0;

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

              

             //修改部分地图文字偏移坐标

             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]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

              

             var fillcolor = colors[arr[i]];//获取对应的颜色

              

             st.attr({fill:fillcolor});//填充背景色

              

             st[0].onmouseover = function () {

                 st.animate({fill: "#fdd", stroke: "#eee"}, 500);

                 china[state]['text'].toFront();

                 R.safari();

             };

             st[0].onmouseout = function () {

                 st.animate({fill: fillcolor, stroke: "#eee"}, 500);

                 china[state]['text'].toFront();

                 R.safari();

             };

                      

          })(china[state]['path'], state);

          i++;

     }

     });

  });


  上述代码中,使用var fillcolor = colors[arr[i]];获取对应等级的颜色值,然后通过st.attr({fill:fillcolor});将颜色填充到对应的省份区块中。此外string2Array()函数是将字符串转换为数组。

  

  

  

  

  

  

  

  

  

  

  
代码如下


  function string2Array(string) { 

     eval("var result = " + decodeURI(string)); 

     return result; 

  }

  


  这样,我们可以看到一个不同省份不同背景色的中国地图,根据不同颜色可以区分省份之间的活跃用户数差异程度,达到预期目标。
分享到:
本文"php实现地图区域数据统计"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4