jspopularGLUpgrade

JavaScript API GL升级指南

更新时间：2023年07月07日

简单介绍

本文适用于需要将接入了地图 JS API 2.0 或者 3.0版本的地图应用升级到 GL 的开发者阅读，我们建议开发者按照以下步骤对代码进行少许修改来升级 JS API 的版本，以便获得最佳的开发体验和后续服务支持。

新旧版本对比

1.引用JS不同

GL版本引用的百度地图API文件需按下方内容替换：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

以上是同步加载 JSAPI 的使用方式，异步加载可以参考示例;

2.调用类以及展示地图等方法不同

初始化地图设置，将BMap改为BMapGL

注意：所有的实例化都需要修改为BMapGL

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

3.引用库相关替换

GL工具库BMapGLLib， MapVGL， BMap Draw

4.方法使用区别

(1) 折线添加箭头：

var polyline = new BMapGL.Polyline([
   new BMapGL.Point(116.399, 39.910),
   new BMapGL.Point(116.405, 39.920),
   new BMapGL.Point(116.423493, 39.907445)
], {
    strokeTexture: { // width/height 需要是2的n次方
    url:'./images/Icon_road_blue_arrow.png',
    width: 16,
    height: 64
},
    strokeWeight: 8,
    strokeOpacity: 0.8
});

使用时可参考示例。

(2) GL点标记marker目前不支持弹跳，使用时可调用其他方式实现如：

// 创建自定义覆盖物DOM
function createDOM(feature) {
    var img = document.createElement('img');
    img.style.height = '240px';
    img.style.width = '80px';
    img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
    img.draggable = false;
    return img;
}
// 创建自定义覆盖物
var customOverlay = new BMapGL.CustomOverlay(createDOM, {
    point: new BMapGL.Point(116.42342230333138, 39.92498414216742),
    opacity: 0.5,
    offsetY: -10
  });
map.addOverlay(customOverlay);

使用时可参考示例。其他方法可参考示例。

(3) 底图点击事件更改：需要添加以下代码实现：

map.addEventListener('click',e=>{
  clickPoint = e.lating;
  const point = e.point;
  const itemId = map.getIconByClickPosition(e);  
})

使用时可参考示例。

(4) 添加聚合点更改：

GL版本需引用MapvGL的js 并调用new mapvgl.ClusterLayer() 方法，使用时可参考MapVGL示例

(5) 添加热力图图层更改：

GL需要调用MapVGL的方式实现热力图的加载，使用时可参考 MapVGL示例。

(6) 个性化地图调用方法变更：

GL目前仅支持新版个性化地图方法（Map.setMapStyleV2），不支持旧版的个性化地图方法（Map.setMapStyle）。

(7) 行政区划方法更改：

GL新增简易行政区图层方法：new BMapGL.DistrictLayer() 使用时可参考行政大区图层。

(8) 轨迹运动方法更改：

GL版本的需要调用 BMapGLLib.TrackAnimation，引入 TrackAnimation.min.js。使用时可参考查看源码

(9) 自定义canvas图层更改：

GL版本采用以下方法进行调用：

BMapGL.CustomHtmlLayer(createDOM, {
  offsetX: 0,
  offsetY: 0,
  minZoom: 13,
  maxZoom: 19,
  enableDraggingMap: true
});

使用时可参考示例。

(10) 室内图展示功能更改：

GL版本的展示室内图需在地图初始化时进行设置：showControls: true 使用时可参考室内图

(11) GL版本新增了设置3D视角等属性

可通过map.setHeading(64.5)；map.setTilt(73)这两个属性进行设置

(12) 交通流量图层方法更改：

GL版本使用方法为添加：map.setTrafficOn()，移除：map.setTrafficOff(); 使用时可参考交通流量图层。

(13) 调用驾车路线规划添加途经点方法更改：

GL版本使用方法为以下：

var driving = new BMapGL.DrivingRouteLine(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true,
        enableDragging: true,
    }
});
var start = new BMapGL.Point(116.236532, 39.904113661);
var end = new BMapGL.Point(116.545486, 40.006040);
var way2 = new BMapGL.Point(116.36315661025989,39.904113661);
driving.search(start, end, {
  waypoints: [way2]
});

使用时可参考驾车路线规划。

升级完成

如发现其他接口上的不兼容，可以通过创建工单方式进行反馈

文档全面上新