您现在的位置: 开发 > 数据可视化 JS API > 教程 > 可视化图层 >

高德 开发 数据可视化 JS API 教程 可视化图层

更新时间:2018年02月05日

创建好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. 图层移除及销毁

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

layer.destory();

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

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

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


移动端
示例中心
功能
在线体验
常见问题