LOCA 数据可视化 API 2.0

Loca

图层的容器和控制器

Loca.Container

Loca 的核心控制类,可以控制光照、视角变换、图层渲染等。

new Loca.Container(opts: LocaOptions)
参数说明:
opts (LocaOptions) 默认的 loca 参数
Name Description
opts.map AMap (default null) loca 的地图容器,必填项。
属性说明:
ambLight (Object?) : 环境光,对于可以接受光照的图层(PolygonLayer 等)会增加环境光的影响。
dirLight (Object?) : 平行光,对于可以接受光照的图层(PolygonLayer 等)会增加平行光的影响。平行光一般用来模拟太阳的光照。
它的方向由 position 射向 target。position和target的坐标是一个位置加 z 值(单位米)高度决定。比如: [1, 1, 1000] 代表x:1, y:1, 高度1000米。
如果模拟一个从正南方向的平行光,可以设置target: [0,0,0], position: [0,-1,0]
pointLight (Object?) : 点光,对于可以接受光照的图层(PolygonLayer 等)会增加点光的影响。点光源通常用来突出展示场景中的某些物体。
它的位置和平行光不太一样,x和y是地图上的经纬度位置,z是高度米,比如北京上空一万米的位置放一个点光源:position: [116.39079, 39.90624, 10000]。
光照的distance代表光能照射的最远距离是多少。
viewControl (ViewControl?) : 地图的视角控制器,支持连续的视角动画过渡控制。详细说明看ViewConTrol说明。
animate (Aniamte?) : 帧控制器,控制地图渲染。和loca一起初始化,不需要使用者创建。
对于一些支持动画效果的图层(比如Scatter、PulseLine),需要使用animate启动动画。
示例代码:
// 创建地图
var map = new AMap.Map('map', {
    showLabel: false,
    viewMode: '3D',
    pitch: 50,
    zoom: 12, //初始化地图层级
    center: [121.496534, 31.243335] //初始化地图中心点
});
// 创建loca
var loca = new Loca.Container({
    map: map,
});

// 设置光源
// 环境光
loca.ambLight = {
    intensity: 0.8, // 环境光强度,建议值: 0~1
    color: '#fff', // 环境光颜色
};
// 平行光
loca.dirLight = {
    intensity: 0.5, // 光照强度,建议值: 0~1
    color: 'rgb(255,255,255)', // 平行光颜色
    target: [0, 0, 0], // 光射向的目标位置
    position: [0, -1, 1], // 坐标位置
};
// 点光
loca.pointLight = {
    color: 'rgb(255,255,255)', // 点光颜色
    position: [121.50741577148439, 31.236288641793006, 1000], // 点光的位置
    intensity: 4, // 光照强度
    // 距离表示从光源到光照强度为 0 的位置,0 就是光不会消失。
    distance: 10000,
};

// 创建各种图层
todo: ...

// 帧的启动和停止代表地图在每一帧是否会触发渲染,如果你想拥有图层动画、镜头动画等动画效果,需要启动帧。
// 它会占用一部分 GPU 资源,但是一般来说可以忽略不计。
// 启动帧
loca.animate.start();
// 暂停帧
loca.animate.pause();
// 停止帧
loca.animate.stop();
成员函数:
requestRender()
add(layer)
remove(layer)
getControlContainer()
destroy()

Loca.ViewControl

视角控制器。不需要使用者主动创建。它的实例和 loca 一起初始化,会在 loca.viewControl 属性上挂载,如果使用的话,请直接使用 loca 实例上的 viewControl 属性。

new Loca.ViewControl()
示例代码:
loca.viewControl.addAnimates({}, () => {
    // 动画结束后的回调,可以继续添加下一个动画转场
    loca.viewControl.addAnimates(...)
});
成员函数:
addAnimates(configs?, finised?)
addTrackAnimate(config, callback)
clearAnimates()
pauseAnimate()
resumeAnimate()

数据源

图层的数据源

Loca.GeoJSONSource

geojson 格式的数据源,一个数据源可以给多个图层同时提供数据。一个geojson数据源可以同时拥有点、线、面的数据类型,每个图层绘制的时候会自动获取 合适的数据类型进行渲染。 关于 geojson 格式的数据说明可以访问:https://geojson.org/ 查看。

new Loca.GeoJSONSource(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.data GeoJSON (default {}) 数据对象。如果你不想使用 url 方式请求数据,可以直接填写请求好的 geojson 对象。
opts.url String (default '') 数据源的链接地址,一般是接口地址,返回的数据必须是 geojson 格式。
示例代码:
var geoSource = new Loca.GeoJSONSource({
    // data: {// geojson 对象},
    url: './example.geojson',
})
成员函数:
destroy()

控件

可视化图层相关控件

Loca.Legend

基础图例,可以表达颜色和数值或者种类的映射关系。

new Loca.Legend(opts: LegendOptions)
参数说明:
opts (LegendOptions) 图例参数
Name Description
opts.loca Loca (default null) 有此参数, 默认会把图例添加到loca上
opts.title Title (default {...}) 图例的标题和样式
opts.title.label String (default "图例") 标题名
opts.title.fontSize String (default "20px") 标题文字大小
opts.title.fontColor String (default "#fff") 标题文字颜色
opts.title.fontWeight String (default "bold") 标题文字粗细
opts.title.padding String (default "0 0 5px 0") 标题内填充
opts.title.margin String (default 0) 标题外边距
opts.style Style (default {...}) 图例的样式
opts.style.backgroundColor String (default "rgba(0,0,0,0.7)") 图例的背景颜色
opts.style.fontSize String (default "14px") 图例的文字大小
opts.style.fontColor String (default "#fff") 图例的文字颜色
opts.style.borderRadius String (default "0px") 图例的背板边角圆弧半径
opts.style.position String (default "absolute") 图例的相对定位
opts.style.top String? 图例的顶部定位
opts.style.bottom String? 图例的底部定位
opts.style.left String? 图例的左边定位
opts.style.right String? 图例的右边定位
opts.style.padding String (default "10px 15px") 图例的内填充
opts.dataMap Array (default [...]) 图例的值和颜色信息,label 代表显示的文本,color 代表色块图例。
示例代码:
var lengend = new Loca.Legend({
    loca: loca,
    title: {
        label: '图例',
        fontColor: '#fff',
        fontSize: '20px',
        fontWeight: 'bold',
        padding: '0 0 5px 0',
        margin: 0,
    },
    style: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        fontSize: '14px',
        size: '16px',
        fontColor: '#fff',
        borderRadius: 0,
        position: 'absolute',
        left: '20px',
        bottom: '20px',
        padding: '10px 15px',
    },
    dataMap: [
        { label: '第一个', color: '#feedde' },
        { label: '第二个', color: '#fdbe85' },
        { label: '第三个', color: '#fd8d3c' },
        { label: '第四个', color: '#e6550d' },
        { label: '第五个', color: '#a63603' },
    ],
});
成员函数:
setStyle(userStyle)
addTo(loca)
remove()

基础图层

基础图层类型

Loca.Layer

基础图层类,是一个抽象类,是其他图层的基础。有通用的方法和参数。

new Loca.Layer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) 默认会添加到地图上
opts.zIndex Number (default 10) 图层显示层级
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.opacity Number (default 1) 图层整体透明度
成员函数:
setLoca(loca)
setOpacity(opacity)
setzIndex(zIndex)
setZooms(zIndex)
show(duration, callback)
hide(duration, callback)
remove()
destroy()
queryFeature(pos)
addAnimate(config, callback)

Loca.PointLayer

圆点图层,拥有描边的原点,可以支持边缘模糊特效。
支持对每个圆点的半径、颜色、描边信息单独设置。

new Loca.PointLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.opacity Number (default 1) 图层整体透明度
opts.blend String (default 'normal') 图层里面元素的叠加效果,normal:正常透明度叠加,lighter:叠加后可能更加明亮
示例代码:
var layer = new Loca.PointLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    blend: 'lighter',  // 叠加高亮
})
成员函数:
setStyle(options)

Loca.IconLayer

图标图层

new Loca.IconLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.visible Boolean (default true) 图层是否可见
opts.opacity Boolean (default true) 图层透明度
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var layer = new Loca.IconLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
})
成员函数:
setStyle(options)

Loca.PrismLayer

棱柱图层,使用点类型数据表达带有高度的立体棱柱,使用高度、颜色、半径等样式表达点数据的不同维度属性信息。支持动画、光照效果。

new Loca.PrismLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.opacity Number (default 1) 图层整体透明度
opts.cullface String (default 'back') 剔除背面/前面的面(选择剔除将会提升性能),可选:back/front/none,back是剔除背面的面,front是剔除前面的面,none是不进行剔除。
opts.acceptLight Boolean (default true) 面是否接受光照,光照信息在 loca 对象中配置
opts.shininess Number (default 30) 立体网格的粗糙度,值越高,说明表面越粗糙。
opts.hasSide Boolean (default true) 当面有厚度的时候,有没有侧面和底面
opts.depth Boolean (default true) 是否开启深度检测,开启后可能会影响zIndex
示例代码:
var layer = new Loca.PrismLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    acceptLight: true,
    visible: true,
})
成员函数:
setStyle(options)

Loca.ZMarkerLayer

垂直于大地表面的 Marker 图层,支持传入自定义 DOM 进行绘制。你可以使用它展示一些 和数据相关的文字、图片信息,而且它还支持永远朝向屏幕的特性,非常适合对文字类信息的展示。

new Loca.ZMarkerLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.visible Boolean (default true) 图层是否可见
opts.opacity Boolean (default true) 图层透明度
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var layer = new Loca.ZMarkerLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
})
成员函数:
setStyle(options)

Loca.LineLayer

线图层,支持设置描边和虚线。

new Loca.LineLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var lineLayer = new Loca.LineLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
});
成员函数:
setStyle(options)

Loca.LinkLayer

链接线图层

new Loca.LinkLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var linkLayer = new Loca.LinkLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
})
成员函数:
setStyle(options)

Loca.PolygonLayer

面图层,支持多边形、复杂多边形、带洞多边形的绘制。支持底面海拔高度和面的厚度效果。 并且还支持对每个多边形设置不同的个性化样式,而且性能依然很好。 我们还对重复设置图层样式进行了性能优化,保证在某些频繁切换面样式的情况下依然流畅。 当你的希望你的面有透明度效果,并且面和面直接有高度的压盖关系时,我们对渲染效果进行了优化。 能让你看到清晰的透明面! 注意:在侧面进行贴图的时候,如果你希望图片在侧面进行重复贴图,那么必须要求贴图纹理的宽高大小一定是 2 的 n 次方。 例如:256x512、1024x1024 等

new Loca.PolygonLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级,如果图层的深度检测开启,那么 zIndex 有可能失效。
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.cullface String (default 'back') 剔除背面/前面的面(选择剔除将会提升性能),可选:back/front/none,back是剔除背面的面,front是剔除前面的面,none是不进行剔除。
opts.acceptLight Boolean (default true) 面是否接受光照,光照信息在 loca 对象中配置
opts.shininess Number (default 30) 立体网格的粗糙度,值越高,说明表面越粗糙。
opts.hasSide Boolean (default true) 当面有厚度的时候,有没有侧面和底面
opts.depth Boolean (default true) 是否开启深度检测,开启后可能会影响zIndex
示例代码:
var polygonLayer = new Loca.PolygonLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    shininess: 30,
    hasSide: true,
    depth: true,
})
成员函数:
setStyle(options)

Loca.HeatMapLayer

热力图,支持 3D 和不同颜色设置的聚合点数据显示。并且支持像素单位和米单位的热力聚合。 针对部分业务场景,还能够支持颜色边缘的模糊过渡和硬过渡效果。详细查看 difference 属性。

new Loca.HeatMapLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.depth Boolean (default true) 图层是否开启深度检测
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var heatmapLayer = new Loca.HeatMapLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
})
成员函数:
setStyle(options)

Loca.HexagonLayer

蜂窝网格图,将普通的点数据按照蜂窝网格划分成若干区域,每个蜂窝网格区域都会包含落在此区域内的点数据信息。 每个蜂窝网格格子支持单独设置自定义的高度信息、颜色信息。 要注意的是:我们认为所有蜂窝网格格子必须是唯一的大小(radius)和间隙(gap)。 我们还在带有高度的蜂窝网格中加入了可接受光照信息的属性:acceptLight。假如设置了光照并在图层中开启接受光照, 那么每个立体蜂窝网格将会有光照反射的效果。

new Loca.HexagonLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级,如果图层的深度检测开启,那么 zIndex 有可能失效。
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.cullface String (default 'back') 剔除背面/前面的面(选择剔除将会提升性能),可选:back/front/none,back是剔除背面的面,front是剔除前面的面,none是不进行剔除。
opts.acceptLight Boolean (default true) 立体蜂窝网格是否接受光照,光照信息在 loca 对象中配置
opts.depth Boolean (default true) 是否有深度检测能力,当图层元素没有高度的时候,并且需要 zIndex 生效,那么请关闭深度检测。
opts.shininess Number (default 30) 立体蜂窝网格的粗糙度,值越高,说明表面越粗糙。
opts.hasSide Boolean (default true) 当立体蜂窝网格有厚度的时候,有没有侧面和底面
示例代码:
var hexagonLayer = new Loca.HexagonLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    depth: true,
    shininess: 30,
    hasSide: true,
})
成员函数:
setStyle(options)

Loca.GridLayer

网格图,将普通的点数据按照网格划分成若干区域,每个网格区域都会包含落在此区域内的点数据信息。 每个网格格子支持单独设置自定义的高度信息、颜色信息。 要注意的是:我们认为所有网格格子必须是唯一的大小(radius)和间隙(gap)。 我们还在带有高度的网格中加入了可接受光照信息的属性:acceptLight。假如设置了光照并在图层中开启接受光照, 那么每个立体网格将会有光照反射的效果。

new Loca.GridLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级,如果图层的深度检测开启,那么 zIndex 有可能失效。
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
opts.cullface String (default 'back') 剔除背面/前面的面(选择剔除将会提升性能),可选:back/front/none,back是剔除背面的面,front是剔除前面的面,none是不进行剔除。
opts.acceptLight Boolean (default true) 立体网格是否接受光照,光照信息在 loca 对象中配置
opts.depth Boolean (default true) 是否有深度检测能力,当图层元素没有高度的时候,并且需要 zIndex 生效,那么请关闭深度检测。
opts.shininess Number (default 30) 立体网格的粗糙度,值越高,说明表面越粗糙。
opts.hasSide Boolean (default true) 当立体网格有厚度的时候,有没有侧面和底面
示例代码:
var gridLayer = new Loca.GridLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    depth: true,
    shininess: 30,
    hasSide: true,
})
成员函数:
setStyle(options)

动画图层

带有动画效果的图层类型

Loca.ScatterLayer

大地面上的点,可展示三种类型:颜色圆、图标、动画图标

new Loca.ScatterLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var scatter = new Loca.ScatterLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
});
成员函数:
setStyle(options)

Loca.PulseLineLayer

轨迹线图层,支持设置轨迹样式和轨迹点。

new Loca.PulseLineLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
成员函数:
setStyle(options)

Loca.PulseLinkLayer

连接飞线图层,可以支持弧度,宽度,过渡色等能力。 并且还支持脉冲动画,可以表达数据的朝向。

new Loca.PulseLinkLayer(opts: LayerOptions)
参数说明:
opts (LayerOptions) 默认的图层参数
Name Description
opts.loca Loca (default null) loca 对象,如果有,图层默认添加到地图上
opts.zIndex Number (default 120) 图层显示层级
opts.opacity Number (default 1) 图层整体透明度
opts.visible Boolean (default true) 图层是否可见
opts.depth Boolean (default true) 图层中的要素是否具有前后遮盖关系,默认开启
opts.zooms [Number, Number] (default [2,20]) 图层缩放等级范围
示例代码:
var linkLayer = new Loca.PulseLinkLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    depth: true,
})
成员函数:
setStyle(options)