慕课网_《如何使用高德云图在线制做属于你的地图》学习总结

时间  2019-12-07
标签 如何 使用 云图 在线 制做 属于 地图 学习 总结 繁體版
原文   原文链接

时间：2017年08月13日星期日
说明：本文部份内容均来自慕课网。@慕课网：http://www.imooc.com
教学源码：无
学习源码：https://github.com/zccodere/s...javascript

第一章：云图产品介绍

1-1 云图产品介绍

什么是云图css

一款让您，用本身的数据，作想要的地图的服务

使用场景html

clipboard.png

云图的服务与产品java

clipboard.png

云图为您提供制做本身地图的方法jquery

方法1：在线制做您的地图
无须开发，用云图数据管理台导入或标注点信息，一键在线发布您的地图
云图数据管理台
方法2：开发您的地图
自主开发，用云图API/SDK服务，自主开发基于您的数据的地图或APP
 云图API、JavaScript云图API、Android/iOS云图SDK

若是用云图产品，作出什么样的地图git

clipboard.png

课程安排github

手工操做：云图数据管理台：存储、编辑、更新您的数据&在线制做您的地图
服务端开发：云图API：云存储API介绍&开发实战（Java）详解
Web开发：JavaScript云图API：
    --如何使用数据图层进行Web应用开发
    --JS云图API开发&开发基于位置的通信录（简单demo）
Android开发：Android云图SDK：如何在Android端检索及展现云图数据
iOS开发：iOS云图SDK开发：如何在iOS端检索及展现云图数据

第二章：云图数据管理台

2-1 云图数据管理台

云图数据管理台web

可视化数据管理
在线发布地图平台
支撑自主开发

可实现功能ajax

存储您的数据：导入excel/csv数据文件；上传图片信息；地图上标注
管理您的数据：编辑、更新、删除数据；点样式设置
在线发布地图：发布一个在线地图网页，多种模版（如附件模版、全量模版，更多敬请期待）
支持自主开发：
    --存储的数据供JavaScript云图API，Android云图SDK，iOS云图SDK调用，
    --自主开发基于自有数据的网站或APP；
    --设置API/SDK（keywords,filter,sortrule）参数生效的字段索引；

云图数据管理台用途spring

clipboard.png

帮助文档

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

在线发布您的地图实例-制做暖暖北京记忆旅游地图

制做步骤：

1.数据准备：

数据excel和图片。

2.实际操做：

登陆云图数据管理台
导入数据
编辑数据
删除数据
上传图片
点样式设置
发布

数据准备

素材请到个人github地址下载。

clipboard.png

clipboard.png

实际操做

注册、登陆云图数据管理台
地址：http://yuntu.amap.com

新建地图

clipboard.png

选择批量上传

clipboard.png

clipboard.png

完成数据导入后，进行图片上传

clipboard.png

进行发布

clipboard.png

共两种模版：全国模版和地区模版

clipboard.png

第三章：Java云图API

3-1 开发讲解及实例

目录

云存储API、云检索API在云图中的定位
云存储API、云检索API的价值
云存储API介绍
云存储API实战

云存储API、云检索API在云图中的定位

clipboard.png

云存储API、云检索API的价值

1.云存储API能够进行数据的增删改，用户能够进行批量的数据上传或数据的增删改。
2.云检索API能够对数据进行各类条件查询。
3.用户能够在服务器端调用云存储API、云检索API从而构建本身的存储和检索服务，
  甚至能够制做本身的数据管理台。
4.用户也能够在其它终端上调用云存储API、云检索API。

通常存储数据流程

clipboard.png

推荐存储数据流程

clipboard.png

云存储API的介绍

云存储API是HTTP型请求API，适用服务端、Web端、移动端实现云图的数据处理
数据读取和展现：经过云图数据管理台或云图API（JSAPI、移动端API、云检索API）
数据上传或存储：经过云图数据管理台或云存储API
JavaScript云图API、Android/iOS云图SDK当前仅提供数据检索功能以及数据的展示

clipboard.png

云存储API实战-全国三甲医院在线管理系统

clipboard.png

学习使用技术

1.开发语言：Java、Javascript
2.构建环境：Eclipse、Maven
3.开发框架：SpringBoot（后台）、Bootstrap（前台）

到开放平台获取key。

地址：http://lbs.amap.com/
路径：控制台》应用管理》个人应用》建立新应用》添加新key

clipboard.png

云存储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>

完成后的项目结构以下

clipboard.png

代码演示：

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: '上一次修改时间'
        }]
    });
}

效果图

clipboard.png

第四章：JavaScript云图API

4-1 开发知识讲解（上）

如何使用云数据图层进行Web应用开发-目录

何为图层
何为云数据图层
云数据图层接口说明

何为图层

图层为一组绘制的地物（点、线、面），好比常见的有
各类POI图层（点数据）
有实时交通图层（线数据）
行政区划图层（面数据）
基础图层（点线面综合数据）

clipboard.png

图层详解

电子地图就是由多个图层组成的图层集合
电子地图包括基础图层和叠加图层两种图层
基础图层一般描述基本的路网信息和基本的地物信息，做为展现电子地图的基础
叠加图层是叠加在基础图层上展现的图层，一般用于某些专题内容的展现
而叠加图层能够相互叠加展现
对某层的操做不会影响其它层，并能增长删除影藏图层

示例图

clipboard.png

从数据结构的角度看，图层还会分为栅格图层和矢量图层

栅格图层
栅格结构是地理数据划分红若干行、若干列，成为一个像素阵列，其最小单元为像素
优势：结构简单，易于数据交换，输出快速，成本低廉
缺点：图像识别效果不如矢量，难以表达拓扑关系，图像数据量大
矢量图层
矢量结构是用一系列有序的x、y坐标对表示地理实体的空间位置
优势：结构紧凑，冗余度低，便于描述线和边界，精度高
缺点：数据结构复杂，不便于数据标准化和规范化，数据交换困难，显示与绘制成本较高

示例图

clipboard.png

图层的绘制（渲染）流程

预渲染
实时渲染

预渲染

从数据库中取出数据进行批量的离线绘制，制做程栅格瓦片或矢量瓦片存储在缓存服务器上，客户端读取图层数据时从缓存服务器读取事先绘制好的数据。读取熟读快，数据更新缓慢（通常以月或季度为单位更新一次），不能实时反映数据的动态变化。

实时渲染

根据客户端读取数据的条件直接绘制，不进行预先的数据生产，实时反馈最新的数据。读取速度较预渲染会慢（每次都会从库中读物而且从新绘制），可是实时反映数据变化。

云数据图层

云数据图层是高德LBS开放平台API中的一个特殊的图层，属于云图API的一部分
为了快速实时展现用户所设定的海量数据点而设计的
    快速实时：云数据图层利用的实时渲染原理，实时反映用户数据的最新状况
    海量数据点：云数据图层使用的是栅格瓦片技术，可以在服务端快读生成海量最新数据的栅格图像，
    客户端低端配置也能够轻松显示海量数据。同时为了解决栅格数据地物识别困难的问题，
    使用了一种特殊的描述栅格内容的技术，使云数据图层也可以精确地识别全部的地物数据。
    用户设定：因为是实时渲染，因此云数据图层为用户提供了各类过滤数据的条件，
    使用户能获得本身想要的定制数据。

同时云数据图层是高德地图API里的一个图层，因此它能够和API的其余组件和功能结构使用

能够和其它图层叠加展现
能够和覆盖物层结合使用
支持各类交互事件，能够作各类数据的详细展现
能够和其它API结合等等

云数据图层示意图

clipboard.png

云数据图层接口说明

clipboard.png

clipboard.png

clipboard.png

4-2 开发知识讲解（下）

云数据图层示例

clipboard.png

使用过程演示

1.数据准备

素材可到个人github地址下载

clipboard.png

2.数据导入

登陆云图数据管理台，建立一个地图，并导入数据。数据导入完成后以下

clipboard.png

添加medicalspecialists字段索引

clipboard.png

3.效果预览

点击分享，查看效果预览

clipboard.png

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简介

clipboard.png

实战案例-武侠通信录

clipboard.png

武侠通信录-步骤

clipboard.png

1.获取Key

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

2.建立地图

建立地图，并导入通信录数据，或标注数据

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

clipboard.png

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讲解，因我的开发方向及条件限制，这里就没有内容了。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程