摘要：時(shí)間年月日星期日說(shuō)明本文部分內(nèi)容均來(lái)自慕課網(wǎng)。用戶(hù)可以在服務(wù)器端調(diào)用云存儲(chǔ)云檢索從而構(gòu)建自己的存儲(chǔ)和檢索服務(wù)，甚至可以制作自己的數(shù)據(jù)管理臺(tái)。

時(shí)間：2017年08月13日星期日
說(shuō)明：本文部分內(nèi)容均來(lái)自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com
教學(xué)源碼：無(wú)
學(xué)習(xí)源碼：https://github.com/zccodere/s...

什么是云圖

一款讓您，用自己的數(shù)據(jù)，做想要的地圖的服務(wù)

使用場(chǎng)景

云圖的服務(wù)與產(chǎn)品

云圖為您提供制作自己地圖的方法

方法1：在線(xiàn)制作您的地圖
無(wú)須開(kāi)發(fā)，用云圖數(shù)據(jù)管理臺(tái)導(dǎo)入或標(biāo)注點(diǎn)信息，一鍵在線(xiàn)發(fā)布您的地圖
云圖數(shù)據(jù)管理臺(tái)
方法2：開(kāi)發(fā)您的地圖
自主開(kāi)發(fā)，用云圖API/SDK服務(wù)，自主開(kāi)發(fā)基于您的數(shù)據(jù)的地圖或APP
 云圖API、JavaScript云圖API、Android/iOS云圖SDK

如果用云圖產(chǎn)品，做出什么樣的地圖

課程安排

手工操作：云圖數(shù)據(jù)管理臺(tái)：存儲(chǔ)、編輯、更新您的數(shù)據(jù)&在線(xiàn)制作您的地圖
服務(wù)端開(kāi)發(fā)：云圖API：云存儲(chǔ)API介紹&開(kāi)發(fā)實(shí)戰(zhàn)（Java）詳解
Web開(kāi)發(fā)：JavaScript云圖API：
    --如何使用數(shù)據(jù)圖層進(jìn)行Web應(yīng)用開(kāi)發(fā)
    --JS云圖API開(kāi)發(fā)&開(kāi)發(fā)基于位置的通訊錄（簡(jiǎn)單demo）
Android開(kāi)發(fā)：Android云圖SDK：如何在Android端檢索及展示云圖數(shù)據(jù)
iOS開(kāi)發(fā)：iOS云圖SDK開(kāi)發(fā)：如何在iOS端檢索及展示云圖數(shù)據(jù)

云圖數(shù)據(jù)管理臺(tái)

可視化數(shù)據(jù)管理
在線(xiàn)發(fā)布地圖平臺(tái)
支撐自主開(kāi)發(fā)

可實(shí)現(xiàn)功能

存儲(chǔ)您的數(shù)據(jù)：導(dǎo)入excel/csv數(shù)據(jù)文件；上傳圖片信息；地圖上標(biāo)注
管理您的數(shù)據(jù)：編輯、更新、刪除數(shù)據(jù)；點(diǎn)樣式設(shè)置
在線(xiàn)發(fā)布地圖：發(fā)布一個(gè)在線(xiàn)地圖網(wǎng)頁(yè)，多種模版（如附件模版、全量模版，更多敬請(qǐng)期待）
支持自主開(kāi)發(fā)：
    --存儲(chǔ)的數(shù)據(jù)供JavaScript云圖API，Android云圖SDK，iOS云圖SDK調(diào)用，
    --自主開(kāi)發(fā)基于自有數(shù)據(jù)的網(wǎng)站或APP；
    --設(shè)置API/SDK（keywords,filter,sortrule）參數(shù)生效的字段索引；

云圖數(shù)據(jù)管理臺(tái)用途

幫助文檔

地址：http://lbs.amap.com/api/yuntu/guide/datamanager/datamanager/

在線(xiàn)發(fā)布您的地圖實(shí)例-制作暖暖北京記憶旅游地圖

制作步驟：

1.數(shù)據(jù)準(zhǔn)備：

   數(shù)據(jù)excel和圖片。

2.實(shí)際操作：

登錄云圖數(shù)據(jù)管理臺(tái)
導(dǎo)入數(shù)據(jù)
編輯數(shù)據(jù)
刪除數(shù)據(jù)
上傳圖片
點(diǎn)樣式設(shè)置
發(fā)布

數(shù)據(jù)準(zhǔn)備

素材請(qǐng)到我的github地址下載。

實(shí)際操作

注冊(cè)、登錄云圖數(shù)據(jù)管理臺(tái)
地址：http://yuntu.amap.com

新建地圖

選擇批量上傳

完成數(shù)據(jù)導(dǎo)入后，進(jìn)行圖片上傳

進(jìn)行發(fā)布

共兩種模版：全國(guó)模版和地區(qū)模版

目錄

云存儲(chǔ)API、云檢索API在云圖中的定位
云存儲(chǔ)API、云檢索API的價(jià)值
云存儲(chǔ)API介紹
云存儲(chǔ)API實(shí)戰(zhàn)

云存儲(chǔ)API、云檢索API在云圖中的定位

云存儲(chǔ)API、云檢索API的價(jià)值

1.云存儲(chǔ)API可以進(jìn)行數(shù)據(jù)的增刪改，用戶(hù)可以進(jìn)行批量的數(shù)據(jù)上傳或數(shù)據(jù)的增刪改。
2.云檢索API可以對(duì)數(shù)據(jù)進(jìn)行各種條件查詢(xún)。
3.用戶(hù)可以在服務(wù)器端調(diào)用云存儲(chǔ)API、云檢索API從而構(gòu)建自己的存儲(chǔ)和檢索服務(wù)，
  甚至可以制作自己的數(shù)據(jù)管理臺(tái)。
4.用戶(hù)也可以在其它終端上調(diào)用云存儲(chǔ)API、云檢索API。

一般存儲(chǔ)數(shù)據(jù)流程

推薦存儲(chǔ)數(shù)據(jù)流程

云存儲(chǔ)API的介紹

云存儲(chǔ)API是HTTP型請(qǐng)求API，適用服務(wù)端、Web端、移動(dòng)端實(shí)現(xiàn)云圖的數(shù)據(jù)處理
數(shù)據(jù)讀取和展示：通過(guò)云圖數(shù)據(jù)管理臺(tái)或云圖API（JSAPI、移動(dòng)端API、云檢索API）
數(shù)據(jù)上傳或存儲(chǔ)：通過(guò)云圖數(shù)據(jù)管理臺(tái)或云存儲(chǔ)API
JavaScript云圖API、Android/iOS云圖SDK當(dāng)前僅提供數(shù)據(jù)檢索功能以及數(shù)據(jù)的展現(xiàn)

云存儲(chǔ)API實(shí)戰(zhàn)-全國(guó)三甲醫(yī)院在線(xiàn)管理系統(tǒng)

學(xué)習(xí)使用技術(shù)

1.開(kāi)發(fā)語(yǔ)言：Java、Javascript
2.構(gòu)建環(huán)境：Eclipse、Maven
3.開(kāi)發(fā)框架：SpringBoot（后臺(tái)）、Bootstrap（前臺(tái)）

到開(kāi)放平臺(tái)獲取key。

地址：http://lbs.amap.com/
路徑：控制臺(tái)》應(yīng)用管理》我的應(yīng)用》創(chuàng)建新應(yīng)用》添加新key

云存儲(chǔ)API接口文檔

地址：http://lbs.amap.com/api/yuntu/reference/cloudstorage
創(chuàng)建表 
創(chuàng)建數(shù)據(jù)（單條） 
創(chuàng)建數(shù)據(jù)（批量） 
更新數(shù)據(jù)（單條） 
刪除數(shù)據(jù)（單條/批量） 
批量創(chuàng)建進(jìn)度查詢(xún) 

創(chuàng)建名為yuntujava的maven項(xiàng)目pom文件如下

    4.0.0

    com.myimooc
    yuntujava
    0.0.1-SNAPSHOT
    jar

    yuntujava
    http://maven.apache.org

    
        org.springframework.boot
        spring-boot-starter-parent
        1.5.1.RELEASE
         
    

    
        UTF-8
        UTF-8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter-freemarker
        
        
        
            com.alibaba
            fastjson
            1.2.36
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    1.8
                    1.8
                
            
        
    

完成后的項(xiàng)目結(jié)構(gòu)如下

代碼演示：

1.編寫(xiě)DemoController類(lèi)

package com.myimooc.yuntujava.rest;

import java.util.Objects;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSONObject;

/**
 * 云存儲(chǔ)API 和 云檢索API
 * @author ZhangCheng on 2017-08-13
 */
@RestController
public class DemoController {
    private static final String KEY = "you key";
    private static final String API_CREAT_TABLE = "http://yuntuapi.amap.com/datamanage/table/create";
    private static final String API_DATA_CREATE = "http://yuntuapi.amap.com/datamanage/data/create";
    private static final String API_DATA_UPDATE = "http://yuntuapi.amap.com/datamanage/data/update";
    private static final String API_DATA_DELETE = "http://yuntuapi.amap.com/datamanage/data/delete";
    private static final String API_DATA_SEARCH_LOCAL = "http://yuntuapi.amap.com/datasearch/local";
    
    @Autowired
    private RestTemplate restTemplate;
    
    @GetMapping(value = {"","/","/index"})
    public ModelAndView index(){
        return new ModelAndView("index");
    }
    
    /**
     * 創(chuàng)建表
     */
    @PostMapping("/tablecreate")
    public Object tableCreate(String name){
        MultiValueMap reqParam = new LinkedMultiValueMap<>();
        reqParam.add("key", KEY);
        reqParam.add("name", name);
        JSONObject result = JSONObject.parseObject(restTemplate.postForObject(API_CREAT_TABLE, reqParam, String.class));
        if(Objects.equals("1", result.getString("status"))){
            return result;
        }
        return JSONObject.parseObject(restTemplate.postForObject(API_CREAT_TABLE, reqParam, String.class));
    }
    
    /**
     * 創(chuàng)建數(shù)據(jù)（單條）
     */
    @PostMapping("/datacreate")
    public Object dataCreate(String tableid,String name,String address){
        MultiValueMap reqParam = new LinkedMultiValueMap<>();
        reqParam.add("key", KEY);
        reqParam.add("loctype", "2");
        reqParam.add("tableid", tableid);
        JSONObject data = new JSONObject();
        data.put("_name", name);
        data.put("_address", address);
        reqParam.add("data", data.toString());
        JSONObject result = JSONObject.parseObject(restTemplate.postForObject(API_DATA_CREATE, reqParam, String.class));
        System.out.println(result);
        return result;
    }
    
    /**
     * 更新數(shù)據(jù)（單條）
     */
    @PostMapping("/dataupdate")
    public Object dataUpdate(String tableid,String id,String name,String address){
        MultiValueMap reqParam = new LinkedMultiValueMap<>();
        reqParam.add("key", KEY);
        reqParam.add("loctype", "2");
        reqParam.add("tableid", tableid);
        JSONObject data = new JSONObject();
        data.put("_id", id);
        data.put("_name", name);
        data.put("_address", address);
        reqParam.add("data", data.toJSONString());
        JSONObject result = JSONObject.parseObject(restTemplate.postForObject(API_DATA_UPDATE, reqParam, String.class));
        System.out.println(result);
        return result;
    }
    
    /**
     * 刪除數(shù)據(jù)（單條）
     */
    @PostMapping("/datadelete")
    public Object dataDelete(String tableid,String ids){
        MultiValueMap reqParam = new LinkedMultiValueMap<>();
        reqParam.add("key", KEY);
        reqParam.add("tableid", tableid);
        reqParam.add("ids", ids);
        
        return JSONObject.parseObject(restTemplate.postForObject(API_DATA_DELETE, reqParam, String.class));
    }
    
    /**
     * 本地檢索
     */
    @PostMapping("/datasearch")
    public Object dataSearch(String tableid,String keywords){
        String url = API_DATA_SEARCH_LOCAL+"?key="+KEY+"&tableid="+tableid+"&city=全國(guó)"+"&keywords="+keywords;
        return JSONObject.parseObject(restTemplate.getForObject(url, String.class));
    }
}

2.編寫(xiě)index.html類(lèi)

    

        

        

            
            
地圖名稱(chēng)：
            

                

                    

                        關(guān)鍵詞
                        
                    
                    

                        查詢(xún)
                        重置
                    
                
            
        
        
        

            
                新增
            
            
                修改
            
            
                刪除
            
        
        
        

    
    
    

      

        

            

                ×
                
地圖編輯
              
              

                

                    

                        地圖名稱(chēng)
                        
                    
                
              
              

                確定
              
        
      
    
    
    

      

        

            

                ×
                
數(shù)據(jù)編輯
              
              

                

                    
                    

                        名稱(chēng)
                        
                    
                    

                        地址
                        
                    
                
              
              

                  關(guān)閉
                確定
              
        
      
    
    
    

      

        

            

                ×
                
提示
              
              

                

                    

                        
                    
                
              
        
      
    

3.編寫(xiě)index.js類(lèi)

var tableid="";

$(document).ready(function(){

    initTable();
    
    checkTable();
    
    // 查詢(xún)按鈕
    $("#btn_query").click(function(){
        dataSearch();
    });
    // 重置按鈕
    $("#btn_reset").click(function(){
        $("#keywords").val(" ");
    });
    
    // 新增按鈕
    $("#btn_add").click(function(){
        cleareditmodal();
        $("#edit_modal").modal("show");
    });
    // 修改按鈕
    $("#btn_edit").click(function(){
        cleareditmodal();
        var datas = $("#table_data").bootstrapTable("getSelections");
        console.log(datas.length);
        if( datas.length == 0 ){
            showinfo("請(qǐng)選擇您要修改的記錄");
            return;
        }
        if( datas.length > 1){
            showinfo("修改功能不支持批量操作");
            return;
        }
        $("#edit_modal_id").val(datas[0]._id);
        $("#edit_modal_name").val(datas[0]._name);
        $("#edit_modal_address").val(datas[0]._address);
        $("#edit_modal").modal("show");
    });
    // 刪除按鈕
    $("#btn_delete").click(function(){
        
        var datas = $("#table_data").bootstrapTable("getSelections");
        console.log(datas.length);
        if( datas.length == 0 ){
            showinfo("請(qǐng)選擇您要修改的記錄");
            return;
        }
        if( datas.length > 1){
            showinfo("修改功能不支持批量操作");
            return;
        }
        var ids = datas[0]._id;
        datadelete(ids);
        $("#table_data").bootstrapTable("removeByUniqueId",ids);
    });
    // 地圖編輯-確定按鈕
    $("#table_modal_save").click(function(){
        getTableInfo();
    });
    // 數(shù)據(jù)編輯-確定按鈕
    $("#edit_modal_save").click(function(){
        var id= $("#edit_modal_id").val();
        var name = $("#edit_modal_name").val();
        var address = $("#edit_modal_address").val();
        if(!name){
            showinfo("請(qǐng)輸入名稱(chēng)");
            return;
        }
        if(!address){
            showinfo("請(qǐng)輸入地址");
            return;
        }
        if(!id){
            datacreate();// 新增
        }else{
            dataupdate();// 修改
        }
        $("#edit_modal").modal("hide");
    });
});
function cleareditmodal(){
    $("#edit_modal_id").val("");
    $("#edit_modal_name").val("");
    $("#edit_modal_address").val("");
}

function showinfo(info){
    $("#info_modal").modal("show");
    $("#info_modal_span").html(info);
    setTimeout(function(){$("#info_modal").modal("hide")},1500);
}

function datacreate(){
    var request_data = {
        "tableid":tableid,
        "name":$("#edit_modal_name").val(),
        "address":$("#edit_modal_address").val()
    }
    console.log(request_data);
    var request_url = "/datacreate";
    $.ajax({
        type: "post",
        url: request_url,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        async: true,
        data: request_data,
        crossDomain: true == !(document.all),
        success: function(data) {
            if ("1" == data.status) {
                dataSearch();
            } else {
                showinfo(data.info);
            }
        },
        error: function() {
            showinfo("數(shù)據(jù)創(chuàng)建Ajax請(qǐng)求失敗!");
        }
    });
}

function dataupdate(){
    var request_data = {
        "tableid":tableid,
        "id":$("#edit_modal_id").val(),
        "name":$("#edit_modal_name").val(),
        "address":$("#edit_modal_address").val(),
    };
    var request_url = "/dataupdate";
    $.ajax({
        type: "post",
        url: request_url,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        async: true,
        data: request_data,
        crossDomain: true == !(document.all),
        success: function(data) {
            if ("1" == data.status) {
                dataSearch();
            } else {
                showinfo(data.info);
            }
        },
        error: function() {
            showinfo("數(shù)據(jù)修改Ajax請(qǐng)求失敗!");
        }
    });
}

function datadelete(ids){
    var request_data = {
        "tableid":tableid,
        "ids":ids
    };
    var request_url = "/datadelete";
    $.ajax({
        type: "post",
        url: request_url,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        async: true,
        data: request_data,
        crossDomain: true == !(document.all),
        success: function(data) {
            if ("1" == data.status) {
                
            } else {
                showinfo(data.info);
            }
        },
        error: function() {
            showinfo("數(shù)據(jù)刪除Ajax請(qǐng)求失敗!");
        }
    });
}

/**
 * 地圖編輯
 */
function getTableInfo(){
    var table_name = $("#table_modal_name").val();
    if(!table_name){
        showinfo("請(qǐng)輸入地圖名稱(chēng)");
        return;
    }
    var request_data = {
        "name":table_name,
    };
    var request_url = "/tablecreate";
    $.ajax({
        type: "post",
        url: request_url,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        async: true,
        data: request_data,
        dataType: "json",
        crossDomain: true == !(document.all),
        success: function(data) {
            if ("1" == data.status) {
                tableid = data.tableid;
                $("#table_span_id").attr("no",tableid);
                $("#table_span_id").html(table_name);
                $("#table_modal").modal("hide");
            } else {
                showinfo(data.info);
            }
        },
        error: function() {
            showinfo("地圖名稱(chēng)Ajax請(qǐng)求失敗!");
        }
    });
}

function checkTable(){
    var table_id = $("#table_span_id").attr("no");
    if(!table_id){
        console.log("tableid為空");
        $("#table_modal").modal("show");
    }else{
        tableid = table_id;
        console.log("tableid為："+table_id);
        dataSearch();
    }
}

/**
 * 數(shù)據(jù)查詢(xún)
 */
function dataSearch(){
    var keywords = $("#keywords").val();
    if(!keywords){
        keywords = " ";
    }
    var request_data = {
            "tableid":tableid,
            "keywords":keywords
        }
        console.log(request_data);
        var request_url = "/datasearch";
        $.ajax({
            type: "post",
            url: request_url,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            async: true,
            data: request_data,
            crossDomain: true == !(document.all),
            success: function(data) {
                if ("1" == data.status) {
                    console.log(data);
                    $("#table_data").bootstrapTable("load", data.datas);
//                    tableid = data.tableid;
//                    $("#table_span_id").attr("no",tableid);
//                    $("#table_span_id").html(table_name);
//                    $("#table_modal").modal("hide");
                } else {
                    showinfo(data.info);
                }
            },
            error: function() {
                showinfo("數(shù)據(jù)加載Ajax請(qǐng)求失敗!");
            }
        });
}
/**
 * 初始化表格
 */
function initTable() {
    $("#table_data").bootstrapTable({
        toolbar: "#toolbar",                //工具按鈕用哪個(gè)容器
        cache: false,                       //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
        pagination: true,                   //是否顯示分頁(yè)（*）
        sortable: false,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "client",           //分頁(yè)方式：client客戶(hù)端分頁(yè)，server服務(wù)端分頁(yè)（*）
        pageNumber:1,                       //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
        pageSize: 10,                       //每頁(yè)的記錄行數(shù)（*）
        pageList: [5, 10, 25, 50, 100],        //可供選擇的每頁(yè)的行數(shù)（*）
        showColumns: true,                  //是否顯示所有的列
        showRefresh: true,                  //是否顯示刷新按鈕
        clickToSelect: true,                //是否啟用點(diǎn)擊選中行
        uniqueId: "_id",                     //每一行的唯一標(biāo)識(shí)，一般為主鍵列
        columns: [{
            checkbox: true
        }, {
            field: "_id",
            title: "ID"
        }, {
            field: "_name",
            title: "名稱(chēng)"
        }, {
            field: "_address",
            title: "地址"
        }, {
            field: "_province",
            title: "省市"
        }, {
            field: "_city",
            title: "城市"
        }, {
            field: "_district",
            title: "地區(qū)"
        }, {
            field: "_location",
            title: "坐標(biāo)"
        }, {
            field: "_createtime",
            title: "創(chuàng)建時(shí)間"
        },{
            field: "_updatetime",
            title: "上一次修改時(shí)間"
        }]
    });
}

效果圖

如何使用云數(shù)據(jù)圖層進(jìn)行Web應(yīng)用開(kāi)發(fā)-目錄

何為圖層
何為云數(shù)據(jù)圖層
云數(shù)據(jù)圖層接口說(shuō)明

何為圖層

圖層為一組繪制的地物（點(diǎn)、線(xiàn)、面），比如常見(jiàn)的有
各種POI圖層（點(diǎn)數(shù)據(jù)）
有實(shí)時(shí)交通圖層（線(xiàn)數(shù)據(jù)）
行政區(qū)劃圖層（面數(shù)據(jù)）
基礎(chǔ)圖層（點(diǎn)線(xiàn)面綜合數(shù)據(jù)）

圖層詳解

電子地圖就是由多個(gè)圖層組成的圖層集合
電子地圖包括基礎(chǔ)圖層和疊加圖層兩種圖層
基礎(chǔ)圖層通常描述基本的路網(wǎng)信息和基本的地物信息，作為展示電子地圖的基礎(chǔ)
疊加圖層是疊加在基礎(chǔ)圖層上展示的圖層，通常用于某些專(zhuān)題內(nèi)容的展示
而疊加圖層可以相互疊加展示
對(duì)某層的操作不會(huì)影響其它層，并能增加刪除影藏圖層

示例圖

從數(shù)據(jù)結(jié)構(gòu)的角度看，圖層還會(huì)分為柵格圖層和矢量圖層

柵格圖層
柵格結(jié)構(gòu)是地理數(shù)據(jù)劃分成若干行、若干列，成為一個(gè)像素陣列，其最小單元為像素
優(yōu)點(diǎn)：結(jié)構(gòu)簡(jiǎn)單，易于數(shù)據(jù)交換，輸出快速，成本低廉
缺點(diǎn)：圖像識(shí)別效果不如矢量，難以表達(dá)拓?fù)潢P(guān)系，圖像數(shù)據(jù)量大
矢量圖層
矢量結(jié)構(gòu)是用一系列有序的x、y坐標(biāo)對(duì)表示地理實(shí)體的空間位置
優(yōu)點(diǎn)：結(jié)構(gòu)緊湊，冗余度低，便于描述線(xiàn)和邊界，精度高
缺點(diǎn)：數(shù)據(jù)結(jié)構(gòu)復(fù)雜，不便于數(shù)據(jù)標(biāo)準(zhǔn)化和規(guī)范化，數(shù)據(jù)交換困難，顯示與繪制成本較高

示例圖

圖層的繪制（渲染）流程

預(yù)渲染
實(shí)時(shí)渲染

預(yù)渲染

從數(shù)據(jù)庫(kù)中取出數(shù)據(jù)進(jìn)行批量的離線(xiàn)繪制，制作程?hào)鸥裢咂蚴噶客咂鎯?chǔ)在緩存服務(wù)器上，客戶(hù)端讀取圖層數(shù)據(jù)時(shí)從緩存服務(wù)器讀取事先繪制好的數(shù)據(jù)。讀取熟讀快，數(shù)據(jù)更新緩慢（一般以月或季度為單位更新一次），不能實(shí)時(shí)反映數(shù)據(jù)的動(dòng)態(tài)變化。

實(shí)時(shí)渲染

根據(jù)客戶(hù)端讀取數(shù)據(jù)的條件直接繪制，不進(jìn)行預(yù)先的數(shù)據(jù)生產(chǎn)，實(shí)時(shí)反饋?zhàn)钚碌臄?shù)據(jù)。讀取速度較預(yù)渲染會(huì)慢（每次都會(huì)從庫(kù)中讀物并且重新繪制），但是實(shí)時(shí)反映數(shù)據(jù)變化。

云數(shù)據(jù)圖層

云數(shù)據(jù)圖層是高德LBS開(kāi)放平臺(tái)API中的一個(gè)特殊的圖層，屬于云圖API的一部分
為了快速實(shí)時(shí)展示用戶(hù)所設(shè)定的海量數(shù)據(jù)點(diǎn)而設(shè)計(jì)的
    快速實(shí)時(shí)：云數(shù)據(jù)圖層利用的實(shí)時(shí)渲染原理，實(shí)時(shí)反映用戶(hù)數(shù)據(jù)的最新情況
    海量數(shù)據(jù)點(diǎn)：云數(shù)據(jù)圖層使用的是柵格瓦片技術(shù)，能夠在服務(wù)端快讀生成海量最新數(shù)據(jù)的柵格圖像，
    客戶(hù)端低端配置也可以輕松顯示海量數(shù)據(jù)。同時(shí)為了解決柵格數(shù)據(jù)地物識(shí)別困難的問(wèn)題，
    使用了一種特殊的描述柵格內(nèi)容的技術(shù)，使云數(shù)據(jù)圖層也能夠精確地識(shí)別所有的地物數(shù)據(jù)。
    用戶(hù)設(shè)定：由于是實(shí)時(shí)渲染，所以云數(shù)據(jù)圖層為用戶(hù)提供了各種過(guò)濾數(shù)據(jù)的條件，
    使用戶(hù)能得到自己想要的定制數(shù)據(jù)。

同時(shí)云數(shù)據(jù)圖層是高德地圖API里的一個(gè)圖層，所以它可以和API的其他組件和功能結(jié)構(gòu)使用

可以和其它圖層疊加展示
可以和覆蓋物層結(jié)合使用
支持各種交互事件，可以做各種數(shù)據(jù)的詳細(xì)展示
可以和其它API結(jié)合等等

云數(shù)據(jù)圖層示意圖

云數(shù)據(jù)圖層接口說(shuō)明

云數(shù)據(jù)圖層示例

使用過(guò)程演示

1.數(shù)據(jù)準(zhǔn)備

素材可到我的github地址下載

2.數(shù)據(jù)導(dǎo)入

登錄云圖數(shù)據(jù)管理臺(tái)，創(chuàng)建一個(gè)地圖，并導(dǎo)入數(shù)據(jù)。數(shù)據(jù)導(dǎo)入完成后如下

添加medicalspecialists字段索引

3.效果預(yù)覽

點(diǎn)擊分享，查看效果預(yù)覽

4.代碼編寫(xiě)

在代碼里寫(xiě)一個(gè)在線(xiàn)的web頁(yè)面，來(lái)做一個(gè)小小的查詢(xún)使用的web應(yīng)用

源代碼如下：

    

        

        

            
全國(guó)三甲醫(yī)院查詢(xún)系統(tǒng)（數(shù)據(jù)來(lái)源于網(wǎng)絡(luò)，僅供參考）
            

                選擇你想看的專(zhuān)科：
                

                    全部三甲醫(yī)院
                    內(nèi)科
                    外科
                    婦科
                    眼科
                    耳鼻喉科
                    兒科
                    口腔科
                    皮膚科
                    骨科
                    中醫(yī)
                    針灸推拿
                    心理咨詢(xún)
                    腫瘤科
                    心血管科
                    消化科
                    泌尿科
                    肝腸科
                    肝病科
                    性病科
                    腎病科
                    呼吸內(nèi)科
                
            
        
        

        

        

    

課程大綱

云圖
    AMap
    CloudDataLayer 云數(shù)據(jù)圖層
    CloudDatatSearch 云數(shù)據(jù)空間檢索服務(wù)
建議
    如果沒(méi)有JS-API開(kāi)發(fā)經(jīng)驗(yàn)，可以提前了解下JS-API或者學(xué)習(xí)《JS-API公開(kāi)課》
    了解云圖的原理
接口文檔
    地址：http://lbs.amap.com/api/javascript-api/reference/cloudlayer

云圖JS-API簡(jiǎn)介

實(shí)戰(zhàn)案例-武俠通訊錄

武俠通訊錄-步驟

1.獲取Key

地址：http://lbs.amap.com/dev/key/app

2.創(chuàng)建地圖

創(chuàng)建地圖，并導(dǎo)入通訊錄數(shù)據(jù)，或標(biāo)注數(shù)據(jù)

地址：http://yuntu.amap.com/dataman...

代碼演示：

參考資料

接口文檔：http://lbs.amap.com/api/javascript-api/summary
相關(guān)示例：http://lbs.amap.com/api/javascript-api/example/map/map-show/

第六章Android云圖SDK和第七章iOS云圖SDK講解，因個(gè)人開(kāi)發(fā)方向及條件限制，這里就沒(méi)有內(nèi)容了。