数据可视化图层使用指南

JSAPI GL

createDataLayer 函数规范 （1.1.1新增）

数据图层解析渲染函数，通过layerId直接创建图层，目前支持热力图，蜂窝热力图，网格热力图和弧线图的创建，同时支持上述图层所有方法的使用，暂时只支持手动刷新页面的方式更新数据。

属性

返回值

创建图层语法

• 创建图层对象，图层会自动添加到地图中并显示：

  const dataLayer = TMap.visualization.createDataLayer(layerId, map);
  

方法调用示例

• 隐藏图层：

  dataLayer.then(layer => {
      layer.hide();
  });
  

• 重新显示图层：

  dataLayer.then(layer => {
      layer.show();
  });
  

• 删除图层：

  dataLayer.then(layer => {
      layer.remove();
  });
  

• 销毁图层对象：

  dataLayer.then(layer => {
      layer.destroy();
  });
  

• 更多可调用方法请参考各类图层参考手册：热力图，蜂窝热力图，网格热力图，弧线图

iOS地图SDK

可视化图层除了通过自定义的形式添加之外，还支持通过图层id来直接添加数据图层，同时还支持根据固定的时间间隔自动更新数据图层。

引入数据可视化库

使用数据可视化功能，除地图SDK的基础库之外，还需要引入额外的可视化图层库：<QMapVisualPlugin/QMapPluginKit.h>

#import <QMapVisualPlugin/QMapPluginKit.h>

添加可视化图层

1. 创建可视化图层类，并指定图层ID：

QVisualLayer *visualLayer = [[QVisualLayer alloc] initWithUID:@"图层ID"];

2. 设置更新时间，图层添加完毕后会根据此时间间隔自动更新：

// 图层刷新数据时间最小时间间隔为15秒，默认为0，即不更新
visualLayer.interval = 30;

3. 将可视化图层添加到地图中：

[self.mapView addVisualLayer:visualLayer];

监听可视化图层的回调

数据可视化图层类提供了代理<QVisualLayerDelegate>，用于监听可视化图层的加载：

/**
 *  @brief  可视化数据图层加载时会调用此接口
 *
 *  @param layer 可视化数据图层
 *  @param error 错误信息. 如果nil则成功。
 *  			 errorcode目前支持网络错误码, layerID无效: 2, 数据错误: 3
 */
- (void)visualLayerDidFinshLoading:(QVisualLayer *)layer withError:(NSError *)error;

移除可视化图层

当数据图层不需要显示时，可以把对应的数据图层在地图上移除，示例如下： [self.mapView removeVisualLayer:visualLayer];

Android地图SDK

1. 添加数据图层接口

	mMapView = (MapView) findViewById(R.id.map_view);
	mTencentMap = mMapView.getMap();
	mVisualLayer = mTencentMap.addVisualLayer(new VisualLayerOptions("xxxxxxxx") //xxxxxxxx为官网配置生成对应图层的图层id
		       .newBuilder()
                       .setAlpha(1)
                       .setLevel(OverlayLevel.OverlayLevelAboveBuildings)
                       .setZIndex(10)
                       .setTimeInterval(15)
                       .build());

2. 调整数据图层参数接口

a. 设置数据图层整体透明度

	mVisualLayer.setAlpha(0.9);

b. 设置显示级别(POI之上/POI之下)

	mVisualLayer.setLevel(OverlayLevel.OverlayLevelAboveLabels);
	mVisualLayer.setLevel(OverlayLevel.OverlayLevelAboveBuildings);

c. 设置zIndex层级

	mVisualLayer.setZIndex(10);

d. 设置数据刷新时间(单位: s)

	mVisualLayer.setTimeInterval(15);

e. 控制数据图层显示 隐藏

	mVisualLayer.setVisible(true);

3. 清空数据图层缓存接口

	mVisualLayer.clearCache();         

4. 移除数据图层接口

	mVisualLayer.remove();        

微信小程序

添加数据可视化图层：https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.addVisualLayer.html

移除数据可视化图层：https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.removeVisualLayer.html