找回密码
 立即注册

QQ登录

只需一步,快速开始

[地图] 自定义地图

James.Lv 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2020-2-27 13:31  /   查看:4660  /  回复:0
本帖最后由 JamesLv 于 2020-9-28 12:25 编辑

在仪表板中除了使用系统已有的可视化组件之外,还可以通过内置扩展插件,甚至自定义插件绘制更多样化的图表以更丰富的形式展示数据。
版本更新记录
版本号
更新内容
支持Wyn Enterprise版本
下载地址
V1.1
增加3D地图属性,可配置初始旋转角度和视角
3.0.04167.0
自定义地图.zip (841.65 KB, 下载次数: 150)
V1.0
第一次发布
3.0.04167.0
自定义地图.zip (833.24 KB, 下载次数: 73)

1.内容概述
为了展示带有位置信息的数据时,我们常常会用到地图组件,但是有些位置信息不是常规的地图,此时需要自定义地图来实现,通过自定义的地图数据来展示不同位置的信息。
本节为您介绍扩展组件自定义地图的基本用法。
image.png512915648.png

2.操作步骤
(1)  下载插件包
下载自定义地图插件包,将其保存到本地计算机并解压。

(2)  添加外部扩展插件
将解压后的文件夹放置到Wyn Enterprise安装目录Server\wwwroot\Web Contents\   路径下即可在产品中体验
例如: D:\Wyn Enterprise\Server\wwwroot\Web Contents\
image.png866219482.png

(3)  新建仪表板添加外部扩展组件
将外部扩展组件拖拽到仪表板编辑区。
image2019-12-11_18-41-35.png

(4)  选择插件
单击组件右上角的编辑按钮进入编辑状态,选择“自定义地图”,然后单击“确定”。
image.png569352416.png

(5)  数据绑定
使用外部扩展中的插件进行数据展示时,需进行数据绑定。
添加外部扩展组件后,“数据绑定”面板会自动打开,将数据集中的字段拖拽到绑定区即可完成数据绑定。
如果仪表板中未加载数据集,则需要先选择一个数据集进行加载,然后再绑定数据字段。
image.png103930357.png
注意:
维度绑定区域仅能绑定一个字段,如绑定多个字段,则仅第一个生效。
数值绑定区域可以绑定多个字段,并且在地图提示信息中展示绑定的所有字段数据。但只有绑定的第一个字段作为地图区块颜色填充的数据字段。

(6)  属性设置
在编辑区右侧选择“属性设置”进行图形样式设置。
image.png869089660.png
自定义属性说明如下:
  1. {
  2.     "mapStyle": "3D",
  3.     "mapName": "chinamap",
  4.     "autoFill": false,
  5.     "autoStyle": {
  6.         "min": 1,
  7.         "max": 50000,
  8.         "label": [],
  9.         "color": [
  10.             "#87aa66",
  11.             "#eba438",
  12.             "#d94d4c"
  13.         ]
  14.     },
  15.     "customStyle": [
  16.         {
  17.             "gte": 10000,
  18.             "label": ">10000",
  19.             "color": "#013c3c"
  20.         },
  21.         {
  22.             "gte": 1000,
  23.             "lte": 10000,
  24.             "label": "1000 - 9999",
  25.             "color": "#00676b"
  26.         },
  27.         {
  28.             "gte": 500,
  29.             "lte": 1000,
  30.             "label": "500 - 999",
  31.             "color": "#06fbfb"
  32.         },
  33.         {
  34.             "gte": 100,
  35.             "lte": 500,
  36.             "label": "100 - 499",
  37.             "color": "#29cccc"
  38.         },
  39.         {
  40.             "gte": 10,
  41.             "lte": 100,
  42.             "label": "10 - 99",
  43.             "color": "#5cc0be"
  44.         },
  45.         {
  46.             "gte": 1,
  47.             "lte": 10,
  48.             "label": "1 - 9",
  49.             "color": "#a7ebea"
  50.         },
  51.         {
  52.             "lte": 0,
  53.             "label": "0",
  54.             "color": "#ffffff"
  55.         }
  56.     ],
  57.     "textColor": "#ffffff",
  58.     "borderColor": "#0081c4",
复制代码
1."mapStyle":地图2D/3D样式切换属性,可选择该地图为2D地图或者3D地图。
2."mapName":自定义地图文件名称,自定义地图的geojson数据存放在该插件的“\自定义地图\data\”文件夹下,可增加多个geojson文件,在仪表板设计中可任意切换。
3."autoFill":是否自动填充区间。当该属性值为“true”的时候,下面的"autoStyle"属性生效,"customStyle"属性失效。
4."autoStyle":自动填充区间属性
"min":最小值,必填
"max":最大值,必填
"label":图例名称,非必填,当不填写时用最大最小数值作为图例名称
"color":区块颜色

5."customStyle":自定义区间属性,自定义区间划分可以使用 lt(小于,little than),gt(大于,greater than),lte(小于等于 lettle than or equals),gte(大于等于,greater than or equals)来表达边界。

"gte":区间的最小值
"lte":区间的最大值
"label":区间图例名称
"color":区间颜色

6."textColor":图例字体颜色
7."borderColor":地图区块边线颜色
以下参数仅在3D地图有效
8."distance":视角距离3D地图主体的距离,数值越大距离越远
9."alpha":视角绕 x 轴,即上下旋转的角度。
10."beta":视角绕 y 轴,即左右旋转的角度。


(7)  预览仪表板
预览后如效果满意,即可保存仪表板。
image.png367140807.png




0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部