基于高德开放平台Map Lab的数据可视化

在Map Lab上创建可视化项目，首先需要添加数据。添加数据有4种方式，分别是:

• 上传CSV文件添加数据
• 上传Excel文件添加数据
• 连接在线数据库添加数据
• 提供在线数据API添加数据

一、数据上传说明

1. 数据格式

CSV文件与Excel文件需要保证为UTF-8编码，请上传有明确表头的，标准行列的一维表格数据，数据需要多于4行，请勿上传带有合并单元格的数据，会出现数据读取失败。

2. 表头读取

系统默认读取数据中的第一行作为表头，为了在后续编辑中方便操作和识别，请开发者正确命名表头。

3. 数据分隔符

系统在数据读取时，默认以英文逗号（,）作为分隔符，其他类型的分隔符会导致数据上传失败。

经纬度字段需要使用英文双引号（""）将数据引用，否则系统在读取数据时，会作为两个字段进行处理。即经纬度字段必须以字符串形式添加，否则数据将无法可视化。

4. 核心数据字段

位置数据可视化必须依赖经纬度才可以在地图上进行数据绘制，所以上传的数据中必须包含经纬度的字段。

5. 经纬度字段数据格式

◆ 点类型数据

经纬度数据格式为：“经度,纬度”，经纬度需要在一个单元格内，通过英文逗号分隔，逗号前为经度，逗号后为纬度，示例数据如下：

景区名称	所在省份	经纬度	省份内5A景区数量	景区评定年份
东城区故宫博物院	北京市	116.397026,39.918058	7	2007年
东城区天坛公园	北京市	116.410886,39.881949	7	2007年
石家庄平山县西柏坡景区	河北省	113.958941,38.357445	8	2011年
…	…	…	…	…
唐山市遵化市清东陵景区	河北省	117.665421,40.189822	8	2015年

◆ 线类型数据

经纬度数据格式为："[经度1,纬度1],[经度2,纬度2]…[经度N,纬度N]"，多个点的经纬度需要在一个单元格内，示例数据如下：

起点	终点	划分	经纬度
北京	沈阳	东北	[116.41059,39.906779],[123.507758,41.694648]
北京	长春	东北	[116.41059,39.906779],[125.353461,43.855517]
北京	哈尔滨	东北	[116.41059,39.906779],[126.58393,45.849075]
…	…	…	…
北京	呼和浩特	华北	[116.41059,39.906779],[111.726483,40.841181]

◆ 面类型数据

经纬度数据格式为："[经度1,纬度1],[经度2,纬度2]…[经度N,纬度N]"，多个点的经纬度需要在一个单元格内，在绘制时会将第一个点和最后一个点进行连线，形成一个面，示例数据如下：

图形	经纬度
三角形	[116.472501,39.994524],[116.472641,39.991286],[116.474647,39.993226]
三角形	[116.472791,39.99122],[116.475527,39.989486],[116.477447,39.99136]
四边形	[116.480473,39.993908],[116.477576,39.991278],[116.479829,39.989847],[116.482683,39.992445]
…	…
五边形	[116.478885,39.998642],[116.477769,39.995798],[116.48058,39.994072],[116.483884,39.995338],[116.481932,39.997985]

6. 数据量与文件大小

单份数据文件，最多包含5万行数据，且文件大小需要小于5M，超过限制会导致数据上传失败。

注意：

因为CSV以及Excel单元格的限制，获取的区域边界坐标如果太多，将无法存储全部的坐标。

解决方案：降低边界坐标的采集精度，例如每隔五个坐标才做一次存储。

7. 数据预览与处理

◆ 查看数据读取是否正确

上传成功后，会进入到数据预览页面，在数据预览页面开发者可以做如下校验。

查看读取的数据格式是否正确，查看读取的数据是否出现乱码，查看读取的数据量是否正确。

示例页面如下：

◆ 数据处理

数据读取确认无误时，可对数据进行重命名操作，改一个识别性比较强的名字，方便后续选择数据。同时对于数据源中多余的列，可以也可以点击列名称后的“更多”按钮，对此列进行删除。

示例页面如下：

二、在线数据接入说明

1. 数据库数据接入的整体流程

◆ 填写连接数据库所需要的信息

以MySQL数据库举例，SQL Server数据的同步的连接方式与MySQL数据一致。

• 服务器地址：如 30.28.180.155
• 端口号：如 3306
• 用户名：数据库访问所需要的用户名，如 root
• 密码：数据库访问所需的密码，如 123
• 数据库名称：如mapv
• 表格名称：此处需要填写数据所在的表格的名称，如table1

以上数据填写完成后，点击“下一步”系统会自动连接到您的数据库，如连接成功会收到对应的成功提示并顺利进入下一步。

◆ 填写数据名称，设置数据同步频率

数据库连接信息填写成功后，点击“下一步”，进入到数据设置页面，该页面中需要填写如下内容：

• 数据名称：为这份数据起一个名字，后续方便与其他数据区分，也方便查找与使用
• 同步方式：同步方式中支持固定频次同步，即开发者选择了同步频率后，如1小时，平台会每隔一个小时去拉取一次数据，做到数据的动态更新。

◆ 数据预览

◆ 创建可视化项目

注意：

即使数据库连接成功，数据预览没有问题，可视化项目也不一定可以创建成功。因为Map Lab能够绘制的经纬度数据（主要是区域绘制）是有极限的。

行政区域的边界坐标并不一定只有一条记录，有时候所属同个行政区的区域并不一定会连在一起，例如沿海省份或城市会含有许多小海岛。

目前省份绘制的数据记录大概是370条，市级绘制的数据记录大概是490条，县级绘制的数据记录较少还未知极限。当然一个区域的越大边界越曲折，它的经纬度坐标越多，因此这里的数据记录数量也并不一定准确。

解决方案：降低边界坐标的采集精度，例如每隔五个坐标才做一次存储。

2. API数据接入的整体流程

◆ 填写API地址

开发者在选择API数据接入时，存在一定的开发量，需要开发一个API供可视化平台读取数据，API格式要求如下：

• 连接必须是jsonp
• 返回数据格式是{data: [ ]}，data里面是真正的数据内容
• 出于安全的原因，平台对response的 content-type做了严格校验，返回类型只能是 'text/javascript'， 'application/x-javascript'， 'application/javascript'， 'text/plain'， 'application/json' 这几种之一
• 数据不超过5万行

接口示例如下：

• 接口：https://www.demo.com/coordinate/device/info?level=2&callback=jsoncallback
• 返回数据：

特别注意：

高德开放平台考虑到服务资源的问题，API请求数据时有5s的限制，超时将无法获取到数据。对于数据请求超时的建议：

• 如果请求时间过长，建议增加一层数据缓存
• 如果数据是不变的，可以将数据作为静态资源

◆ 填写数据名称，设置数据同步频率

填写API地址后，点击“下一步”，该页面中需要填写如下内容：

• 数据名称：为这份数据起一个名字，后续方便与其他数据区分，也方便查找与使用
• 同步方式：同步方式中支持固定频次同步，即开发者选择了同步频率后，如1小时，平台会每隔一个小时去拉取一次数据，做到数据的动态更新。

◆ 数据预览

◆ 创建可视化项目

 

 

三、位置数据可视化

可视化项目主要由数据，组件以及地图组成。

1. 数据

每份数据占用1个图层，最多可以有3个图层。每个图层都可以选择不同的类型，分别是点类型、热力图、线类型以及面类型。选择类型的同时也可以选择呈现2D或3D效果。

每个图层都有着数据展示效果，位置标记的尺寸属性，颜色属性以及图例等。

数据展示效果

• 点类型：普通点、大小点以及个性图标。大小点必须依赖某个字段才能根据其数值展现其大小效果。
• 热力图：基础热力、四边形热力、六边形热力以及行政区热力。基础热力需要依赖某个热力字段才能显示其效果，而后三者则可以依赖其数量或者某个字段的均值、最大、最小、求和中的一种。行政区热力可以选择显示的行政区划分级别，全国->省->市。
• 线类型：折线与弧线。
• 面类型：面。

2. 组件

总共有5个组件，分别是2个地图控件、1个基础组件和2个高级组件。

• 缩放按钮：鼠标点击操作，默认添加。
• 手势缩放：鼠标滑轮操作，默认添加。
• 标题：展示标题，可更改内容。
• 动态播放器：需要依赖某层数据的某一列字段，根据其数值动态显示其位置。
• 信息气泡：可以显示某个位置标记的数据内容，有点击和鼠标悬浮2种触发方式。

3. 地图

总共有8种基础地图模板，分别是标准、远山黛、马卡龙、涂鸦、酱籽、草色青、极夜蓝以及幻影黑。当然也可以添加自定义地图。

4.其他

项目的右上角有4个按钮，分别是2/3D效果转化、全屏显示、分享以及反馈。以下是项目分享的使用说明：

◆ URL链接使用

前置条件：可视化项目的使用与分享前，都需要打开分享开关，在可视化分享页面拿到的URL分享链接，可以有如下使用方式：

• 大屏展示：在PC浏览器或者智能电视浏览器打开后，可以进入全屏，屏蔽掉浏览器边框，直接做大屏展示使用。
• 分享：可以直接将分享链接复制给其他人查看。

◆ 代码片段使用

前置条件：可视化项目的使用与分享前，都需要打开分享开关，在可视化分享页面拿到的代码片段，可以有如下使用方式：

嵌入式使用：如开发者需要在网页中嵌入可视化项目，可在获取代码片段后，加入到代码中，可以产出一个带有上下文的可视化项目，比如如下示例，代码片段如下：

<iframe src="https://maplab.amap.com/share/mapv/c6674d00eb2118e3da306a1784e0829d" style="height: 600px; width: 800px;"></iframe>

◆ 生成图片

将地图调整至所想要呈现的视角，点击截图生成图片即可分享。

四、Web服务API

不管是本地上传的数据，还是在线数据，数据可视化最重要的一个字段便是经纬度。而获取某点的经纬度或者某个区域的边界经纬度集合，都需要用到高德开放平台的Web服务API。而如果想要使用其API，必须要申请Web服务类型的key。为了保证不让他人获取到申请的key去恶意使用，平台提供了2种方式保障方式。

1. IP白名单

申请了Web服务类型的Key，在配置选项中，有一个“IP白名单”配置项。此项为非必填，但强烈建议用户在线上正常使用时为Key设置一个IP白名单。此处IP白名单中的IP，是指使用者服务器出口的IP。

设置IP白名单后，只有来自于白名单列表内的请求，才能被高德服务器正常响应，返回预期结果。否则将会提示10005 INVALID_USER_IP的错误。这样做的目的，是为了保证用户的使用安全。即便发生Key泄露的情况，其他用户也无法正常使用。

如果其他用户也可以调用，首先消耗这个Key的配额，其次有可能被平台的监控系统自动识别为“非法调用”，受到限制后，会影响正常用户的正常使用。

2. 数字签名（平台方说出BUG，暂不可用）

数字签名未开启的情况下，如果窃取者盗用Key发起非法访问，会被平台的策略自动识别。平台会对该Key进行强制处理，导致Key不能正常使用，继而影响正常调用。

如果开启数字签名，即使Key被泄露，窃取者在拿不到数字签名的情况下，是无法正常使用该Key发起请求的，故不会造成损失。数字签名的使用步骤如下：

◆ 在key的配置选项中开通数字签名

◆ 获取用于生成签名的私钥

该私钥与Key对应，请注意保存，不要泄露。

◆ 根据规则利用MD5算法加密生成签名

sig=MD5(按参数名升序排序的请求参数键值对 加（请注意“加”字无需输入）私钥)

例如：

请求服务为“testservice”；

请求参数分别为“a=23，b=12，d=48，f=8，c=67”；

私钥为“bbbbb”

则数字签名为：sig=md5(a=23&b=12&c=67&d=48&f=8bbbbb)

注意：

• 生成签名的内容（上文提到的拼装的参数，也就是md5()中的内容），必须为utf-8编码格式。
• 在计算md5的参数如果出现＋号，请正常计算sig，但在请求的时候需要用urlencode进行编码再请求。
• 请求参数排序需要注意，如果参数名的第一个字母顺序相同，就比较第二个字母。以此类推，直至得到排序结果。

◆ 将签名sig作为参数添加至请求参数中

参数名为sig，值为根据请求参数与私钥计算出的值。