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


时间: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讲解,因个人开发方向及条件限制,这里就没有内容了。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>