zoukankan      html  css  js  c++  java
  • 百度地图API应用实践(一) —— 栅格图(草稿)

    概述###

    运用百度地图JS API,实现了在百度地图上绘制栅格并按统计值渲染栅格颜色。实现的过程是不断补习的过程,其中用到一些技术,是个人首次尝试。包括:(1)简单的jQuery语法,并实现Ajax;(2)JS的闭包特性;(3) 百度地图经纬度转换的尝试。

    实现方案###

    1. 设置地图####

    map.centerAndZoom(point, 13); 			// 中心点和缩放级别
    map.addControl(new BMap.NavigationControl()); 	// 导航工具条
    map.addControl(new BMap.ScaleControl());  	// 缩放工具条
    map.addControl(new BMap.OverviewMapControl());  // 小地图控件
    map.addControl(new BMap.MapTypeControl()); 	// 地图类型控件
    map.enableScrollWheelZoom();    // 允许滚动缩放
    map.enableContinuousZoom();    //  允许无级缩放
    

    2.载入数据

    点击[载入数据]按钮,使用jQuery动态载入数据表格

    var loadfile = 'barite_test.html';
    var loadpara = {"grid":gridsize,"SelKpi":kpiid};
    $("#testtest").load(loadfile,loadpara,function(){	// 
       alert("Load "+loadfile+" OK");
    });
    

    Barite_test.html是一个PHP程序,从Mysql查询数据生成一个Table

    $mdb_server = "localhost";
    $mdb_user = "oxford";
    $mdb_pwd = "***";
    $mdb_name = "oxford";
    $mdb_conn = mysql_connect($mdb_server,$mdb_user,$mdb_pwd);
    $mdb_sel = mysql_select_db($mdb_name);
    $grid_size = $_REQUEST["grid"];
    $kpiid = $_REQUEST["SelKpi"];
    
    $table["gsm"] = "barite_gsm";
    $table["lte"] = "barite_test";
    
    echo "<table id='GraphData1'>
       <tr><th>GRID</th><th>FLOW</th></tr>";
    $mdb_sql = 'select '.$grid_size.',sum(flo) from '.$table[$kpiid].' where '.$grid_size.' not like "" group by '.$grid_size.';';
       $mdb_res = mysql_query($mdb_sql, $mdb_conn);
       while ($mdb_row = mysql_fetch_array($mdb_res)) {
          echo "<tr>";
          echo "<td>".$mdb_row[0]."</td>";
          echo "<td>".$mdb_row[1]."</td>";
          echo "</tr>";
       }
          echo "</table>";
       return 1; 
    

    3. 读取数据####

    借用jQuery从Table中读取表格数据,其中有不少笨拙的语法

    $("#testtest table tr").each(function(){
    var gridid = $(this).children("td:eq(0)").text();// grid id
    var flow_inc = $(this).children("td:eq(1)").text();// flow
    var grid = gridid.split("_");
    var grid_long = grid[0];
    var grid_lat = grid[1];
    grid_long = Number(grid_long);							// 转换成数字格式
    grid_lat = Number(grid_lat);
    flow_inc = Number(flow_inc);
    a_grid.push(new BMap.Point(grid_long,grid_lat));// 压入数组
    a_flo.push(flow_inc);
    a_gridid.push(gridid);
    });
    

    4. 绘制栅格####

    遍历数组,判断栅格中心是否在可视范围,画出一个矩形

    var bs = map.getBounds();   //获取地图边界
    var isin = BMapLib.GeoUtils.isPointInRect(grid_point, bs);	//判断是否入界
    if(isin) {		//
    // alert(idx+"::::"+a_gridid[idx]+"::"+a_flo[idx]);
    // 绘制矩形
    var pStart 	= new BMap.Point(grid_point.lng+gridsize,grid_point.lat+gridsize);
    var pEnd 	= new BMap.Point(grid_point.lng-gridsize,grid_point.lat-gridsize);
    var polygon = new BMap.Polygon([
       new BMap.Point(pStart.lng,pStart.lat),
       new BMap.Point(pEnd.lng,pStart.lat),
       new BMap.Point(pEnd.lng,pEnd.lat),
       new BMap.Point(pStart.lng,pEnd.lat)
    ], {strokeColor:setcolor, strokeWeight:2, strokeOpacity:0,fillOpacity:0.5,fillColor:setcolor});
    map.addOverlay(polygon);
    

    5.增加标注####

    因为矩形无法和infowindow关联,故只能给每个栅格增加一个透明的标注,当鼠标落在标注上,则显示infowindow

    function DrawGridMarker(grid_point,content){
       // 绘制中心标识和信息窗
       var marker1 = new BMap.Marker(grid_point,{icon:grey});  
       map.addOverlay(marker1);      
    	
       // 添加监听事件
       marker1.addEventListener("mouseover", function(){
          infowin.setContent(content);this.openInfoWindow(infowin);});	// 	
       marker1.addEventListener("mouseout", function(){this.closeInfoWindow();});			// 
    }
    

    6.坐标转换####

    使用百度地图提供的批量转换函数transmore(),其返回值是一组对象,每个对象包含x和y两个变量,需要将其转换为BMap.Point。

    BMap.Convertor.transMore(a_grid,0,callback);
    

    然而使用坐标转换以后,在地图上呈现的栅格貌似是错的,初步判断可能是数组的次序问题,这个还需后续分析解决。另外还有数据缺漏的情况。
    所以目前在页面上加了一个选项,暂时不纠偏。

    问题讨论###

    1. 闭包特性####

    本人用多少学多少,至今不理解什么叫闭包。
    起因是给marker数组添加infowindow时,在添加事件时查看每一个idx和内容都是正确的,但是从页面点击每一个marker显示的却是相同的内容。我很难想明白问题具体在那个环节,原理是什么。
    在百度地图技术论坛看到类似的问题,找到解决方案,将DrawGridMarker()函数放在DrawGrids()内部就OK了。

    2. 颜色设置####

    方便起见,使用jQuery语句调用一个动态页面,生成颜色分级的数值。预设了“等值”、“等记录数”、“K-means”三种算法,前两种用sql很容易实现,第三种方法还没有代码实现,算法介绍可见上一篇博文 http://www.cnblogs.com/herzog/p/3855050.html

    效果展示###

    不使用地址转换

    使用地址转换。栅格的颜色显然是错误的

    后续研究###

    1. 增加对鼠标、键盘的响应时间,提升读者操作感知。
    2. 增加色阶的直方图,便于了解各层颜色的分布概况。

    首次发布:2014.08.06

  • 相关阅读:
    Linux进入单用户模式(passwd root修改密码)
    stark组件的分页,模糊查询,批量删除
    stark组件的增删改(新)
    stark组件的增删改
    stark组件之展示数据(查)
    stark组件配置,二层URL
    单例模式及设计url分发
    Django之modelform
    rbac组件权限按钮,菜单,可拔插
    rbac权限+中间件
  • 原文地址:https://www.cnblogs.com/herzog/p/3885998.html
Copyright © 2011-2022 走看看