在数学建模中,常常会有一些地理位置数据。为了快速地展现其位置分布,可以用百度地图api快速实现地理位置可视化。
Contents
0.概述
在会遇到一些与地理位置相关的建模问题时,难免会遇到需要可视化展示地理位置信息的需求。
可能许多人的第一反应是:
WTF我没做过前端,也不会js,这个东西怎么办
事实上,队伍内展示,或者只是作为团队内构建道路信息的工具,就可以用在线地图api实现可视化。(开发产品当然另当别论)
本篇学习笔记以百度地图api为例。只要稍微上过大学课程的c++之类的,看得懂一点点代码,就可以按照百度地图api手册给出的demo加以发挥。
1.开发者账户相关
用百度id注册百度地图开放平台,验证手机号和邮箱地址,会获得免费的配额。新建应用,获得秘钥。
包含以下内容及相应配额(懒..直接粘贴的表格)
服务名称 | 配额消费 | 配额上限 | 操作 | |
---|---|---|---|---|
云存储API(存储) |
存储空间: 0% |
总存储空间: 10240MB
|
查看文档 数据管理 配额申请 | |
云存储API |
请求数: 0% |
总请求数: 10万次/天
|
查看文档 数据管理 流量图 配额申请 | |
云检索API |
请求数: 0% |
总请求数: 10万次/天
|
查看文档 流量图 配额申请 | |
Javascript API |
无请求数限制
|
查看文档 | ||
Place API v2 |
请求数: 0% |
总请求数: 0.2万次/天
|
查看文档 流量图 配额申请 | |
Geocoding API v2 |
请求数: 0% |
总请求数: 0.6万次/天
|
查看文档 流量图 配额申请 | |
IP定位API |
请求数: 0% |
总请求数: 100万次/天
|
查看文档 流量图 配额申请 | |
路线交通API |
请求数: 0% |
总请求数: 0.2万次/天
|
查看文档 流量图 配额申请 | |
Android导航离线SDK |
无请求数限制
|
|||
IOS导航离线SDK |
无请求数限制
|
|||
Android导航SDK |
无请求数限制
|
查看文档 | ||
IOS导航SDK |
无请求数限制
|
|||
静态图API |
请求数: 0% |
总请求数: 100万次/天
|
查看文档 流量图 配额申请 | |
全景静态图API |
请求数: 0% |
总请求数: 10万次/天
|
查看文档 | |
坐标转换API |
请求数: 0% |
总请求数: 10万次/天
|
查看文档 流量图 配额申请 | |
鹰眼API |
请求数: 0% |
总请求数: 10万次/天
|
查看文档 流量图 配额申请 | |
到达圈 |
请求数: 0% |
总请求数: 0.01万次/天
|
||
Android导航 HUD SDK |
无请求数限制
|
|||
IOS导航 HUD SDK |
无请求数限制
|
|||
云逆地理编码API |
请求数: 0% |
总请求数: 0.2万次/天
|
流量图 配额申请 | |
Routematrix API |
请求数: 0% |
总请求数: 0.2万次/天
|
流量图 配额申请 | |
云地理编码API |
请求数: 0% |
总请求数: 0.2万次/天
|
||
高精度IP定位 |
请求数: 0% |
总请求数: 0.1万次/天
|
流量图 配额申请 | |
时区服务 API |
请求数: 0% |
总请求数: 0.2万次/天
|
2.开发手册、demo
百度地图开放平台js开发demo
对于一种想要展示一系列展示固定点的需求,可以使用“麻点图层”的方法
demo调试界面
3.坐标信息管理
注意到 “geotableId”:
1 2 3 4 5 6 7 8 9 10 11 |
var customLayer; function addCustomLayer(keyword) { if (customLayer) { map.removeTileLayer(customLayer); } customLayer=new BMap.CustomLayer({ geotableId: 30960, q: '', //检索关键字 tags: '', //空格分隔的多字符串 filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby }); |
麻点图层的原理,是使用百度云存储api(LBS云),送入自己点坐标信息的数据。再通过调用CutsomLayer在地图表层绘制麻点。
在百度云存储api的数据管理页面,可以通过可视化锚点,或者上传规范格式的csv快速添加数据(当然也可以通过get put直接上传,如果没有需求,当然可以只通过上传csv添加数据)
数据管理可视化界面
新建一个数据表,括号内即为geotableId。
csv可以直接下载示例,然后用excel可视化编辑。注意文档中给出的表值定义,不要填错
上传后可导入位置信息
4.api使用
官方给出的示例如下
http://developer.baidu.com/map/jsdemo.htm#g0_4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{ width: 100%; height: 100%; margin:0; font-family:"微软雅黑"; font-size:14px; } #l-map { width:100%; height:500px; overflow: hidden; } #result{ width:100%; } li{ line-height:28px; } .cityList{ height: 320px; width:372px; overflow-y:auto; } .sel_container{ z-index:9999; font-size:12px; position:absolute; right:0px; top:0px; width:140px; background:rgba(255,255,255,0.8); height:30px; line-height:30px; padding:5px; } .map_popup { position: absolute; z-index: 200000; width: 382px; height: 344px; right:0px; top:40px; } .map_popup .popup_main { background:#fff; border: 1px solid #8BA4D8; height: 100%; overflow: hidden; position: absolute; width: 100%; z-index: 2; } .map_popup .title { background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent; color: #6688CC; font-weight: bold; height: 24px; line-height: 25px; padding-left: 7px; } .map_popup button { background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent; cursor: pointer; height: 12px; position: absolute; right: 4px; top: 6px; width: 12px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script> <!-- 加载百度地图样式信息窗口 --> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <!-- 加载城市列表 --> <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script> <title>叠加麻点图层</title> </head> <body> <div id="l-map"></div> <div id="result"> <button id="open">打开</button><button id="close">关闭</button> </div> <!--城市列表--> <div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div> <div class="map_popup" id="cityList" style="display:none;"> <div class="popup_main"> <div class="title">城市列表</div> <div class="cityList" id="citylist_container"></div> <button id="popup_close"></button> </div> </div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("l-map"); // 创建地图实例 var point = new BMap.Point(116.403694,39.927552); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 var customLayer; function addCustomLayer(keyword) { if (customLayer) { map.removeTileLayer(customLayer); } customLayer=new BMap.CustomLayer({ geotableId: 30960, q: '', //检索关键字 tags: '', //空格分隔的多字符串 filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby }); map.addTileLayer(customLayer); customLayer.addEventListener('hotspotclick',callback); } function callback(e)//单击热点图层 { var customPoi = e.customPoi;//poi的默认字段 var contentPoi=e.content;//poi的自定义字段 var content = '<p style="width:280px;margin:0;line-height:20px;">地址:' + customPoi.address + '<br/>价格:'+contentPoi.dayprice+'元'+'</p>'; var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title: customPoi.title, //标题 width: 290, //宽度 height: 40, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 enableSendToPhone: true, //是否显示发送到手机按钮 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat); searchInfoWindow.open(point); } document.getElementById("open").onclick = function(){ addCustomLayer(); }; document.getElementById("open").click(); document.getElementById("close").onclick = function(){ if (customLayer) { map.removeTileLayer(customLayer); } }; // 创建CityList对象,并放在citylist_container节点内 var myCl = new BMapLib.CityList({container : "citylist_container", map : map}); // 给城市点击时,添加相关操作 myCl.addEventListener("cityclick", function(e) { // 修改当前城市显示 document.getElementById("curCity").innerHTML = e.name; // 点击后隐藏城市列表 document.getElementById("cityList").style.display = "none"; }); // 给“更换城市”链接添加点击操作 document.getElementById("curCityText").onclick = function() { var cl = document.getElementById("cityList"); if (cl.style.display == "none") { cl.style.display = ""; } else { cl.style.display = "none"; } }; // 给城市列表上的关闭按钮添加点击操作 document.getElementById("popup_close").onclick = function() { var cl = document.getElementById("cityList"); if (cl.style.display == "none") { cl.style.display = ""; } else { cl.style.display = "none"; } }; </script> |
需要修改:
1 |
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script>//更换自己的秘钥 |
1 |
var point = new BMap.Point(116.403694,39.927552); // 修改成你的初始点坐标 |
1 |
geotableId: 30960, // 数据表的id |
最后将代保存成html文件,本地打开或者上传到网页空间,能获得自己创建的麻点图,实现快速静态位置信息可视化。
5.后记
还是那句,在一些队伍内展示的场合,或者只是团队内构建道路信息的工具,就可以用在线地图api实现可视化。开发产品当然另当别论,需要深入研究前端,实现交互、实时更新等等。
说点什么