您现在的位置: 开发 > 地图 JS API > 开发指南 > 获取地图数据 > 云图 >

高德 开发 地图 JS API 开发指南 获取地图数据 云图

更新时间:2017年06月05日

亲手试一试

AMap.CloudDataLayer云数据图层和AMap.CloudDataSearch服务插件,基于云图位置数据存储服务。开发者可以利用CloudDataLayer将数据作为一个图层叠加到地图上,也可以利用CloudDataSearch服务接口对业务数据进行空间检索。具体创建和管理云数据存储表格的方法可以进入云图开发指南查看。

场景一、展示云图层

插件引入与对象创建

在使用插件之前,需要使用AMap.plugin方法加载插件,然后在回调函数中可以进行图层的初始化添加,请注意tableid要和key相对应:

AMap.plugin('AMap.CloudDataLayer', function() {//回调函数
    //TODO:云图图层的初始化和添加等
})

注:使用AMap.CloudDataLayer插件之前,请在云图数据管理后台建立存储表格。具体创建和管理云数据存储表格的方法可以进入云图开发指南查看。

图层参数设定与添加

AMap.CloudDataLayer构造函数有两个参数,第一个参数是数据表id,它是在云数据管理平台新建地图时随机生成的。第二个参数是云图显示的配置项,可以设置云图数据过虑条件,图层覆盖物是否可以点击等

var layerOptions = {
    query: {keywords: '公园'},
    clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer('532b9b3ee4b08ebff7d535b4', layerOptions);
cloudDataLayer.setMap(map);//添加到地图

查询参数详情

参数名称

类型

说明

map

Map

要叠加该图层的Map对象

query

CloudDataQuery

要显示云数据的筛选条件

clickable

Boolean

该图层是否响应鼠标点击,默认是:true

参数设定相关方法

方法名

返回值

说明

setMap(map:Map)


设置添加该图层的地图对象

getMap( )

Map

获取显示图层的地图对象

setOptions(options:CloudDataLayerOptions)


设置云数据图层属性

点击交互的实现

实现了图层展示之后,我们可以给云图层绑定click事件来响应一些云图点的点击事件,比如弹出云图点的详细信息Infowindow等:

AMap.event.addListener(cloudDataLayer, 'click', function(result) {

   var clouddata = result.data;
   var infoWindow = new AMap.InfoWindow({
       content: "<h3><font face="微软雅黑" color="#36F">" + 
           clouddata._name + "</font></h3><hr>地址:" + 
           clouddata._address + "<br>" + "创建时间:" + 
           clouddata._createtime + "<br>" + "更新时间:" + 
           clouddata._updatetime,
       size: new AMap.Size(300, 0),
       autoMove: true,
       offset: new AMap.Pixel(0, -25)
   });
   infoWindow.open(map, clouddata._location);

        });

有的时候我们不仅需要在地图上展示云图中的数据,还需要对云图数据进行空间搜索查询以及展示。AMap.CloudDataSearch插件为开发者提供了多种查询服务,包括周边检索、多边形检索以及根据数据id检索等。

云图搜索插件的加载

云图插件以及公交换乘插件(AMap.Transfer)、驾车(AMap.Driving)步行(AMap.Walking)路径规划插件、云图插件(AMap.CloudDataSearch)、关键字搜索插件(AMap.PlaceSearch)都有两种使用方式:

第一种,在构造函数里传入map或panel参数,或两者都传入。map为AMap.Map实例,panel为div元素或其id号。一旦传入,api会自动为用户生成交互面板和地图展示。用户自己控制div的显示位置及大小,api生成的交互面板和地图展示的皮肤格调可以通过修改样式来实现,样式名可以通过浏览器的调试工具查看。实际上,面板的生成及地图展示是用独立的渲染插件实现的,用户可以把渲染插件下载下来任意修改默认皮肤的样式及结构。代码示例:

var center = [116.39946, 39.907629];
var search;
var searchOptions = {
    map:map,
    panel:'result',
    keywords:'',
    pageSize:5,
    orderBy:'_id:ASC'
};
//加载CloudDataSearch服务插件
search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions); //构造云数据检索类
//周边检索
search.searchNearBy(center, 10000, function(){});

第二种,直接使用服务返回的数据,构造的option中不写map和panel属性,在search方法中传入回调函数,如:

var center = [116.39946, 39.907629];
var searchOptions = {
    keywords:'',
    pageSize:5,
    orderBy:'_id:ASC'
};
//加载CloudDataSearch服务插件
var search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions); //构造云数据检索类

查询参数设定

AMap.CloudDataSearch构造函数有两个参数,第一个参数是数据表id,它是在云数据管理平台新建地图时随机生成的。第二个参数是云图数据查询的配置项,可以设置云图数据过虑条件、关键字等

var searchOptions = {
    map:map,//地图对象
    panel:'result',//div的id或dom元素
    keywords:'',//关键字
    pageSize:5,//页大小
    orderBy:'_id:ASC'//排序规则
};
search = new AMap.CloudDataSearch('55c859e4e4b05d86ecf5bf7e', searchOptions); //构造云数据检索类

调用相关方法

设定好相关参数之后,我们就可以调用相关方法进行查询了,比如查询北京市范围内的云图点:

search.searchByDistrict('北京市');

也可以进行周边检索、多边形检索或者按照数据id查找详情等

//周边检索
search.searchNearBy(center, 10000);

//范围内搜索
//两个点的时候为矩形内搜索
searchInPolygon([[116,39],[117,40]);

 //多边形内搜索
searchInPolygon([[116,39],[116,40],[117,40],[117,39],[116,39]);

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