Loca 最后更新时间: 2021年01月22日

创建可视化作品前，首先要创建一个 Loca 容器，这个容器可以帮您加载高德地图作为底图，或者帮您关联已有的高德地图作为底图。
在使用地图的时，您可以使用任何一个 JS API 已有的功能，Loca 容器不会影响原有地图的任何功能和特性。这里创建的 Loca 容器您可以理解为是可视化图层的管理器。

接来下演示容器的创建及使用：

1. 基于 DOM 创建

如果您是从零开始使用，那么首先要确保页面中已有 指定宽高的DOM容器，并且使用 ID 进行标识，通过指定 DOM ID 或 DOM 节点来创建「Loca容器」。

HTML

<!-- 地图所在DOM -->
<div id='my-map' style='width:100%; height: 600px;'>
</div>

在创建的同时，也可以指定底图的配置，例如缩放等级、地图中心点等。这些配置和 AMap.Map 的完全一致，可以参考 JS API的配置。

Tip: Loca容器和图层都提供了 工厂方法 及 new函数 两种创建方式，开发者可以根据自己的习惯选择使用。

JavaScript

// 请先确保您已引入 Loca库

// 1. 工厂方法
var loca = Loca.create('my-map', {
    zoom: 5,
    center: [],
    mapStyle: 'amap://styles/grey',
    // ...同AMap.Map配置
})

// 2. new 函数
var loca = new Loca('my-map', {
    zoom: 5,
    center: [],
    mapStyle: 'amap://styles/grey',
    // ...同AMap.Map配置
})

2. 基于已有的 Web 地图创建

如果您是在已经存在的高德地图上创建，则将上面的 ID 替换成 AMap.Map 的实例即可。

要注意的是，Loca 依赖的 JS API 版本要求在 1.4+，开发者要注意 JS API 版本号。

JavaScript

// 已有AMap实例
var amap = new AMap.Map('my-map', {
    zoom: 5,
    center: [],
    mapStyle: 'amap://styles/grey'
});

var loca = Loca.create(amap);

3. 获取底图对象

Loca 容器加载后，您依然可以通过 getMap() 获取底图的实例（AMap.Map），以方便控制地图的原有功能，例如缩放平移、增加移除地图组件等功能。
关于地图的控制请直接参考 JS API文档及相关示例。

JavaScript

var amap = loca.getMap();

// 调用 JS-API 接口，操作地图
var c = amap.getCenter();

var tool = new AMap.ToolBar();  
amap.addControl(tool);

4. 底图的使用建议

默认情况下，底图会加载很多地图元素及样式，这样可能会影响可视化图层信息的展示。因此在实际可视化作品中，为了突出作者想表达的内容，我们建议可以适当的去掉不必要的底图信息，以及修改适合展示的底图颜色。包含但不限于以下内容：

限制底图的缩放等级在一个合适的范围内，以保证可视化内容密度适中
减少默认底图元素，以减少干扰突出可视化内容
选择一个合适的底图显示样式，以增强可视化样式的对比效果
设置合适的地图中心点，以保证用户打开作品即可一目了然
增加诸如缩放工具条，以保证用户可以方便的交互

其中底图显示样式除了使用官方提供的默认方案外，也可以使用自定义地图模板设计符合作品要求的样式。

以下示例是在构造底图时设置底图要素：

JavaScript

var loca = Loca.create('my-map', {
    zoom: 5,
    zooms: [4, 16],
    center: [116.3, 39.9],
    mapStyle: 'amap://styles/grey',
    features: ['bg', 'road']
})