地图开发使用汇总
百度官网: https://map.baidu.com/ 开发平台: https://lbsyun.baidu.com/
高德官网: https://www.amap.com/ 开发平台: https://lbs.amap.com/
腾讯官网:https://map.qq.com/ 开放平台:https://lbs.qq.com/
百度地图基本操作
应用类型:浏览器 javascript api
应用类型:服务端 web api
一。应用类型:浏览器 javascript api
基础地图展现
覆盖物
地图事件
变更地图样式
搜索兴趣点
数据可视化
1.百度地图提供了各种平台的SDK,
地址:https://lbsyun.baidu.com/ 如下:
2.创建地图的基本步骤如下:
编写HTML页面的基础代码
引入百度地图API文件
初始化地图逻辑以及设置各种参数
参考官方文档:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
2.1案例1:添加控件
控件是负责与地图交互的UI元素,百度地图API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
文档:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
2.2案例2:添加覆盖物
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。目前JSAPI GL版支持的覆盖物以基本图形为主。文档:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
2.3案例3:地图事件
百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。文档:
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/event
2.4案例4:地图样式
百度地图支持设置地图样式,比如将地图设置为地球模式,文档:
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/maptype
2.5案例5:地图检索
百度地图支持在地图中兴趣点的检索服务,示例:
https://lbsyun.baidu.com/jsdemo.htm#localSearchKey
北京市“银行”关键字的检索结果,
并展示在地图上
2.6案例5:地图检索 圆形范围检索
百度地图支持在地图中兴趣点的检索服务,示例:https://lbsyun.baidu.com/jsdemo.htm#localSearchKeyCircle
北京市地图上圆形覆盖范围内的“景点”
检索结果,并展示在地图上
2.7案例6:数据可视化
MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据。
文档:https://lbsyun.baidu.com/solutions/mapvdata
二。应用类型:服务端 web api
创建服务端的应用
坐标转换
IP定位服务
地点输入提示服务
路线规划
1.案例1:坐标转换
目前中国主要有以下三种坐标系:
WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系
GCJ02:是由中国国家测绘局制订的地理信息系统的坐标系统,由WGS84坐标系经加密后的坐标系
BD09:为百度坐标系,在GCJ02坐标系基础上再次加密,其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标
Web api中提供了将非百度坐标转换成百度坐标体系的接口服务。
文档:https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
2.案例2:IP定位服务
普通IP定位是一套以HTTP/HTTPS形式提供的轻量级定位接口,用户可以通过该服务,根据IP定位来获取大致位置。
文档:https://lbsyun.baidu.com/index.php?title=webapi/ip-api
3.案例3:地点输入提示服务
用户可通过该服务,匹配用户输入关键词的地点推荐列表。
文档:https://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api
4.案例4:路线规划
路线规划服务(又名Direction API)是一套REST风格的Web服务API,以HTTP/HTTPS形式提供了路线规划服务。目前,Direction API支持公交、骑行、驾车路线规划,Direction API支持中国大陆地区。
文档:https://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2
清华大学 到 北京工人体育场
三。地图搜索案例:地图找房
地图找房的功能
搭建MongoDB环境
BMapGLLib
构造数据
MongoDB的聚合查询
实现搜索功能
在房源信息类网站中,为了方便用户查找房源,推出了地图找房的功能,房源数据展示更加的直观。
例如:链家网:https://map.lianjia.com/map/310000/ESF/
功能特点:
在可视范围内展现房源数据。
在地图缩放或拖拽时,重新查询房源数据。
不同的地图比例尺聚合展现的数据维度不同,例如:按照行政区、按商圈、按小区名等。
BMapGLLib是基于百度地图JSAPI GL版的JavaScript开源工具库。
代码地址:https://github.com/huiyan-fe/BMapGLLib
静态页面实现的基本思路步骤:
第一步,加载百度地图,需要开启滚轮功能以及显示比例尺;
第二步,给地图添加拖拽、缩放事件,来控制覆盖物的显示;
第三步,通过百度地图的BMapGLLib工具库中的RichMarker(富标注),显示自定义覆盖物。
第四步,通过ajax异步加载数据,动态生成覆盖物,在地图上展现出来。
搭建MongoDB环境
地图找房案例中的数据存储到MongoDB中,我们通过Docker的方式部署安装MongoDB。
具体安装方法参考资料目录中的《docker安装MongoDB.md》文件。
在application.properties中引入spring-data-mongodb的配置。
构造数据
为了数据的真实性,我们从网上抓取一些小区的数据,小区的位置数据通过百度地图API获取
MongoDB的聚合操作是以管道的形式完成的,在一个管道处理完毕后将结果传递给下一个管道处理。
常用的聚合操作有:
$project:修改输入文档的结构。可以用来重命名、增加或删除域,也可以用于创建计算结果以及嵌套文档。
$match:用于过滤数据,只输出符合条件的文档。$match使用MongoDB的标准查询操作。
$limit:用来限制MongoDB聚合管道返回的文档数。
$skip:在聚合管道中跳过指定数量的文档,并返回余下的文档。
$unwind:将文档中的某一个数组类型字段拆分成多条,每条包含数组中的一个值。
$group:将集合中的文档分组,可用于统计结果。
$sort:将输入文档排序后输出。
$geoNear:输出接近某一地理位置的有序文档。
MongoDB的聚合操作符主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果。
类似SQL语句中的 count(*)操作,常用操作如下:
表达式 描述 实例
$sum 计算总和。 db.mycol.aggregate([{$group : {_id : "$by_user", num_tutorial : {$sum : "$likes"}}}])
$avg 计算平均值 db.mycol.aggregate([{$group : {_id : "$by_user", num_tutorial : {$avg : "$likes"}}}])
$min 获取集合中所有文档对应值得最小值。 db.mycol.aggregate([{$group : {_id : "$by_user", num_tutorial : {$min : "$likes"}}}])
$max 获取集合中所有文档对应值得最大值。 db.mycol.aggregate([{$group : {_id : "$by_user", num_tutorial : {$max : "$likes"}}}])
$push 在结果文档中插入值到一个数组中。 db.mycol.aggregate([{$group : {_id : "$by_user", url : {$push: "$url"}}}])
$addToSet 在结果文档中插入值到一个数组中,但不创建副本。 db.mycol.aggregate([{$group : {_id : "$by_user", url : {$addToSet : "$url"}}}])
$first 根据资源文档的排序获取第一个文档数据。 db.mycol.aggregate([{$group : {_id : "$by_user", first_url : {$first : "$url"}}}])
$last 根据资源文档的排序获取最后一个文档数据 db.mycol.aggregate([{$group : {_id : "$by_user", last_url : {$last : "$url"}}}])
实现搜索 – 分析
实现搜索的关键点:
通过矩形的对角的坐标可以确定矩形搜索范围。
需要按照不同的地图比例尺进行分组聚合查询,通过按照行政区、商圈或小区名进行分组,聚合数量、价格等数据。
响应的数据如下: