示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 服务 > 云图 >

高德 开发 地图 JS API 教程 服务 云图

更新时间:2018年05月07日

基于云图位置数据存储服务,地图 JS API 提供了:

CloudDataLayer 将数据可视化,作为图层叠加到地图上;CloudDataSearch 提供了云图数据检索能力。

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

云图数据图层

引入插件

在使用插件之前,需要使用 AMap.plugin 方法加载插件

AMap.plugin('AMap.CloudDataSearch', function() { //... })

实例化图层

AMap.CloudDataLayer 构造函数有两个参数:

  1. tableid 由云数据管理平台新建地图时随机生成,tableid 要和 key 相对应
  2. layerOptions 云图图层配置项,设置云图数据过虑条件,图层覆盖物是否可以点击等
var layerOptions = {
    query: {keywords: "公园"},
    clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer("532b9b3ee4b08ebff7d535b4", layerOptions);
cloudDataLayer.setMap(map); //添加到地图

完整的例子

AMap.plugin(["AMap.CloudDataLayer"], function() {
    var layerOptions = {
        query: {
            keywords: ""
        },
        clickable: true
    };
    var cloudDataLayer = new AMap.CloudDataLayer("532b9b3ee4b08ebff7d535b4", layerOptions);
    cloudDataLayer.setMap(map); //添加到地图
});


点击交互实现

实现了图层展示之后,我们可以给云图层绑定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 插件为开发者提供了多种类型的查询服务。

//加载插件
AMap.plugin(["AMap.CloudDataSearch"], function() {
    var searchOptions = {
        map: map, //
        panel: 'result',
        keywords: '',
        pageSize: 10,
        orderBy: '_id:ASC'
    };

    //实例化搜索
    var search = new AMap.CloudDataSearch("532b9b3ee4b08ebff7d535b4", searchOptions); 

    //执行区域搜索
    search.searchByDistrict('北京市', function(status, result) { 
        console.log(status, result);
    });
});

多种类型搜索方法

云图搜索提供了多种类型的搜索方法,有:周边搜索、矩形范围搜索、多边形范围搜索、行政区范围搜索。

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

//矩形范围搜索
searchInPolygon([[116,39],[117,40]);

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

//行政区范围搜索
search.searchByDistrict('北京市');

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