慕課網_《如何使用高德雲圖在線製做屬於你的地圖》學習總結

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

第一章：雲圖產品介紹

1-1 雲圖產品介紹

什麼是雲圖

一款讓您，用本身的數據，作想要的地圖的服務

使用場景

雲圖的服務與產品

雲圖爲您提供製做本身地圖的方法

方法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端檢索及展現雲圖數據

第二章：雲圖數據管理臺

2-1 雲圖數據管理臺

雲圖數據管理臺

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

可實現功能

存儲您的數據：導入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

新建地圖

選擇批量上傳

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

進行發佈

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

第三章：Java雲圖API

3-1 開發講解及實例

目錄

雲存儲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文件以下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.myimooc</groupId>
    <artifactId>yuntujava</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>yuntujava</name>
    <url>http://maven.apache.org</url>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.1.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.36</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

完成後的項目結構以下

代碼演示：

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<String,String> 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<String,String> 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<String,String> 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<String,String> 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類

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>雲圖管理</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript" src="\static\js\index.js"></script>

</head>
<body>

    <div class="container">
        <br/>
        <div class="panel panel-default">
            <!-- <div class="panel-heading">地圖名稱：<span id="table_span_id" no="tableid">個人地圖4</span></div> -->
            <div class="panel-heading">地圖名稱：<span id="table_span_id" no=""></span></div>
            <div class="panel-body">
                <form id="formSearch" class="form-inline">
                    <div class="form-group form-group-sm">
                        <label class="control-label" for="keywords">關鍵詞</label>
                        <input type="text" class="form-control" id="keywords">
                    </div>
                    <div class="form-group form-group-sm">
                        <button type="button" id="btn_query" class="btn btn-primary">查詢</button>
                        <button type="button" id="btn_reset" class="btn btn-primary">重置</button>
                    </div>
                </form>
            </div>
        </div>
        
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
            </button>
        </div>
        
        <table id="table_data"></table>

    </div>
    
    <div id="table_modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">地圖編輯</h5>
              </div>
              <div class="modal-body">
                <form id="formSearch" class="form-inline">
                    <div class="form-group form-group-sm">
                        <label class="control-label" for="table_modal_name">地圖名稱</label>
                        <input type="text" class="form-control" id="table_modal_name" placeholder="須要進行管理的地圖名稱">
                    </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" id="table_modal_save" class="btn btn-primary">肯定</button>
              </div>
        </div>
      </div>
    </div>
    
    <div id="edit_modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">數據編輯</h5>
              </div>
              <div class="modal-body">
                <form>
                    <input type="hidden" id="edit_modal_id" value="">
                    <div class="form-group">
                        <label class="control-label" for="edit_modal_name">名稱</label>
                        <input type="text" class="form-control" id="edit_modal_name" placeholder="請輸入名稱">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="edit_modal_address">地址</label>
                        <input type="text" class="form-control" id="edit_modal_address" placeholder="請輸入地址">
                    </div>
                </form>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" id="edit_modal_save" class="btn btn-primary">肯定</button>
              </div>
        </div>
      </div>
    </div>
    
    <div id="info_modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">提示</h5>
              </div>
              <div class="modal-body">
                <form id="formSearch" class="form-inline">
                    <div class="form-group form-group-sm">
                        <span id="info_modal_span"></span>
                    </div>
                </form>
              </div>
        </div>
      </div>
    </div>
</body>
</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: '上一次修改時間'
        }]
    });
}

效果圖

第四章：JavaScript雲圖API

4-1 開發知識講解（上）

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

何爲圖層
何爲雲數據圖層
雲數據圖層接口說明

何爲圖層

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

圖層詳解

電子地圖就是由多個圖層組成的圖層集合
電子地圖包括基礎圖層和疊加圖層兩種圖層
基礎圖層一般描述基本的路網信息和基本的地物信息，做爲展現電子地圖的基礎
疊加圖層是疊加在基礎圖層上展現的圖層，一般用於某些專題內容的展現
而疊加圖層能夠相互疊加展現
對某層的操做不會影響其它層，並能增長刪除影藏圖層

示例圖

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

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

示例圖

圖層的繪製（渲染）流程

預渲染
實時渲染

預渲染

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

實時渲染

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

雲數據圖層

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

同時雲數據圖層是高德地圖API裏的一個圖層，因此它能夠和API的其餘組件和功能結構使用

能夠和其它圖層疊加展現
能夠和覆蓋物層結合使用
支持各類交互事件，能夠作各類數據的詳細展現
能夠和其它API結合等等

雲數據圖層示意圖

雲數據圖層接口說明

4-2 開發知識講解（下）

雲數據圖層示例

使用過程演示

1.數據準備

素材可到個人github地址下載

2.數據導入

登陸雲圖數據管理臺，建立一個地圖，並導入數據。數據導入完成後以下

添加medicalspecialists字段索引

3.效果預覽

點擊分享，查看效果預覽

4.代碼編寫

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

源代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>全國三甲醫院查詢系統</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="http://webapi.amap.com/maps?v=1.3&key=cd268d137284ab1862e2f0bb26c4ef61"></script>
<script type="text/javascript" language="javascript">
var mapObj;
var keywords;
var cloudDataLayer;

/**
 * 初始化地圖對象，加載地圖
 */
function mapInit(){
    console.log("開始初始化");
    mapObj = new AMap.Map('iCenter',{center: [108,39.907629],level:4});
    //mapObj = new AMap.Map("container",{center: new AMap.LngLat(108,39.907629),level:4});
    addCloudLayer();
}
/**
 * 疊加雲數據圖層
 */
function addCloudLayer(){
    console.log("加載雲數據圖層插件");
    console.log(mapObj);
    // 加載雲數據圖層插件
    mapObj.plugin('AMap.CloudDataLayer',function(){
        var layerOptions = {
            query:{keywords:''},
            clickable:true
        }
        // 實例化雲數據圖層類
        cloudDataLayer = new AMap.CloudDataLayer('5991b48dafdf521e86dbbe90',layerOptions);
        console.log("加載雲數據圖層數據"+cloudDataLayer);
        console.log(cloudDataLayer);
        // 疊加雲數據圖層到地圖
        cloudDataLayer.setMap(mapObj);
        
        // 添加事件監聽器
        AMap.event.addListener(cloudDataLayer,'click',function(result){
            var clouddata = result.data;
            var infoWindow = new AMap.InfoWindow({
                content:'<h3><font face="微軟雅黑" color="#3366FF">'+clouddata._name+'</font></h3><hr />'
                +'地址：'+clouddata._address+'<br />'
                +'電話：'+clouddata.phonenumber+'<br />'
                +'郵編：'+clouddata.postcode+'<br />'
                +'擅長：'+clouddata.medicalspecialists+'<br />'
                +'省份：'+clouddata.provinces+'<br />',
                size:new AMap.Size(300,0),
                autoMove:true,
                offset:new AMap.Pixel(0,5)
            });
            
            infoWindow.open(mapObj,clouddata._location);
        });
    });
}
function getType(medicalspecialists){
    var op = {
            query:{keywords:medicalspecialists}
    }
    console.log('查詢數據：'+op);
    cloudDataLayer.setOptions(op);
}
</script>
</head>
<body onLoad="mapInit()">
    <div class="container">
        <br/>
        <div class="panel panel-default">
            <div class="panel-heading">全國三甲醫院查詢系統<small>（數據來源於網絡，僅供參考）</small></div>
            <div class="panel-body">
                <label class="control-label">選擇你想看的專科：</label>
                <form id="selecttype" class="form-inline">
                    <input type="radio" name="medicalspecialists" value="所有三甲醫院" onclick="getType('')"/>所有三甲醫院
                    <input type="radio" name="medicalspecialists" value="內科" onclick="getType('內科')"/>內科
                    <input type="radio" name="medicalspecialists" value="外科" onclick="getType('外科')"/>外科
                    <input type="radio" name="medicalspecialists" value="婦科" onclick="getType('婦科')"/>婦科
                    <input type="radio" name="medicalspecialists" value="眼科" onclick="getType('眼科')"/>眼科
                    <input type="radio" name="medicalspecialists" value="耳鼻喉科" onclick="getType('耳鼻喉科')"/>耳鼻喉科
                    <input type="radio" name="medicalspecialists" value="兒科" onclick="getType('兒科')"/>兒科
                    <input type="radio" name="medicalspecialists" value="口腔科" onclick="getType('口腔科')"/>口腔科
                    <input type="radio" name="medicalspecialists" value="皮膚科" onclick="getType('皮膚科')"/>皮膚科
                    <input type="radio" name="medicalspecialists" value="骨科" onclick="getType('骨科')"/>骨科
                    <input type="radio" name="medicalspecialists" value="中醫" onclick="getType('中醫')"/>中醫
                    <input type="radio" name="medicalspecialists" value="鍼灸推拿" onclick="getType('鍼灸推拿')"/>鍼灸推拿
                    <input type="radio" name="medicalspecialists" value="心理諮詢" onclick="getType('心理諮詢')"/>心理諮詢
                    <input type="radio" name="medicalspecialists" value="腫瘤科" onclick="getType('腫瘤科')"/>腫瘤科
                    <input type="radio" name="medicalspecialists" value="心血管科" onclick="getType('心血管科')"/>心血管科
                    <input type="radio" name="medicalspecialists" value="消化科" onclick="getType('消化科')"/>消化科
                    <input type="radio" name="medicalspecialists" value="泌尿科" onclick="getType('泌尿科')"/>泌尿科
                    <input type="radio" name="medicalspecialists" value="肝腸科" onclick="getType('肝腸科')"/>肝腸科
                    <input type="radio" name="medicalspecialists" value="肝病科" onclick="getType('肝病科')"/>肝病科
                    <input type="radio" name="medicalspecialists" value="性病科" onclick="getType('性病科')"/>性病科
                    <input type="radio" name="medicalspecialists" value="腎病科" onclick="getType('腎病科')"/>腎病科
                    <input type="radio" name="medicalspecialists" value="呼吸內科" onclick="getType('呼吸內科')"/>呼吸內科
                </form>
            </div>
        </div>
        <hr/>
        <div id="iCenter"style="width:100%;height:600px;"></div>
        <div id="info" style="padding:2px 0px 0px5px;font-size:12px;color:red;height:20px"></div>
    </div>
</body>
</html>

第五章：JavaScript雲圖API實戰

5-1 通信錄實戰（上）

課程大綱

雲圖
    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...

5-2 通信錄實戰（下）

代碼演示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>武俠通信錄</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=b8324d79ff6a54d04e1a0395ae983554"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="hh" style="width:100%;height:100%;"></div>
<input id="name" type="text" style="position:absolute;z-index:160px;width:300px;height:40px;top:50px;right:20px"/>

<script>
    // 建立基本圖層
    var map = new AMap.Map('hh', {
        resizeEnable: true,
        zoom:12,
        center: [106.556031, 29.564068]
    });
    var layer;
    
    // 加載雲圖插件
    map.plugin(['AMap.CloudDataLayer'],function(){
        // 加載表下面的數據
        layer = new AMap.CloudDataLayer('5991d7492376c11daba78511');
        // 將數據渲染到基本圖層上
        layer.setMap(map);
        
        // 添加監聽事件
        AMap.event.addListener(layer,'click',function(e){
            console.log(e);
            var obj = e.data,
                address = obj._address,
                school = obj._name,
                name = obj.username,
                phone = obj.phone,
                img = '';
            if(obj._image.length){
                img = obj._image[0]._preurl;
            }
            
            var str = '<h3><font face="微軟雅黑" color="#3366FF">'+name+'</font></h3><hr />'
                +'手機：'+phone+'<br />'
                +'學校：'+school+'<br />'
                +'地址：'+address+'<br />';
            var infoWindow = new AMap.InfoWindow({
                autoMove:true,
                offset:new AMap.Pixel(0,0)
            });
            
            infoWindow.setSize(new AMap.Size(300,0));
            infoWindow.setContent(str);
            infoWindow.open(map,obj._location);
        });
    });
    
    // 給輸入框綁定回車按鈕事件監聽
    document.getElementById('name').onkeydown = function(e){
        //console.info(e);
        if(e.keyCode == 13){
            var text = document.getElementById('name').value;
            console.info(text);
            layer.setOptions({
                query:{keywords:text}
            });
        }
    };

</script>
</body>
</html>

參考資料

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

第六章Android雲圖SDK和第七章iOS雲圖SDK講解，因我的開發方向及條件限制，這裏就沒有內容了。