摘要：時間年月日星期日說明本文部分內容均來自慕課網。用戶可以在服務器端調用云存儲云檢索從而構建自己的存儲和檢索服務，甚至可以制作自己的數據管理臺。

時間：2017年08月13日星期日
說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com
教學源碼：無
學習源碼：https://github.com/zccodere/s...

什么是云圖

一款讓您，用自己的數據，做想要的地圖的服務

使用場景

云圖的服務與產品

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

方法1：在線制作您的地圖
無須開發，用云圖數據管理臺導入或標注點信息，一鍵在線發布您的地圖
云圖數據管理臺
方法2：開發您的地圖
自主開發，用云圖API/SDK服務，自主開發基于您的數據的地圖或APP
 云圖API、JavaScript云圖API、Android/iOS云圖SDK

如果用云圖產品，做出什么樣的地圖

課程安排

手工操作：云圖數據管理臺：存儲、編輯、更新您的數據&在線制作您的地圖
服務端開發：云圖API：云存儲API介紹&開發實戰（Java）詳解
Web開發：JavaScript云圖API：
    --如何使用數據圖層進行Web應用開發
    --JS云圖API開發&開發基于位置的通訊錄（簡單demo）
Android開發：Android云圖SDK：如何在Android端檢索及展示云圖數據
iOS開發：iOS云圖SDK開發：如何在iOS端檢索及展示云圖數據

云圖數據管理臺

可視化數據管理
在線發布地圖平臺
支撐自主開發

可實現功能

存儲您的數據：導入excel/csv數據文件；上傳圖片信息；地圖上標注
管理您的數據：編輯、更新、刪除數據；點樣式設置
在線發布地圖：發布一個在線地圖網頁，多種模版（如附件模版、全量模版，更多敬請期待）
支持自主開發：
    --存儲的數據供JavaScript云圖API，Android云圖SDK，iOS云圖SDK調用，
    --自主開發基于自有數據的網站或APP；
    --設置API/SDK（keywords,filter,sortrule）參數生效的字段索引；

云圖數據管理臺用途

幫助文檔

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

在線發布您的地圖實例-制作暖暖北京記憶旅游地圖

制作步驟：

1.數據準備：

   數據excel和圖片。

2.實際操作：

登錄云圖數據管理臺
導入數據
編輯數據
刪除數據
上傳圖片
點樣式設置
發布

數據準備

素材請到我的github地址下載。

實際操作

注冊、登錄云圖數據管理臺
地址：http://yuntu.amap.com

新建地圖

選擇批量上傳

完成數據導入后，進行圖片上傳

進行發布

共兩種模版：全國模版和地區模版

目錄

云存儲API、云檢索API在云圖中的定位
云存儲API、云檢索API的價值
云存儲API介紹
云存儲API實戰

云存儲API、云檢索API在云圖中的定位

云存儲API、云檢索API的價值

1.云存儲API可以進行數據的增刪改，用戶可以進行批量的數據上傳或數據的增刪改。
2.云檢索API可以對數據進行各種條件查詢。
3.用戶可以在服務器端調用云存儲API、云檢索API從而構建自己的存儲和檢索服務，
  甚至可以制作自己的數據管理臺。
4.用戶也可以在其它終端上調用云存儲API、云檢索API。

一般存儲數據流程

推薦存儲數據流程

云存儲API的介紹

云存儲API是HTTP型請求API，適用服務端、Web端、移動端實現云圖的數據處理
數據讀取和展示：通過云圖數據管理臺或云圖API（JSAPI、移動端API、云檢索API）
數據上傳或存儲：通過云圖數據管理臺或云存儲API
JavaScript云圖API、Android/iOS云圖SDK當前僅提供數據檢索功能以及數據的展現

云存儲API實戰-全國三甲醫院在線管理系統

學習使用技術

1.開發語言：Java、Javascript
2.構建環境：Eclipse、Maven
3.開發框架：SpringBoot（后臺）、Bootstrap（前臺）

到開放平臺獲取key。

地址：http://lbs.amap.com/
路徑：控制臺》應用管理》我的應用》創建新應用》添加新key

云存儲API接口文檔

地址：http://lbs.amap.com/api/yuntu/reference/cloudstorage
創建表 
創建數據（單條） 
創建數據（批量） 
更新數據（單條） 
刪除數據（單條/批量） 
批量創建進度查詢 

創建名為yuntujava的maven項目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
                
            
        
    

完成后的項目結構如下

代碼演示：

1.編寫DemoController類

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;

/**
 * 云存儲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");
    }
    
    /**
     * 創建表
     */
    @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));
    }
    
    /**
     * 創建數據（單條）
     */
    @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;
    }
    
    /**
     * 更新數據（單條）
     */
    @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;
    }
    
    /**
     * 刪除數據（單條）
     */
    @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=全國"+"&keywords="+keywords;
        return JSONObject.parseObject(restTemplate.getForObject(url, String.class));
    }
}

2.編寫index.html類

    

        

        

            
            
地圖名稱：
            

                

                    

                        關鍵詞
                        
                    
                    

                        查詢
                        重置
                    
                
            
        
        
        

            
                新增
            
            
                修改
            
            
                刪除
            
        
        
        

    
    
    

      

        

            

                ×
                
地圖編輯
              
              

                

                    

                        地圖名稱
                        
                    
                
              
              

                確定
              
        
      
    
    
    

      

        

            

                ×
                
數據編輯
              
              

                

                    
                    

                        名稱
                        
                    
                    

                        地址
                        
                    
                
              
              

                  關閉
                確定
              
        
      
    
    
    

      

        

            

                ×
                
提示
              
              

                

                    

                        
                    
                
              
        
      
    

3.編寫index.js類

var tableid="";

$(document).ready(function(){

    initTable();
    
    checkTable();
    
    // 查詢按鈕
    $("#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("請選擇您要修改的記錄");
            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("請選擇您要修改的記錄");
            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();
    });
    // 數據編輯-確定按鈕
    $("#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("請輸入名稱");
            return;
        }
        if(!address){
            showinfo("請輸入地址");
            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("數據創建Ajax請求失敗!");
        }
    });
}

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("數據修改Ajax請求失敗!");
        }
    });
}

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("數據刪除Ajax請求失敗!");
        }
    });
}

/**
 * 地圖編輯
 */
function getTableInfo(){
    var table_name = $("#table_modal_name").val();
    if(!table_name){
        showinfo("請輸入地圖名稱");
        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("地圖名稱Ajax請求失敗!");
        }
    });
}

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();
    }
}

/**
 * 數據查詢
 */
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("數據加載Ajax請求失敗!");
            }
        });
}
/**
 * 初始化表格
 */
function initTable() {
    $("#table_data").bootstrapTable({
        toolbar: "#toolbar",                //工具按鈕用哪個容器
        cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
        pagination: true,                   //是否顯示分頁（*）
        sortable: false,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "client",           //分頁方式：client客戶端分頁，server服務端分頁（*）
        pageNumber:1,                       //初始化加載第一頁，默認第一頁
        pageSize: 10,                       //每頁的記錄行數（*）
        pageList: [5, 10, 25, 50, 100],        //可供選擇的每頁的行數（*）
        showColumns: true,                  //是否顯示所有的列
        showRefresh: true,                  //是否顯示刷新按鈕
        clickToSelect: true,                //是否啟用點擊選中行
        uniqueId: "_id",                     //每一行的唯一標識，一般為主鍵列
        columns: [{
            checkbox: true
        }, {
            field: "_id",
            title: "ID"
        }, {
            field: "_name",
            title: "名稱"
        }, {
            field: "_address",
            title: "地址"
        }, {
            field: "_province",
            title: "省市"
        }, {
            field: "_city",
            title: "城市"
        }, {
            field: "_district",
            title: "地區"
        }, {
            field: "_location",
            title: "坐標"
        }, {
            field: "_createtime",
            title: "創建時間"
        },{
            field: "_updatetime",
            title: "上一次修改時間"
        }]
    });
}

效果圖

如何使用云數據圖層進行Web應用開發-目錄

何為圖層
何為云數據圖層
云數據圖層接口說明

何為圖層

圖層為一組繪制的地物（點、線、面），比如常見的有
各種POI圖層（點數據）
有實時交通圖層（線數據）
行政區劃圖層（面數據）
基礎圖層（點線面綜合數據）

圖層詳解

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

示例圖

從數據結構的角度看，圖層還會分為柵格圖層和矢量圖層

柵格圖層
柵格結構是地理數據劃分成若干行、若干列，成為一個像素陣列，其最小單元為像素
優點：結構簡單，易于數據交換，輸出快速，成本低廉
缺點：圖像識別效果不如矢量，難以表達拓撲關系，圖像數據量大
矢量圖層
矢量結構是用一系列有序的x、y坐標對表示地理實體的空間位置
優點：結構緊湊，冗余度低，便于描述線和邊界，精度高
缺點：數據結構復雜，不便于數據標準化和規范化，數據交換困難，顯示與繪制成本較高

示例圖

圖層的繪制（渲染）流程

預渲染
實時渲染

預渲染

從數據庫中取出數據進行批量的離線繪制，制作程柵格瓦片或矢量瓦片存儲在緩存服務器上，客戶端讀取圖層數據時從緩存服務器讀取事先繪制好的數據。讀取熟讀快，數據更新緩慢（一般以月或季度為單位更新一次），不能實時反映數據的動態變化。

實時渲染

根據客戶端讀取數據的條件直接繪制，不進行預先的數據生產，實時反饋最新的數據。讀取速度較預渲染會慢（每次都會從庫中讀物并且重新繪制），但是實時反映數據變化。

云數據圖層

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

同時云數據圖層是高德地圖API里的一個圖層，所以它可以和API的其他組件和功能結構使用

可以和其它圖層疊加展示
可以和覆蓋物層結合使用
支持各種交互事件，可以做各種數據的詳細展示
可以和其它API結合等等

云數據圖層示意圖

云數據圖層接口說明

云數據圖層示例

使用過程演示

1.數據準備

素材可到我的github地址下載

2.數據導入

登錄云圖數據管理臺，創建一個地圖，并導入數據。數據導入完成后如下

添加medicalspecialists字段索引

3.效果預覽

點擊分享，查看效果預覽

4.代碼編寫

在代碼里寫一個在線的web頁面，來做一個小小的查詢使用的web應用

源代碼如下：

    

        

        

            
全國三甲醫院查詢系統（數據來源于網絡，僅供參考）
            

                選擇你想看的專科：
                

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

        

        

    

課程大綱

云圖
    AMap
    CloudDataLayer 云數據圖層
    CloudDatatSearch 云數據空間檢索服務
建議
    如果沒有JS-API開發經驗，可以提前了解下JS-API或者學習《JS-API公開課》
    了解云圖的原理
接口文檔
    地址：http://lbs.amap.com/api/javascript-api/reference/cloudlayer

云圖JS-API簡介

實戰案例-武俠通訊錄

武俠通訊錄-步驟

1.獲取Key

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

2.創建地圖

創建地圖，并導入通訊錄數據，或標注數據

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

代碼演示：

參考資料

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

第六章Android云圖SDK和第七章iOS云圖SDK講解，因個人開發方向及條件限制，這里就沒有內容了。