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

时间:2024-02-01 08:44:40

在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万行

接口示例如下:

 

特别注意:

高德开放平台考虑到服务资源的问题,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,值为根据请求参数与私钥计算出的值。