示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.
数据可视化 JS API 示例中心

基本功能

  • 可视化图层创建 使用 RoundPointLayer 点图层,绘制圆形点标记。
  • 加载 CSV 数据 通过 setData(csv, {type: 'csv'}) 接口传入 CSV 格式数据。
  • 设置选中样式 设置 selectStyle,可以在图层元素被 mouseenter 或者 click 时触发。需要开启 eventSupport: true。
  • 鼠标事件 鼠标事件

散点 ScatterPointLayer

  • 全国市县散点 使用 2d 散点展示全国市县区的数据
  • 圆点 使用北京某时刻行人出行热力数据,颜色表示数据的大小,数据越大,颜色越红。其中热力数据已按照每 1000m 进行聚合。height 设为 0,即可实现贴地原点的效果。 棱柱类型仅 3D 模式下支持
  • 圆柱 通过设置高度区间,将圆柱进行立体展示。
  • 圆柱 - 光照 通过设置 light 属性,配置圆柱的光照效果。其中包括环境光(ambient)、平行光(directional)。
  • 棱柱 - 鼠标事件 通过设置 light 属性,配置棱柱的光照效果。其中包括环境光(ambient)、平行光(directional)。同时增加鼠标事件。 棱柱类型仅 3D 模式下支持。
  • 棱台 通过设置棱柱体顶面半径 topRadius 和 底面半径 bottomRadius 不同,来实现梯形棱台的效果。

圆点 RoundPointLayer

  • 点图 - 10万个点 点图,描述了一份 10 万辆北京公共交通车辆的瞬时位置。
  • 圆点动态样式 - Function 通过回调函数动态设置图形属性。
  • 圆点动态样式 - Attr 圆形半径(radius)线性映射震级大小(mag),即圆形半径大小和震级高低成正比。

图标点 IconLayer

  • 天气预报 图形标记 - 天气预报。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。
  • 银行网点 图标 - 银行网点。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。

线 LineLayer

  • 北京公交路网 北京公交路网。线(line)类型数据

连接线 LinkLayer

  • 城市连线 各省会之间的直线(line)链接。
  • 航空线路 全国省会连线。
  • 世界航空线 世界航空线,根据距离映射弧度

多边形 PolygonLayer

  • 小区及楼块图 北京望京附近小区及楼块图
  • 北京行政区面 3D 模式下的北京各区行政边界。3D 面类型,暂时不支持边框颜色及宽度的设置。

热力 HeatmapLayer

  • 热力图 3D 基本类型热力图,使用「高度」及「颜色」表示热力值大小。

网格 GridLayer

  • 网格热力 - 颜色 正四边形热力图,使用「颜色」表示热力值大小。
  • 网格热力 - 高度和颜色 正四边形热力图,使用「高度」和「颜色」表示热力值大小。
  • 网格热力 - 带有图例 带有图例显示的网格热力聚合图

蜂窝 HexagonLayer

  • 蜂窝热力图(按米分箱) 按米分箱的 3D 蜂窝热力图,使用「高度」及「颜色」表示热力值大小。
  • 蜂窝热力图 - 鼠标事件 蜂窝热力图-通过事件获取数据,获取热力值、当前经纬度等信息
  • 添加图例 通过 'legendupdate' 事件获取图例数据,并绘制图例。
  • 某公园周边人流分布 某公园周边1万7千条定位数据的热力分布情况,颜色和高度表示定位聚合后的情况。同时配有图例说明。

行政区图 DistrictLayer

  • 行政区热力 全国部分知名景区行政区分布,按所在行政区聚合后的立体热力图,使用「高度」及「颜色」表示热力值大小。
  • 行政区下钻上浮 行政区下钻、上浮控制,以及行政区分箱聚合数据。
  • 行政区热力 - 鼠标事件 通过点击事件,获取行政区热力数据。

等值图 CountourLayer

  • 等值线 Loca 3D 等值线图层,通过 shape 设置为 'isoline' 可绘制为等高线。
  • 等值面 等值面图层,通过 shape 设置为 'isoband' 可绘制为等值面。
新用户
福利
功能
在线体验
常见
问题