开发 数据可视化 JS API v1.2 教程 基础教程 可视化图层

可视化图层 最后更新时间: 2021年01月22日

创建好 Loca 容器后,接下来需要创建可视化图层——VisualLayer 用以显示可视化信息。
一个容器中,可以设置多个图层用以展示不同类型的数据。多个图层将叠加在底图之上,图层的的先后顺序是按照添加顺序来确定的。如有层级需求,请控制添加的顺序。


接来下演示图层的创建及使用:

1. 图层创建

目前提供 工厂方法 及  new 函数 两种方式创建,方便开发者根据自己的习惯使用。

// 1. 工厂方法
var layer = Loca.visualLayer();

// 2. new 函数创建
var layer = new Loca.VisualLayer()

在创建图层后,可以使用 addTo() 添加至已有容器,也可以在上面创建时就指定容器。

// 创建后再指定
layer.addTo(locaMap);

// 或者创建时指定
var layer = Loca.visualLayer({
    container: locaMap,
    type: 'point',
    shape: 'circle'
});


其中 type 配置描述了坐标类型,由于这里使用的是点类型,因此设置成 point,如果坐标数据为线或面类型,请设置成 line 或 polygon,只有设置了正确的 type 类型,坐标数据才会按照不同类型解析。 

shape 配置描述了绘制在地图上的图形形状,这里原始数据是点,那么我们使用圆形 circle 形状绘制,当然我们也可以选择方形、图片等来绘制。


2. 设置数据

接下来可以使用 setData(<Array> data, <Object> options) 为图层设置数据,数据一般使用 JSON 格式,这里也支持 CSVTSV 格式。不同格式数据的使用,后面有专门章节介绍。

var data = [
    { 'name': '北京市', 'center': '116.407394,39.904211' },
    { 'name': '天津市', 'center': '117.200983,39.084158' },
    { 'name': '河北省', 'center': '114.530235,38.037433' },
    { 'name': '山西省', 'center': '112.562678,37.873499' }
];

layer.setData(data, {
    type: 'json',
    lnglat: 'center'
});

这里的数据需要包含和地理位置可视化关系密切的属性——经纬度坐标。数据可以是数组形式,也可以是字符串形式,也可以通过更复杂的配置参数动态计算。Loca 在处理坐标数据时,如果是数组形式,则会按照 [lng, lat] 结构,即 [经度, 纬度] 的形式解析。如果是字符串则会按照 "lng, lat" 即 "经度, 纬度" (英文逗号分隔)格式解析。


其中 lnglat 配置是用来指定经纬度坐标数据所在的列名。这个参数是必填的。如果没有坐标,这些图形就不能绘制在正确的位置上了。


由于不同类型的图形坐标格式会有较大差别,因此后面我们会有单独一个章节介绍数据的使用。这里仅做了解性介绍。


3. 设置样式配置

目前为止,上面设置的数据和最终输出的UI还没有任何关系。在这个过程中,我们需要使用 setOptions(<Object> options) 进行样式配置。这样才可以将原始的数据映射成图形的样式,最终展示在地图上。

layer.setOptions({
    style: {
        radius: 10,
        fill: '#ffee00'
    }
});

由于样式配置的内容比较复杂,后面会有单独一个章节详细介绍,这里我们先简单介绍下样式配置的基本使用。

其中 style 配置,这里的 style 指定了 shape 类型的具体 UI 属性,比如例子中设置了圆形半径及图形的填充颜色。


4.绘制图形

通过以上的设置,最后我们需要调用 render() 方法来进行绘制。

layer.render();

触发了绘制以后,在地图的缩放、平移等操作 Loca 会在必要的时候,自动重新绘制。这时候开发者无需关心图形在移动后是否需要重选绘制了,这部分绘制的工作 Loca 已经帮你完成了。


5. 图层移除及销毁

通过 destroy() 可以销毁图层,同时也会清除绑定的事件。

layer.destroy();

但图层销毁后,是无法重新恢复的。如果只是希望临时隐藏,可以使用 remove() 将图层移除,使用 addTo() 恢复。

// 从所在容器移除
layer.remove(); 

以上便是 Loca 最基本的用法。如果以上示例无法满足您的需求,可以继续阅读下一篇高级用法介绍。相信会为您提供更多灵活的使用方法。


返回顶部 示例中心 常见问题 智能客服 公众号
二维码