开发 数据可视化 JS API 基本教程 创建图层

创建图层 最后更新时间: 2021年01月22日

在新版 Loca 中,每个可视化展现类型都对应一个 Loca 图层,创建的图层和 JS API 的其他图层一样,可以被直接添加至 AMap.Map 的实例中。

由于展现类型和图层是一一对应的,所以如果地图上需要同时展现点、线两种类型,则需要创建两个不同类的图层。


接来下举例说明全过程:

1. 创建地图实例

首先通过 AMap.Map 创建底图:

const amap = new AMap.Map('container');


2. 图层创建

自 v1.3.0 起只保留了通过 new 函数的方式创建实例。在创建的同时可以指定底图,或者通过 setMap() 方法添加至底图上。

// 点类型图层
const layer = new Loca.PointLayer({
    map: amap
});

// 或者通过 setMap 添加底图实例
layer.setMap(amap);


从 v1.3.0 版起,每个图层只描述一种展现形式的可视化类型,并且所有图层的都在 Loca 这个命名空间下。


3. 设置数据

接下来可以使用 setData(<Array> data) 为图层设置数据,数据一般使用 JSON 格式,这里也支持 CSVTSV 格式。格式类型可以通过 type 参数指定,具体数据格式在后面有专门章节介绍。

const 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 配置是用来指定经纬度坐标数据所在的列名。这个参数是必填的。如果没有坐标,这些图形就不能绘制在正确的位置上了。

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


4. 设置样式配置

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

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

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

其中 style 指定了展现图形的具体属性,比如例子中设置了圆形半径(radius)及图形的填充颜色(color)。


5. 绘制图形

最后我们需要调用 render() 方法来触发绘制。

layer.render();


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


6. 图层显示、隐藏及移除

通常在调用了 render 后的图层会自动显示在地图上。 通常可以使用 show()/hide() 方法切换图层的显示状态。

layer.hide()  //  图层隐藏
layer.show() // 图层显示

通过setMap(null)可以彻底移除图层。

layer.setMap(null);

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

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