示例中心
功能在线体验
控制台
您现在的位置: 开发 > 数据可视化 JS API > 教程 > 基础教程 > Loca >

高德 开发 数据可视化 JS API 教程 基础教程 Loca

更新时间:2018年07月13日

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


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

1. 基于 DOM 创建

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

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

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

Tip: Loca容器和图层都提供了 工厂方法new函数 两种创建方式,开发者可以根据自己的习惯选择使用。
// 请先确保您已引入 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 版本号。
// 已有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文档 及相关示例。

var amap = loca.getMap();

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

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


4. 底图的使用建议

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

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

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


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

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


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