创建图层 最后更新时间: 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 格式，这里也支持 CSV 和 TSV 格式。格式类型可以通过 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最基本的用法。如果以上示例无法满足您的需求，可以继续阅读下一篇高级用法介绍。相信会为您提供更多灵活的使用方法。