百度地图 JS 开发是选择传统版本,还是 WebGL 版本?

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-3

1、引用

传统版本的引用(以 2.0 版本为例):http://api.map.baidu.com/api?v=2.0&ak=xxxxx

WebGL 版本的引用(当前为 1.0 版本):http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx

2、使用

传统版本的命名空间为 BMap,比如:new BMap.Map('container')。

WebGL 版本的命名空间为 BMapGL,比如:new BMapGL.Map('container')。

3、显示 Gif 图片

使用 BMap.GroundOverlay 能够显示 Gif 图片,且是动态的。

使用 BMapGL.GroundOverlay 能够显示 Gif 图片,但是是静态的。

4、WebGL 完善吗?

以 GroundOverlay 为例,在参考文档中,说了具有 getImageURL()、getOpacity() 等方法,但是际无法调用

传统的则能调用

5、二者除了命名空间不同,类的成员名称相同吗?

并不完全相同。我们以官方的示例进行简化说明:

传统的:

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(117.200, 36.2437), 18);

var pStart = new BMap.Point(117.19635, 36.24093);
var pEnd = new BMap.Point(117.20350, 36.24764);
var bounds = new BMap.Bounds(new BMap.Point(pStart.lng, pEnd.lat), new BMap.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMap.GroundOverlay(bounds, {
    imageURL: '../img/border.gif'
});
map.addOverlay(imgOverlay);

WebGL 的:

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);

var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    url: '../img/border.gif'
});
map.addOverlay(imgOverlay);

一个为 imageURL,一个为 url

说明:上述的 pStart、pEnd 限定了图片的经纬度,这样放大地图,图片会被拉大,缩小地图,图片会自动缩小。

再举例:BMapGL.Map 具有 setTilt()、setDisplayOptions() 方法,但是 BMap.Map 则不具备这些方法。

6、位置也不同

上述代码,传统的图片要显示在下面一点,相当于是在 WebGL 对应的图片的街对面了。

7、扩展说一下传统的,如何替换覆盖物图片

var light = true;
setInterval(function () {
	if (light) {
		imgOverlay.setImageURL("../img/a.png");
	}
	else {
		imgOverlay.setImageURL("../img/b.png");
	}
	light = !light;
}, 1000);

8、文档

百度地图JSAPI 2.0类参考 (bcebos.com)

百度地图JSAPI 3.0类参考 (bcebos.com)

百度地图JSAPI WebGL v1.0类参考 (bcebos.com)

相关文章