示例中心
功能在线体验
控制台
您现在的位置: 开发 > 数据可视化 JS API > 快速上手 >

高德 开发 数据可视化 JS API 快速上手

更新时间:2018年10月30日

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


1. 申请开发者 KEY

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

点我跳转申请地址


2. 引入 Loca JS 库

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

<!-- 引用线上代码 -->
<script data-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,来创建一个用于显示地图的容器。

<!-- DIV需要指定宽高,才可以显示底图 -->
<div id='map' style='width:800px; height:600px;'></div>
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 实例,并指定参数

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

这里指定了三个参数:

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


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

// 市县位置数据
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) 方法,传入配置样式,这一步是指定数据与样式的映射关系,根据映射关系,数据变可以转换为显示的图形。

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

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


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

layer.render();


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

查看完整代码



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