概述###

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

实现方案###

1. 设置地图####

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

2.载入数据

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

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

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

  1. $mdb_server = "localhost";
  2. $mdb_user = "oxford";
  3. $mdb_pwd = "***";
  4. $mdb_name = "oxford";
  5. $mdb_conn = mysql_connect($mdb_server,$mdb_user,$mdb_pwd);
  6. $mdb_sel = mysql_select_db($mdb_name);
  7. $grid_size = $_REQUEST["grid"];
  8. $kpiid = $_REQUEST["SelKpi"];
  9. $table["gsm"] = "barite_gsm";
  10. $table["lte"] = "barite_test";
  11. echo "<table id='GraphData1'>
  12. <tr><th>GRID</th><th>FLOW</th></tr>";
  13. $mdb_sql = 'select '.$grid_size.',sum(flo) from '.$table[$kpiid].' where '.$grid_size.' not like "" group by '.$grid_size.';';
  14. $mdb_res = mysql_query($mdb_sql, $mdb_conn);
  15. while ($mdb_row = mysql_fetch_array($mdb_res)) {
  16. echo "<tr>";
  17. echo "<td>".$mdb_row[0]."</td>";
  18. echo "<td>".$mdb_row[1]."</td>";
  19. echo "</tr>";
  20. }
  21. echo "</table>";
  22. return 1;

3. 读取数据####

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

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

4. 绘制栅格####

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

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

5.增加标注####

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

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

6.坐标转换####

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

  1. 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

百度地图API应用实践(一) —— 栅格图(草稿)的更多相关文章

  1. 百度地图api描绘车辆历史轨迹图

    最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...

  2. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  3. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  4. 【百度地图API】发布静态图API啦!只需一个网址,即可展示定制百度地图!

    原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...

  5. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  6. 利用百度地图API和群蚁算法,对TSP问题进行模拟与求解

    前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...

  7. Winform实现用多线程、百度地图API解析某公司的物理地址

    前言 作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...

  8. html5:地理信息 LBS基于地理的服务和百度地图API的使用

    地理位置请求 单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...

  9. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

  1. IntelliTrace 调试、定位异常

    最近看了一个开源数据库管理,然后没有认真看它的配置环境,想看看是什么东西, 然后发现有类型转换的错误,但是一下子也定位不到哪里出错? 所以对于这种一下子找不到异常在哪里的,可以使用intellitra ...

  2. 学习笔记之Java程序设计实用教程

    Java程序设计实用教程 by 朱战立 & 沈伟 学习笔记之JAVA多线程(http://www.cnblogs.com/pegasus923/p/3995855.html) 国庆休假前学习了 ...

  3. PAT 1010

    1010. Radix (25) Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 11 ...

  4. Asp.Net 之 缓存机制

    asp.net缓存有三种:页面缓存,数据源缓存,数据缓存. 一.页面缓存 原理:页面缓存是最常用的缓存方式,原理是用户第一次访问的时候asp.net服务器把动态生成的页面存到内存里,之后一段时间再有用 ...

  5. [转]javascript指定事件处理程序包括三种方式:

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  6. EL表达式---关系运算符

    近来公司做html5页面的数据展现,发现集中使用了El表达式,而对于EL表达式,发现自己对于关系运算符的运用还存在很多不足,特此 查阅以前的书籍资料和从网上看一些大牛的笔记,总结如下: 首先El关系运 ...

  7. (译文)12个简单(但强大)的JavaScript技巧(一)

    原文连接: 12 Simple (Yet Powerful) JavaScript Tips 我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都 ...

  8. angularjs的一些优化小技巧

    尽可能少调用 ng-repeat ng-repeat默认会创建很多监听器,所以在数据量很大的时候,这个非常消耗页面性能,我觉的只有在当需要经常更新数据列表的时候才需要用ng-repeat,要不然放那么 ...

  9. 第一个Cookie应用

    Cookie应用:显示用户上次访问时间 package com.itheima.cookie; import java.io.IOException; import java.io.PrintWrit ...

  10. WCF图片上传

    WCF越来越流行,俺也在用,这是废话.项目中遇到需要图片上传,但是wcf上传会遇到一些异常,调试了N久,找了好多个解决方案才最终解决.代码直接贴上了 /// <summary> /// 笔 ...