轮播气泡地图
本帖最后由 JamesLv 于 2020-3-3 17:26 编辑在仪表板中除了使用系统已有的可视化组件之外,还可以通过内置扩展插件,甚至自定义插件绘制更多样化的图表以更丰富的形式展示数据。
版本更新记录
版本号更新内容支持Wyn Enterprise版本下载地址
V1.0第一次发布3.0.04167.0
1. 内容概述
轮播气泡地图可以在地图上通过经纬度的标记数据点,并通过气泡表示数据的大小。在开启轮播属性之后,自动循环展示数据点的详细信息,并且支持与其他组件的数据交叉联动,非常适合创建数据大屏、管理驾驶舱等场景的需要。
另外,该可视化扩展插件还演示了在Wyn Enterprise中集成百度地图和Echarts的详细方法。
本节为您介绍扩展组件轮播气泡地图的基本用法。
2. 操作步骤
(1)下载插件包
下载轮播气泡地图插件包,将其保存到本地计算机并解压。
(2)添加百度应用AK编号
打开插件包中的index.html文件
提示
百度地图应用的ak编号获取说明:
您需要注册百度账号(https://lbsyun.baidu.com/apiconsole/center#/home),并创建应用。请注意创建应用时,将应用类型选择为“浏览器端”。
(3)添加自定义插件
将修改后的文件夹放置到Wyn Enterprise安装目录Server\wwwroot\Web Contents\ 路径下即可在产品中体验
例如: C:\Program Files\Wyn Enterprise\Server\wwwroot\Web Contents
(4)新建仪表板添加外部扩展组件
将外部扩展组件拖拽到仪表板编辑区。
(5)选择插件
单击组件右上角进入编辑状态,选择“轮播气泡地图”,然后单击“确定”。
(6) 数据绑定
添加外部扩展组件后,“数据绑定”面板会自动打开,将数据集中的字段拖拽到绑定区即可完成数据绑定。
如果仪表板中未加载数据集,则需要先选择一个数据集进行加载,然后再绑定数据字段。详见加载数据集。
注意
数值绑定区域中仅能绑定一个字段,如绑定了多个字段,则仅第一个生效。
维度绑定区域中必须按照上图所示的顺序绑定地区信息、经度信息和纬度信息三个字段才能使轮播气泡地图正常显示。
(7)属性设置
在编辑区右侧选择“属性设置”进行图形样式设置。
自定义属性设置说明如下:
{
"play": {
"autoplay": false,
"setCenter": "auto",
"interval": 3
},
"zoom": 0,
"center": [
null,
null
],
"rank": {
"level": 5,
"order": "top"
},
"style": {
"color": "blue",
"rankColor": "purple",
"mapStyle": {
"style": "normal"
}
}
}
1.“play”:轮播选项 “autoplay”: 是否开启轮播。可选值: true(开启) | false(关闭)。默认值: false。
“setCenter”: 自动轮播时是否设置中心点(即视野是否跟随轮播的数据移动),开启轮播时生效。可选值:“auto”|”true”|”false”。
“auto”: 数据在视野范围较好位置(没有很靠近边界)时视野不变,在视野之外或者靠近边界时视野变为以该数据为中心;
“true”: 始终将轮播的数据作为视野中心点显示;
“false”: 始终不改变视野。默认值:“auto”。
“interval”: 轮播间隔时间,单位: 秒,开启轮播时生效。 可选值: 正数。 默认值: 3
2. “zoom”: 地图缩放级别
数字越大,地图放大程度越大,视野越小。可选值: 3~19的整数,默认为 0。
3. “center”: 地图中心点经纬度
经度数据范围为: -180~180,纬度数据范围为: -90~90
4. “rank”: 重要(闪动)数据显示设置
“level”: 显示重要数据的个数。默认值为5。
“order”: 重点显示最大的或者最小的数据。可选值: “top”(最大) | “bottom”(最小)。默认值为 “top”。
5. “style”: 样式设置
“color”: 普通数据颜色值。可选值:RGB颜色,RGBA颜色,HSL色彩,HSLA颜色,十六进制颜色,渐变色。
“rankColor”: 重要数据颜色值。同“color”。
“mapStyle”: 地图样式。可以设置三种字段: “style”, “styleId”, “styleJson”。
“style”: 可选值:“normal”,”light”,”dark”,”redalert”,”googlelite“,”grassgreen“,”midnight“,”pink“,”darkgreen“,”bluish“,”grayscale“,”hardedge“。请参考: http://lbsyun.baidu.com/custom/list.htm
”styleId“: 利用百度地图个性化工具编辑得到,。参考: http://lbsyun.baidu.com/apiconsole/custommap
(8)预览并保存仪表板
预览后如效果满意,即可保存仪表板。
页:
[1]