快速上手最后更新时间: 2021年01月22日

接下来我们通过一个简单的例子：『将已有的全国市县位置数据，用圆形标记在地图上』，来快速了解下 Loca 的用法吧。

1. 申请开发者 KEY

使用前，请您先申请开发者 Key，这里您可以和 JS-API 共用同一个开发者 Key。

2. 引入 Loca JS 库

目前我们暂时只允许通过引用线上链接的方式加载 Loca。

<!-- 引用线上代码 -->
<script src="http://webapi.amap.com/loca?key=开发者Key(必填)&v=1.2.0(必填，请选择最新版本号)"></script>

其中参数key必须填写您申请的开发者 Key，参数v则指定版本号，如果开发者不指定版本号，则使用 1.1.3，强烈建议从 1.2.0 版本开始使用。最新版本号请看发布日志。

通过上述方式的引入，Loca 变量会注入到全局变量中。

3. 创建 Loca —— 地图容器

在使用地图前，我们需要创建一个容器用于显示地图底图，因此这一步我们在一个 DOM 元素上创建 Loca 地图容器。（如果您想在已有的高德地图上创建，请参考教程 Loca容器创建部分）

首先，通过指定 DOM 元素的 ID，来创建一个用于显示地图的容器。

HTML

<!-- DIV需要指定宽高，才可以显示底图 -->
<div id='map' style='width:800px; height:600px;'></div>

JavaScript

var loca = Loca.create('map', {
    mapStyle: 'amap://styles/grey',
    zoom: 5,
    center: [107.4976,32.1697]
});

这里我们使用全局变量Loca进行地图容器的创建。例子中我们使用 new函数 的方式构建，其中 Loca 构造函数的第一个参数是容器ID，第二个参数是地图配置项。

例子中，我们配置了 3 个属性：地图样式 mapStyle、初始缩放等级 zoom 和初始地图中心点 center。

关于更多的配置项，可以参考 API文档和教程例子，这里不再赘述。

执行完上面的代码，一个地图底图便创建好了，如下图所示：

4. 创建 VisualLayer 可视化图层——绘制图形

容器创建好了，接下来我们需要创建一个 VisualLayer图层，用来进行数据的可视化展现。其中一个 VisualLayer图层 对应一组数据，您可以将 多个VisualLayer图层 添加至同一个 Loca容器 中。这样不同类型的图形便可以显示在同一张地图上了。

下面来是代码演示：

首先，通过工厂方法创建 VisualLayer 实例，并指定参数

JavaScript

var layer = Loca.visualLayer({
    container: loca,
    type: 'point',
    shape: 'circle'
});

这里指定了三个参数：

container: 指定了 VisualLayer 图层所在的 Loca 容器实例
type:指定数据类型为点类型 point，默认点类型数据使用圆形形状进行绘制。（如需了解更多格式类型，请参考 API文档）
shape: 指定了使用点类型绘制出的图形为圆形。

其次，准备好全国市县区的数据，并通过setData(<Array> data, <Object> options)方法添加数据和指定经纬度所在列。其中数据需要包含经纬度信息，只有依赖经纬度的信息，才可以将数据绘制到地图正确的位置。其中例子使用 JSON 格式进行演示，更多数据格式请参考 API文档及教程例子。

JavaScript

// 市县位置数据
var data = [
    { "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 2 }, 
    { "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 2 }, 
    { "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 2 },
    // ...更多数据
]

// 传入原始数据
layer.setData(data, {
    lnglat: 'lnglat'   // 指定坐标数据的来源，数据格式: 经度在前，维度在后，数组格式。
});

lnglat 指定了坐标数据所在的字段名，上面数据中坐标存于 lnglat 字段，因此这里传入 lnglat 字符串。另外经纬度格式需要为数组或者以英文逗号分隔的字符串，其中经度在前，维度在后。例如点数据——数组 [116.3667, 39.9153] 或字符串 "116.3667,39.9153"。

然后，使用 setOptions(<Object> options) 方法，传入配置样式，这一步是指定数据与样式的映射关系，根据映射关系，数据变可以转换为显示的图形。

JavaScript

// 配置样式
layer.setOptions({
    style: {
        radius: 2,     // 圆形半径，单位像素
        color: '#b7eff7', // 填充颜色
        borderWidth: 0.5,   // 边框宽度
        borderColor: '#ffffff'  // 边框颜色
    }
});

通过style指定图形样式，这里指定了圆形的半径radius、填充颜色fill、边框宽度lineWidth和边框颜色stroke。（更多样式请参考API文档）

最后当数据和样式都配置好以后，调用render()方法图层便立即渲染。

JavaScript

layer.render();

这样就完成了基本的绘制 —— 全国市县位置以圆形标记展现地图上了。

查看完整代码

快速上手 最后更新时间: 2021年01月22日

1. 申请开发者 KEY

2. 引入 Loca JS 库

3. 创建 Loca —— 地图容器

4. 创建 VisualLayer 可视化图层——绘制图形

快速上手最后更新时间: 2021年01月22日