示例中心
功能在线体验
menu 导航 closed 关闭
数据可视化 JS API 示例中心

基本功能

  • 可视化图层创建 使用 RoundPointLayer 点图层,绘制圆形点标记。
  • 点动态样式 圆形半径(radius)线性映射震级大小(mag),即圆形半径大小和震级高低成正比。
  • 加载 CSV 数据 通过 setData(csv, {type: 'csv'}) 接口传入 CSV 格式数据。
  • 鼠标事件选中样式 鼠标事件以及数据选中的样式
  • 柱体光照和鼠标事件 通过设置 light 属性,配置棱柱的光照效果。其中包括环境光(ambient)、平行光(directional),同时增加鼠标事件。 (柱体仅 3D 模式下支持)
  • 棱台 通过设置棱柱体顶面半径 topRadius 和 底面半径 bottomRadius 不同,来实现梯形棱台的效果。棱台高度可依赖数据字段呈现高低起伏效果。

点云 PointCloudLayer

  • 武汉市车辆密度 武汉市区某一时刻车辆密度静态图
  • 世界矿物质分布图 世界范围内的矿物质分布密度,数据量大约是 30 万点
  • 美国某城市水域密度 点云类型展示美国某城市水域密度,大约有 18 万个点数据。

散点 ScatterPointLayer

  • 分类散点 点图,设置点的颜色表达不同数据分类字段。
  • 单色散点 使用 2D 散点展示全国市县区的数据,点颜色没有数据字段依赖。

圆点 RoundPointLayer

  • 大小圆点动态样式 - Function 通过回调函数动态设置图形属性。圆大小颜色均可依赖数据字段呈现大小和颜色的视觉暗示。

图标点 IconLayer

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

线 LineLayer

  • 单色路径 北京公交路网,线(line)型数据,形成路径和轨迹的视觉效果。
  • 分类路径 北京公交线路,使用不同的颜色描述不同的线路

连接线 LinkLayer

  • 弧度连接线 两地直接连线,弧度数可依赖数据字段
  • 世界航空线 世界航空线,根据距离映射弧度
  • 直线连接线 各省会之间的直线(line)连接

多边形 PolygonLayer

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

热力 HeatmapLayer

  • 2D 热力图 基础热力地图
  • 3D 热力-路口拥堵指数 使用 3D 热力图展示上海某时段路口拥堵情况

网格 GridLayer

  • 网格热力 - 文字标注 在每个网格热力里面增加文字,显示出每个网格的具体值。
  • 网格热力 - 颜色 正四边形热力图,使用「颜色」表示热力值大小。
  • 网格热力 - 带有图例 带有图例显示的网格热力聚合图

蜂窝 HexagonLayer

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

行政区图 DistrictLayer

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

等值图 CountourLayer

  • 等值线 Loca 3D 等值线图层,通过 shape 设置为 'isoline' 可绘制为等高线。
  • 等值面 等值面图层,通过 shape 设置为 'isoband' 可绘制为等值面。

文字 LabelsLayer

  • 各省年收入 用文字展示中国各省份 2018 年收入情况
  • 各地区交通事故增长率 带有避让效果的文字,展示全国各地区交通事故的增长率,使用大小不同和颜色不同的文字表示。
新用户
福利
示例
中心
常见
问题