百度地图（1） - JavaScript API V3.0 对比 JavaScript GL API 1.0

无为先生 發表於 2021-4-10 11:11:00

百度地图（1）- JavaScript API V3.0 对比 JavaScript GL API 1.0

最近在研究B（百度）A（高德）T（天地图）T（腾讯）这类在线地图的优点是不用自己架设地图服务，在线底图直接访问，大部分还提供了3D建筑，可以直接
通过API接口访问，不需要自己制作三维建筑模型。这一类地图接口的优点就是上手快，地图数据、接口都是开箱即用的。
当然也有不太友好的地方，比如想要的各种接口和效果，有的是出不来的。而且感觉百度地图API文档本身就比较混乱，很多API接口是官方提供的，有的接口是在Demo里面显示的，有的效果是开源示例
里的，而且它的示例中是包括2D的JavaScriptAPI3.0 和 3D JavaScript GLAPI 1.0 的内容，如果不仔细看代码，直接拿来就用，可能会出现各种问题。
 
 百度地图API开发系列：
<ol>
<li>
GIS项目开发流程
</li>
<li>
百度地图（1）- JavaScript API V3.0 对比 JavaScript GL API 1.0
</li>
<li>
百度地图（2）-初始化地图
</li>
<li>
百度地图（3）-添加地图控件
</li>
<li>
百度地图（4）-自定义地图样式
</li>
<li>
百度地图（5）-添加标注
</li>
<li>
百度地图（6）-信息窗口
</li>
<li>
百度地图（7）-点聚合
</li>
<li>
百度地图（8）-图层
</li>
<li>
百度地图（9）-地图事件
</li>
<li>
百度地图（10）-POI搜索
</li>
<li>
百度地图（11）-地址解析
</li>
<li>
百度地图（12）-路径规划
</li>
<li>
百度地图（13）-定位
</li>
<li>
百度地图（14）-全景图
</li>
<li>
百度地图（15）-自动完成
</li>
<li>
百度地图（16）-矢量图标
</li>
<li>
百度地图（17）-热力图
</li>
<li>
百度地图（18）-海量数据
</li>
<li>
百度地图（19）-沿线移动
</li>
<li>
百度地图（20）-路书
</li>
<li>
百度地图（21）- GL 初始化地图
</li>
<li>
百度地图（22）-GL 添加地图控件
</li>
<li>
百度地图（23）-GL 地图属性
</li>
<li>
百度地图（24）-GL 地图自定义样式
</li>
<li>
百度地图（25）-GL 标注
</li>
<li>
百度地图（26）-GL 矢量图标
</li>
<li>
百度地图（27）-GL 图层
</li>
<li>
百度地图（28）-GL 信息窗口
</li>
<li>
百度地图（29）-GL 富文本
</li>
<li>
百度地图（30）-GL 地图事件
</li>
<li>
百度地图（31）-GL 右键菜单
</li>
<li>
百度地图（32）-GL 聚合
</li>
<li>
百度地图（33）-GL 路径规划
</li>
<li>
百度地图（34）-GL 定位
</li>
<li>
百度地图（35）-GL 地址解析
</li>
<li>
百度地图（36）-GL 关键字搜索
</li>
<li>
百度地图（37）-GL 自动完成
</li>
<li>
百度地图（38）-GL 动画
</li>
<li>
百度地图（39）-GL 轨迹动画
</li>
<li>
百度地图（40）-GL 路书
</li>
<li>
百度地图（40）-GL 工具
</li>
</ol>
 
另外地图可视化系列，能够处理大数据量对象以及呈现更酷炫的效果，
在我的源码中已经加入了对应的效果实现代码。可以查看我的另外一篇文章
<h1 class="postTitle">百度地图（42）-mapV</h1>
 
<h1 class="postTitle">百度地图（43）-mapVGL</h1>
 
当然你也可以参考官方文档，示例
https://mapv.baidu.com/
http://lbsyun.baidu.com/solutions/mapvdata
 
另外针对项目需要，对比一下 2D API  版本 3.0 和 3D API 版本 1.0 出来的效果。 
 1. 地图显示
首先对比一下底图效果
API 3.0 为 2D 视图，和普通的官网地图以及手机常用地图类似。支持常用的缩小放大移动等功能。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093436185-1046339144.png" alt="" loading="lazy">
 
 GL API1.0 为3D效果，地图添加了三维白模建筑模型，支持缩小放大平移，同时增加了视角来支持三维查看。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093450557-1685745411.png" alt="" loading="lazy">
 
 
2. 地图类型
2D API 3.0  支持矢量图（参考1）和卫星图
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410103356341-1820252381.png" alt="" loading="lazy">
 
 
3D GL API 1.0 地图3D和地球模式，地球模式其实和 2D中的卫星图类似，只是增加了视角模式支持三维查看。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093605128-434323488.png" alt="" loading="lazy">
 <img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410103322468-770225172.png" alt="" loading="lazy">
 
  
3. 个性化地图
2D API 3.0 和 3D GL API 1.0 都支持百度地图的自定义个性化地图。包括支持在 Android 和 iOS SDK 中使用。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093742992-793462417.png" alt="" loading="lazy">
  
4. 标注
2D API 3.0  中可展示对象的标注。标注内容支持文本框和矢量对象，支持overLayer实例。
3D API 1.0 中目前支持文本标注。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093902086-1115322421.png" alt="" loading="lazy">
 
3D API 1.0 
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410094040119-744225065.png" alt="" loading="lazy">
 
 
4. 信息框（富标注）
2D API 3.0  支持对象的信息展示，信息内容可以为文本以及 html 内容，信息框每次只能显示一个。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410094117708-1704157597.png" alt="" loading="lazy">
 
2D 富标注支持 Overlayer 的实例，可以自定义为更加丰富的内容。如富标注。
并且支持多个信息框同时显示，可用于多个泵站或者对象同时显示内容，如运行状态，设备参数等。
 <img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410094013178-984934719.png" alt="" loading="lazy">
 
3D API 1.0 支持文本或者html内容的信息框显示，只能同时显示一个信息框，且不支持overlayer 实例。无法支持同时显示多个信息框。
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410103828528-1063360202.png" alt="" loading="lazy">
    
5. 聚合
2D API3.0  支持点聚合，聚合样式较为好看，并且支持点击聚合标签后，自动缩放到聚合的对象所在的区域内。聚合调用BMapLib.MarkerClusterer
  http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/conflux
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093329273-1566246720.png" alt="" loading="lazy">
 
3D GL1.0  支持聚合，聚合样式较为简单，且不支持点击自动缩放所在区域。感觉比较生硬。聚合调用 mapvgl.ClusterLayer。
 https://mapv.baidu.com/gl/examples/editor.html#point-cluster.html
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410093246108-1591904243.png" alt="" loading="lazy">
 
 6. 轨迹（路书）
轨迹路线显示，从视觉效果上查看，GL1.0API应该稍微好点。 API 3.0 能基本满足功能需要。
2D API 3.0  http://api.map.baidu.com/library/LuShu/1.2/examples/LuShu.html
 <img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410101054419-1345153020.gif" alt="" loading="lazy">
3D API 1.0
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trackAnimation
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410105311904-760489515.png" alt="" loading="lazy">
  
总结：
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410111052153-347323305.png" alt="" loading="lazy">
 
从上面的表格可以看出，2D 和 3D API 在功能和显示上，各有优缺点，但是每个单独的 API 都不能单独完美的将这些功能需求结合在一起，在实际开发中
还需要根据功能需求来进行判断。
项目中使用两种API作出来的效果：
2D API
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410112806481-699722177.png" alt="" width="621" height="486" loading="lazy"><img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410113227869-1412671506.png" alt="" width="618" height="488" loading="lazy">
 
3D API
<img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410113258188-1658203517.png" alt="" width="663" height="411" loading="lazy"><img src="https://img2020.cnblogs.com/blog/59231/202104/59231-20210410113316920-1203403514.png" alt="" width="653" height="402" loading="lazy">
 
另外作为地图B（百度地图）A（阿里下的高德地图）T（腾讯地图）三甲行列，百度地图里竟然不能不能搜索已加载图层里的内容，这是我没有想到的。
你可以通过它的接口搜索POI信息，可以进行路线规划甚至导航，但是搜不到图层数据，有点想不明白（虽然可以自己写后台接口实现）。
这也许就是 BAT 与开源软件的差别吧。
  
来源：https://www.cnblogs.com/googlegis/p/14639627.html

頁: [1]

琼殿技术论坛's Archiver

百度地图（1）- JavaScript API V3.0 对比 JavaScript GL API 1.0