中国2D
中国2D中目前支持添加:涟漪层、飞线层、区域热力层,支持配置地图的位置、颜色、鼠标交互事件等,能够多角度、多形式地渲染全国各城市地理位置的实时数据。
样式设置

中国2D组件样式设置包括通用设置,子组件管理,全局配置,区域设置,区域标签,交互样式,下钻设置。
子组件管理
新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

删除子组件:鼠标悬停在子组件的名称上,出现删除按钮,点击即可删除子组件。

配置子组件:
点击子组件名称,进入子组件配置页面。

数据设置
该组件无数据设置
区域热力层
区域热力层是中国2D地图的子组件,支持独立的样式、数据和交互配置,包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等,能够以热力区域的形式表现地理位置上的区域信息。
适用场景:在地图中通过赋予不同颜色以范围,展示某一自定义区域的数据。
样式设置

区域热力层的样式设置可以分为数据映射和和文本标注两部分。
数据映射:设置显示映射图标、拖拽手柄和图标文字。
其中图标类型可以选择连续型和分段型2种; 图标方向可以选择垂直或水平2种; 可以调整横纵坐标值来设置数据映射的具体位置; 设置最大值最小值热力区域的范围; 设置最大值、最小值颜色值和文本字号。
文本标注:可以设置文字在地图上的显示样式。
可以设置具体的文本字体字号颜色,也可以设置标注的规则。
{name}-{value}和数据设置中的字段匹配,如不想显示具体的数值可以去掉{value}。

具体样式设置预览效果如下:

数据设置

数据字段
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式
[
{
"name": "北京市",
"value": 100
},
{
"name": "天津市",
"value": 60
},
{
"name": "上海市",
"value": 50
},
{
"name": "重庆市",
"value": 40
},
{
"name": "广东省",
"value": 80
},
{
"name": "黑龙江省",
"value": 10
},
{
"name": "吉林省",
"value": 30
},
{
"name": "辽宁省",
"value": 12
},
{
"name": "内蒙古自治区",
"value": 23
},
{
"name": "河北省",
"value": 21
},
{
"name": "山西省",
"value": 41
},
{
"name": "陕西省",
"value": 17
},
{
"name": "山东省",
"value": 27
},
{
"name": "河南省",
"value": 54
},
{
"name": "江苏省",
"value": 67
},
{
"name": "安徽省",
"value": 56
},
{
"name": "浙江省",
"value": 78
},
{
"name": "福建省",
"value": 41
},
{
"name": "江西省",
"value": 28
},
{
"name": "湖南省",
"value": 50
},
{
"name": "广西壮族自治区",
"value": 10
},
{
"name": "海南省",
"value": 8
},
{
"name": "台湾省",
"value": 7
},
{
"name": "云南省",
"value": 15
},
{
"name": "贵州省",
"value": 66
},
{
"name": "四川省",
"value": 59
},
{
"name": "西藏自治区",
"value": 11
},
{
"name": "新疆维吾尔自治区",
"value": 9
},
{
"name": "青海省",
"value": 8
},
{
"name": "甘肃省",
"value": 4
},
{
"name": "宁夏回族自治区",
"value": 3
},
{
"name": "香港特别行政区",
"value": 2
},
{
"name": "澳门特别行政区",
"value": 14
},
{
"name": "湖北省",
"value": 77
}
]
飞线层
飞线层是基础平面地图的子组件,支持独立的样式和数据配置,能够以飞线的形式表现地理位置上两个点之间的OD数据
适用场景:可以用来展示两地之间的关联信息,如物流、交易等。
样式设置

飞线层的样式设置包含飞线样式、尾迹特效、首位标记、数据映射。
飞线样式包含线的粗细、样式、颜色、曲度;
尾迹特效包含形状、大小、长度、颜色、特效周期;
首位标记可以选择开始标记、结束标记和设置标记大小;
数据映射可以根据数值来调整飞线的颜色,包含最大值、最小值、最大值颜色、最小值颜色。
需要注意的是:如果开启了数据映射,那么将以数据映射中配置的样式为准;
数据设置
数据字段

飞线层的数据字段包括:from,to,fromName,toName,value,s
from:飞线的起点经纬度信息,需要将数据与图表进行映射;
to:飞线的终点经纬度信息,需要将数据与图表进行映射;
fromName:起点的地点名称,需要将数据与图表进行映射;
toName:终点的地点名称,需要将数据与图表进行映射;
value:飞线代表的值,需要将数据与图表进行映射;
tooltip:提示框内容,需要将数据与图表进行映射;
s:数据系列值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"from": "116.405285,39.904989",
"to": "126.642464,45.756967",
"s": "1",
"value": 2,
"fromName": "北京市",
"toName": "哈尔滨市"
},
{
"from": "116.405285,39.904989",
"to": "121.472644,31.231706",
"s": "1",
"value": 4,
"fromName": "北京市",
"toName": "上海市"
},
{
"from": "116.405285,39.904989",
"to": "114.298572,30.584355",
"s": "1",
"value": 3,
"fromName": "北京市",
"toName": "黄石市"
},
{
"from": "116.405285,39.904989",
"to": "113.280637,23.125178",
"s": "1",
"value": 10,
"fromName": "北京市",
"toName": "广州市"
},
{
"from": "116.405285,39.904989",
"to": "110.33119,20.031971",
"s": "1",
"value": 10,
"fromName": "北京市",
"toName": "三亚市"
},
{
"from": "116.405285,39.904989",
"to": "104.065735,30.659462",
"s": "1",
"value": 5,
"fromName": "北京市",
"toName": "成都市"
},
{
"from": "116.405285,39.904989",
"to": "102.712251,25.040609",
"s": "1",
"value": 9,
"fromName": "北京市",
"toName": "昆明市"
},
{
"from": "116.405285,39.904989",
"to": "91.132212,29.660361",
"s": "1",
"value": 8,
"fromName": "北京市",
"toName": "拉萨市"
},
{
"from": "116.405285,39.904989",
"to": "101.778916,36.623178",
"s": "1",
"value": 3,
"fromName": "北京市",
"toName": "西宁市"
},
{
"from": "116.405285,39.904989",
"to": "87.617733,43.792818",
"s": "1",
"value": 1,
"fromName": "北京市",
"toName": "乌鲁木齐市"
},
{
"from": "116.405285,39.904989",
"to": "121.509062,25.044332",
"s": "1",
"value": 6,
"fromName": "北京市",
"toName": "台湾"
},
{
"from": "116.405285,39.904989",
"to": "108.948024,34.263161",
"s": "2",
"value": 7,
"fromName": "北京市",
"toName": "西安市"
}
]
涟漪层
涟漪层是基础平面地图的子组件,支持独立的样式和数据配置,能够以动态涟漪的形式表现地理位置上点的数据特效。
适用场景:以大小不同的涟漪样式来体现某地区或区域数据的大小。例如,借助大小不同的涟漪展现不同城市的人口数量。
样式设置

涟漪层的样式设置包含涟漪设置、大小设置、文本标书和和数据映射4种。
默认配置:可选择涟漪形状、涟漪颜色、动画时间和绘制方式;
大小设置:可以设置最小涟漪、最大涟漪的值,以及波纹大小;
文本标注:可以设置是否显示文本,选择文本的位置、标注规则、具体文本的字体字号颜色;
数据映射:设置最大值、最小值、最大值颜色、最小值颜色
需要注意的是:如果开启了数据映射,那么将以数据映射中配置的样式为准;
数据设置
数据字段

涟漪层的数据字段包括:lon,lat,value,s,name
lon:涟漪的起点经纬度信息,需要将数据与图表进行映射;
lat:涟漪的终点经纬度信息,需要将数据与图表进行映射;
value:涟漪代表的值,需要将数据与图表进行映射;
s:数据系列值,需要将数据与图表进行映射;
name:地点名称,需要将数据与图表进行映射
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"name": "北京市",
"lat": 39.904989,
"lon": 116.405285,
"value": 5,
"s": "1"
},
{
"name": "黑龙江省",
"lat": 45.756967,
"lon": 126.642464,
"value": 9,
"s": "1"
},
{
"name": "上海市",
"lat": 31.231706,
"lon": 121.472644,
"value": 3,
"s": "1"
},
{
"name": "广东省",
"lat": 23.125178,
"lon": 113.280637,
"value": 1,
"s": "1"
},
{
"name": "海南省",
"lat": 20.031971,
"lon": 110.33119,
"value": 5,
"s": "1"
},
{
"name": "四川省",
"lat": 30.659462,
"lon": 104.065735,
"value": 9,
"s": "1"
},
{
"name": "湖北省",
"lat": 30.584355,
"lon": 114.298572,
"value": 4,
"s": "1"
},
{
"name": "云南省",
"lat": 25.040609,
"lon": 102.712251,
"value": 5,
"s": "1"
},
{
"name": "西藏自治区",
"lat": 29.660361,
"lon": 91.132212,
"value": 6,
"s": "1"
},
{
"name": "陕西省",
"lat": 34.263161,
"lon": 108.948024,
"value": 7,
"s": "1"
},
{
"name": "青海省",
"lat": 36.623178,
"lon": 101.778916,
"value": 10,
"s": "1"
},
{
"name": "新疆维吾尔自治区",
"lat": 43.792818,
"lon": 87.617733,
"value": 10,
"s": "1"
},
{
"name": "台湾省",
"lat": 25.044332,
"lon": 121.509062,
"value": 8,
"s": "1"
}
]
中国3D
中国3D中目前支持添加:散点层、飞线层、热力层、柱图层,支持配置地图的位置、颜色、鼠标交互事件等,能够多角度、多形式地渲染全国各城市地理位置的实时数据。
样式设置

中国3D组件样式设置包括基础配置,子组件管理,全局配置,区域设置、视觉设置、其他、交互样式、下钻设置。
子组件管理
新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

删除子组件:鼠标悬停在子组件的名称上,出现删除按钮,点击即可删除子组件。

配置子组件:
点击子组件名称,进入子组件配置页面。
全局配置
全局配置分为地图范围和部分区域设置两部分。
地图范围:可以选择全国等级或者省市区/县。
部分区域设置:支持在地图范围内添加多个地区实现高亮效果,可以设置区域高度、区域颜色和边界宽度。

区域设置
区域设置:可以调整地图的区块颜色、边界颜色和边界宽度。

视角设置
视角设置:可以配置相机距离、相机中心水平方向、相机中心垂直方向、水平旋转、垂直旋转来控制地图的角度。

其他
其他:可以调整地图厚度和空间高度

交互样式
交互样式:可以设置区域颜色和字体颜色,用户配置鼠标悬停后的区域地块的颜色和文本颜色

交互效果如下

下钻设置
下钻设置:可以开启下钻,启用下钻后点击对应省份可以实现下钻的效果。

数据设置
该组件无数据设置
热力层
热力层是中国3D地图的子组件,支持独立的样式、数据和交互配置,包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等,能够以热力区域的形式表现地理位置上的区域信息。
适用场景:在地图中通过赋予不同颜色以范围,展示某一自定义区域的数据
样式设置

热力层的样式设置可以分为数据映射和和文本标注两部分。
数据映射:可以设置显示映射图标、拖拽手柄和图标文字。
其中图标类型可以选择连续型和分段型2种; 图标方向可以选择垂直或水平2种; 可以调整横纵坐标值来设置数据映射的具体位置; 设置最大值最小值热力区域的范围; 设置最大值、最小值颜色值和文本字号。
文本标注
文本标注:可以设置显示与否、标注规则和文本设置,配置文字在地图上的显示样式。
标注规则:{name}-{value}和数据设置中的字段匹配,如不想显示具体的数值可以去掉{value}。

具体预览效果如下:

数据设置

数据字段
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式
[
{
"name": "北京市",
"value": 100
},
{
"name": "天津市",
"value": 60
},
{
"name": "上海市",
"value": 50
},
{
"name": "重庆市",
"value": 40
},
{
"name": "广东省",
"value": 80
},
{
"name": "黑龙江省",
"value": 10
},
{
"name": "吉林省",
"value": 30
},
{
"name": "辽宁省",
"value": 12
},
{
"name": "内蒙古自治区",
"value": 23
},
{
"name": "河北省",
"value": 21
},
{
"name": "山西省",
"value": 41
},
{
"name": "陕西省",
"value": 17
},
{
"name": "山东省",
"value": 27
},
{
"name": "河南省",
"value": 54
},
{
"name": "江苏省",
"value": 67
},
{
"name": "安徽省",
"value": 56
},
{
"name": "浙江省",
"value": 78
},
{
"name": "福建省",
"value": 41
},
{
"name": "江西省",
"value": 28
},
{
"name": "湖南省",
"value": 50
},
{
"name": "广西壮族自治区",
"value": 10
},
{
"name": "海南省",
"value": 8
},
{
"name": "台湾省",
"value": 7
},
{
"name": "云南省",
"value": 15
},
{
"name": "贵州省",
"value": 66
},
{
"name": "四川省",
"value": 59
},
{
"name": "西藏自治区",
"value": 11
},
{
"name": "新疆维吾尔自治区",
"value": 9
},
{
"name": "青海省",
"value": 8
},
{
"name": "甘肃省",
"value": 4
},
{
"name": "宁夏回族自治区",
"value": 3
},
{
"name": "香港特别行政区",
"value": 2
},
{
"name": "澳门特别行政区",
"value": 14
},
{
"name": "湖北省",
"value": 77
}
]
飞线层
飞线层是中国3D的子组件,支持独立的样式和数据配置,能够以飞线的形式表现地理位置上两个点之间的OD数据
适用场景:可以用来展示两地之间的关联信息,如物流、交易等。
样式设置

飞线层的样式设置包含数据系列:飞线样式、尾迹特效、数据映射。
飞线样式包含线的粗细、样式、颜色、曲度;
尾迹特效包含形状、大小、长度、颜色、特效周期;
数据映射可以根据数值来调整飞线的颜色,包含最大值、最小值、最大值颜色、最小值颜色。
需要注意的是:如果开启了数据映射,那么将以数据映射中配置的样式为准
数据设置
数据字段

飞线层的数据字段包括:from,to,fromName,toName,value,s
from:飞线的起点经纬度信息,需要将数据与图表进行映射;
to:飞线的终点经纬度信息,需要将数据与图表进行映射;
fromName:起点的地点名称,需要将数据与图表进行映射;
toName:终点的地点名称,需要将数据与图表进行映射;
value:飞线代表的值,需要将数据与图表进行映射;
s:数据系列值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"from": "116.405285,39.904989",
"to": "126.642464,45.756967",
"s": "1",
"value": 2,
"fromName": "北京市",
"toName": "哈尔滨市"
},
{
"from": "116.405285,39.904989",
"to": "121.472644,31.231706",
"s": "1",
"value": 4,
"fromName": "北京市",
"toName": "上海市"
},
{
"from": "116.405285,39.904989",
"to": "114.298572,30.584355",
"s": "1",
"value": 3,
"fromName": "北京市",
"toName": "黄石市"
},
{
"from": "116.405285,39.904989",
"to": "113.280637,23.125178",
"s": "1",
"value": 10,
"fromName": "北京市",
"toName": "广州市"
},
{
"from": "116.405285,39.904989",
"to": "110.33119,20.031971",
"s": "1",
"value": 10,
"fromName": "北京市",
"toName": "三亚市"
},
{
"from": "116.405285,39.904989",
"to": "104.065735,30.659462",
"s": "1",
"value": 5,
"fromName": "北京市",
"toName": "成都市"
},
{
"from": "116.405285,39.904989",
"to": "102.712251,25.040609",
"s": "1",
"value": 9,
"fromName": "北京市",
"toName": "昆明市"
},
{
"from": "116.405285,39.904989",
"to": "91.132212,29.660361",
"s": "1",
"value": 8,
"fromName": "北京市",
"toName": "拉萨市"
},
{
"from": "116.405285,39.904989",
"to": "101.778916,36.623178",
"s": "1",
"value": 3,
"fromName": "北京市",
"toName": "西宁市"
},
{
"from": "116.405285,39.904989",
"to": "87.617733,43.792818",
"s": "1",
"value": 1,
"fromName": "北京市",
"toName": "乌鲁木齐市"
},
{
"from": "116.405285,39.904989",
"to": "121.509062,25.044332",
"s": "1",
"value": 6,
"fromName": "北京市",
"toName": "台湾"
},
{
"from": "116.405285,39.904989",
"to": "108.948024,34.263161",
"s": "2",
"value": 7,
"fromName": "北京市",
"toName": "西安市"
}
]
散点层
散点层是中国3D图的子组件,支持独立的样式、数据和交互配置,能够以散点的形式表现地理位置上的点数据信息。
适用场景:在地图上展现北京,上海等重点需要突出的城市的信息。
样式设置

散点层的样式设置可散点样式,文本标注。
散点样式:可以选择散点形状,设置散点大小,散点高度,散点颜色;
文本标注:设置文本标注是否显示,选择文本的位置,标注规则,文本字体字号颜色和文本背景颜色。
数据设置
数据字段

散点层的数据字段包括:
name:必填项,地名信息,需要将数据与图表进行映射;
lon:必填项,经度值,需要将数据与图表进行映射;
lat:必填项,纬度值,需要将数据与图表进行映射;
s:数据系列值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"name": "太原",
"lat": 37.857014,
"lon": 112.549248,
"s": "1"
},
{
"name": "郑州",
"lat": 34.757975,
"lon": 113.665412,
"s": "1"
},
{
"name": "西安",
"lat": 34.263161,
"lon": 108.948024,
"s": "1"
}
]
柱图层
柱图层是中国3D的子组件,支持独立的样式、数据和交互配置,能够以柱图的形式表现地理位置上的点数据信息。
样式设置
样式设置分为柱子样式,文本标注和数据映射。
柱子样式:可以设置最小高度、粗细、侧角、侧角圆润度、颜色。
文本标注:设置文本是否显示,标注规则,文本设置和背景颜色

数据映射:根据数值来调整柱子的颜色,包含最大值、最小值、最大值颜色、最小值颜色。
需要注意的是:如果开启了数据映射,那么将以数据映射中配置的样式为准。

数据设置

柱图层的数据字段包括:name,lat,lon,value,s
name:地点名称,需要将数据与图表进行映射;
lat :柱子的经度信息,需要将数据与图表进行映射;
lon:柱纬度信息,需要将数据与图表进行映射;
value:柱子代表的值,需要将数据与图表进行映射;
s:数据系列值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"name": "北京市",
"lat": 39.904989,
"lon": 116.405285,
"value": 5,
"s": "1"
},
{
"name": "黑龙江省",
"lat": 45.756967,
"lon": 126.642464,
"value": 9,
"s": "1"
},
{
"name": "上海市",
"lat": 31.231706,
"lon": 121.472644,
"value": 3,
"s": "1"
},
{
"name": "广东省",
"lat": 23.125178,
"lon": 113.280637,
"value": 1,
"s": "1"
},
{
"name": "海南省",
"lat": 20.031971,
"lon": 110.33119,
"value": 5,
"s": "1"
},
{
"name": "四川省",
"lat": 30.659462,
"lon": 104.065735,
"value": 9,
"s": "1"
},
{
"name": "湖北省",
"lat": 30.584355,
"lon": 114.298572,
"value": 4,
"s": "1"
},
{
"name": "云南省",
"lat": 25.040609,
"lon": 102.712251,
"value": 5,
"s": "1"
},
{
"name": "西藏自治区",
"lat": 29.660361,
"lon": 91.132212,
"value": 6,
"s": "1"
},
{
"name": "陕西省",
"lat": 34.263161,
"lon": 108.948024,
"value": 7,
"s": "1"
},
{
"name": "青海省",
"lat": 36.623178,
"lon": 101.778916,
"value": 10,
"s": "1"
},
{
"name": "新疆维吾尔自治区",
"lat": 43.792818,
"lon": 87.617733,
"value": 10,
"s": "1"
},
{
"name": "台湾省",
"lat": 25.044332,
"lon": 121.509062,
"value": 8,
"s": "1"
}
]
GIS地图组
GIS地图组中目前支持添加:底层图、区域热力层、热力图、散点图、飞线图,联动热力层,网格热力层和气泡图,支持配置地图的位置、颜色、鼠标交互事件等,能够多角度、多形式地渲染全国各城市地理位置的实时数据。
样式设置

地图组组件样式设置包括 子组件管理,地图基础配置,图表位置和图表尺寸。
子组件管理
新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

删除子组件:鼠标悬停在子组件的名称上,出现删除按钮,点击即可删除子组件。
.8126e91e.png)
配置子组件:
点击子组件名称,进入子组件配置页面。
.8126e91e.png)
数据设置
该组件无数据设置
底图层
底图层也叫地图瓦片层,是基础平面地图的子组件,支持独立的样式和数据配置,包括底图层的瓦片类型或地址、颜色、滤镜等,能够使用自定义的瓦片服务来设置基础平面地图的背景。
样式设置
.8126e91e.png)
底图层的样式设置目前可进行地图风格的设置,地图风格包含12种,可选择进行切换。
数据设置
该组件无数据设置
热力层
热力层是基础平面地图的子组件,支持独立的样式和数据配置,包括热力点的大小、颜色、模糊程度以及经纬度等,能够使用热力点的形式表现地理位置上的点数据信息。
适用场景:热力层适用于要在地图上通过赋予不同颜色以权重来展示在不同位置上数据的值。比如:在地图上展示各地区人口密度情况,人口密度越高,颜色越偏红色;人口密度越低,颜色越偏绿色。
样式设置
.7c702193.png)
热力层的样式设置仅可设置热力点的半径。
数据设置
数据字段
.7a9b6bf9.png)
热力层的数据字段包括:lng,lat,intensity
lng:经度值,需要将数据与图表进行映射;
lat:纬度值,需要将数据与图表进行映射;
intensity:热力值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式
[
{
"lat":30.395141,
"lng":104.180187,
"count":87
},
{
"lat":30.314268,
"lng":104.033458,
"count":58
}
]
网格热力图层
网格热力层与热力层类似,也是通过不同颜色来表示不同位置的数据权重。不同之处在于,网格热力层将地图划分为大小一样的方格,以每一个方格为单位来进行颜色的划分。
适用场景:以小方格为单位,对全国人口密度进行展示。密度越大,颜色越深;密度越小,颜色越浅。
样式设置
.7f7917e6.png)
网格热力层的样式设置可设置边界粗细,边界颜色,填充颜色。
其中填充颜色可以根据数量的多少进行区别,以获得更为准确的数据展示效果。
同时,区域热力图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:
数据设置
数据字段
.c9d2dfc0.png)
网格热力图的数据字段包括:leftTop,RightBottom,Value和info
其中,lefttop和rightbottom是负责喧嚷网格大小的,他们分别是网格的左上和右下坐标。
Value是该网格数值大小,数值越大,颜色越深
Info是负责显示鼠标交互过程中展示的弹窗内容
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式如下:
[{"coords1":[96,30],"coords2":[97,31],"value":0,"id":650},{"coords1":[97,30],"coords2":[98,31],"value":3,"id":750},{"coords1":[98,30],"coords2":[99,31],"value":6,"id":146},{"coords1":[99,30],"coords2":[100,31],"value":9,"id":347},{"coords1":[100,30],"coords2":[101,31],"value":12,"id":225},{"coords1":[101,30],"coords2":[102,31],"value":15,"id":340},{"coords1":[102,30],"coords2":[103,31],"value":18,"id":999},{"coords1":[103,30],"coords2":[104,31],"value":21,"id":435},{"coords1":[104,30],"coords2":[105,31],"value":24,"id":808},{"coords1":[105,30],"coords2":[106,31],"value":27,"id":531},{"coords1":[106,30],"coords2":[107,31],"value":30,"id":153},{"coords1":[107,30],"coords2":[108,31],"value":33,"id":359},{"coords1":[108,30],"coords2":[109,31],"value":36,"id":566},{"coords1":[109,30],"coords2":[110,31],"value":39,"id":991},{"coords1":[110,30],"coords2":[111,31],"value":42,"id":222},{"coords1":[111,30],"coords2":[112,31],"value":45,"id":599},{"coords1":[112,30],"coords2":[113,31],"value":48,"id":844},{"coords1":[113,30],"coords2":[114,31],"value":51,"id":639},{"coords1":[114,30],"coords2":[115,31],"value":54,"id":298},{"coords1":[115,30],"coords2":[116,31],"value":57,"id":95},{"coords1":[96,31],"coords2":[97,32],"value":4,"id":842},{"coords1":[97,31],"coords2":[98,32],"value":7,"id":986},{"coords1":[98,31],"coords2":[99,32],"value":10,"id":15},{"coords1":[99,31],"coords2":[100,32],"value":13,"id":575},{"coords1":[100,31],"coords2":[101,32],"value":16,"id":512},{"coords1":[101,31],"coords2":[102,32],"value":19,"id":42},{"coords1":[102,31],"coords2":[103,32],"value":22,"id":813},{"coords1":[103,31],"coords2":[104,32],"value":25,"id":655},{"coords1":[104,31],"coords2":[105,32],"value":28,"id":599},{"coords1":[105,31],"coords2":[106,32],"value":31,"id":535},{"coords1":[106,31],"coords2":[107,32],"value":34,"id":932},{"coords1":[107,31],"coords2":[108,32],"value":37,"id":639},{"coords1":[108,31],"coords2":[109,32],"value":40,"id":455},{"coords1":[109,31],"coords2":[110,32],"value":43,"id":788},{"coords1":[110,31],"coords2":[111,32],"value":46,"id":109},{"coords1":[111,31],"coords2":[112,32],"value":49,"id":306},{"coords1":[112,31],"coords2":[113,32],"value":52,"id":961},{"coords1":[113,31],"coords2":[114,32],"value":55,"id":181},{"coords1":[114,31],"coords2":[115,32],"value":58,"id":262},{"coords1":[115,31],"coords2":[116,32],"value":61,"id":161},{"coords1":[96,32],"coords2":[97,33],"value":8,"id":599},{"coords1":[97,32],"coords2":[98,33],"value":11,"id":984},{"coords1":[98,32],"coords2":[99,33],"value":14,"id":365},{"coords1":[99,32],"coords2":[100,33],"value":17,"id":147},{"coords1":[100,32],"coords2":[101,33],"value":20,"id":126},{"coords1":[101,32],"coords2":[102,33],"value":23,"id":183},{"coords1":[102,32],"coords2":[103,33],"value":26,"id":642},{"coords1":[103,32],"coords2":[104,33],"value":29,"id":397},{"coords1":[104,32],"coords2":[105,33],"value":32,"id":880},{"coords1":[105,32],"coords2":[106,33],"value":35,"id":133},{"coords1":[106,32],"coords2":[107,33],"value":38,"id":748},{"coords1":[107,32],"coords2":[108,33],"value":41,"id":148},{"coords1":[108,32],"coords2":[109,33],"value":44,"id":240},{"coords1":[109,32],"coords2":[110,33],"value":47,"id":715},{"coords1":[110,32],"coords2":[111,33],"value":50,"id":1},{"coords1":[111,32],"coords2":[112,33],"value":53,"id":717},{"coords1":[112,32],"coords2":[113,33],"value":56,"id":657},{"coords1":[113,32],"coords2":[114,33],"value":59,"id":342},{"coords1":[114,32],"coords2":[115,33],"value":62,"id":332},{"coords1":[115,32],"coords2":[116,33],"value":65,"id":232},{"coords1":[96,33],"coords2":[97,34],"value":12,"id":242},{"coords1":[97,33],"coords2":[98,34],"value":15,"id":670},{"coords1":[98,33],"coords2":[99,34],"value":18,"id":996},{"coords1":[99,33],"coords2":[100,34],"value":21,"id":346},{"coords1":[100,33],"coords2":[101,34],"value":24,"id":582},{"coords1":[101,33],"coords2":[102,34],"value":27,"id":638},{"coords1":[102,33],"coords2":[103,34],"value":30,"id":296},{"coords1":[103,33],"coords2":[104,34],"value":33,"id":934},{"coords1":[104,33],"coords2":[105,34],"value":36,"id":853},{"coords1":[105,33],"coords2":[106,34],"value":39,"id":132},{"coords1":[106,33],"coords2":[107,34],"value":42,"id":242},{"coords1":[107,33],"coords2":[108,34],"value":45,"id":731},{"coords1":[108,33],"coords2":[109,34],"value":48,"id":746},{"coords1":[109,33],"coords2":[110,34],"value":51,"id":89},{"coords1":[110,33],"coords2":[111,34],"value":54,"id":805},{"coords1":[111,33],"coords2":[112,34],"value":57,"id":83},{"coords1":[112,33],"coords2":[113,34],"value":60,"id":755},{"coords1":[113,33],"coords2":[114,34],"value":63,"id":410},{"coords1":[114,33],"coords2":[115,34],"value":66,"id":17},{"coords1":[115,33],"coords2":[116,34],"value":69,"id":129},{"coords1":[96,34],"coords2":[97,35],"value":16,"id":691},{"coords1":[97,34],"coords2":[98,35],"value":19,"id":528},{"coords1":[98,34],"coords2":[99,35],"value":22,"id":483},{"coords1":[99,34],"coords2":[100,35],"value":25,"id":291},{"coords1":[100,34],"coords2":[101,35],"value":28,"id":227},{"coords1":[101,34],"coords2":[102,35],"value":31,"id":815},{"coords1":[102,34],"coords2":[103,35],"value":34,"id":511},{"coords1":[103,34],"coords2":[104,35],"value":37,"id":238},{"coords1":[104,34],"coords2":[105,35],"value":40,"id":299},{"coords1":[105,34],"coords2":[106,35],"value":43,"id":609},{"coords1":[106,34],"coords2":[107,35],"value":46,"id":282},{"coords1":[107,34],"coords2":[108,35],"value":49,"id":600},{"coords1":[108,34],"coords2":[109,35],"value":52,"id":527},{"coords1":[109,34],"coords2":[110,35],"value":55,"id":997},{"coords1":[110,34],"coords2":[111,35],"value":58,"id":94},{"coords1":[111,34],"coords2":[112,35],"value":61,"id":234},{"coords1":[112,34],"coords2":[113,35],"value":64,"id":619},{"coords1":[113,34],"coords2":[114,35],"value":67,"id":48},{"coords1":[114,34],"coords2":[115,35],"value":70,"id":372},{"coords1":[115,34],"coords2":[116,35],"value":73,"id":83},{"coords1":[96,35],"coords2":[97,36],"value":20,"id":978},{"coords1":[97,35],"coords2":[98,36],"value":23,"id":384},{"coords1":[98,35],"coords2":[99,36],"value":26,"id":529},{"coords1":[99,35],"coords2":[100,36],"value":29,"id":753},{"coords1":[100,35],"coords2":[101,36],"value":32,"id":262},{"coords1":[101,35],"coords2":[102,36],"value":35,"id":627},{"coords1":[102,35],"coords2":[103,36],"value":38,"id":161},{"coords1":[103,35],"coords2":[104,36],"value":41,"id":681},{"coords1":[104,35],"coords2":[105,36],"value":44,"id":563},{"coords1":[105,35],"coords2":[106,36],"value":47,"id":43},{"coords1":[106,35],"coords2":[107,36],"value":50,"id":194},{"coords1":[107,35],"coords2":[108,36],"value":53,"id":349},{"coords1":[108,35],"coords2":[109,36],"value":56,"id":972},{"coords1":[109,35],"coords2":[110,36],"value":59,"id":81},{"coords1":[110,35],"coords2":[111,36],"value":62,"id":79},{"coords1":[111,35],"coords2":[112,36],"value":65,"id":119},{"coords1":[112,35],"coords2":[113,36],"value":68,"id":908},{"coords1":[113,35],"coords2":[114,36],"value":71,"id":293},{"coords1":[114,35],"coords2":[115,36],"value":74,"id":173},{"coords1":[115,35],"coords2":[116,36],"value":77,"id":956},{"coords1":[96,36],"coords2":[97,37],"value":24,"id":415},{"coords1":[97,36],"coords2":[98,37],"value":27,"id":845},{"coords1":[98,36],"coords2":[99,37],"value":30,"id":472},{"coords1":[99,36],"coords2":[100,37],"value":33,"id":548},{"coords1":[100,36],"coords2":[101,37],"value":36,"id":544},{"coords1":[101,36],"coords2":[102,37],"value":39,"id":687},{"coords1":[102,36],"coords2":[103,37],"value":42,"id":363},{"coords1":[103,36],"coords2":[104,37],"value":45,"id":248},{"coords1":[104,36],"coords2":[105,37],"value":48,"id":328},{"coords1":[105,36],"coords2":[106,37],"value":51,"id":603},{"coords1":[106,36],"coords2":[107,37],"value":54,"id":201},{"coords1":[107,36],"coords2":[108,37],"value":57,"id":413},{"coords1":[108,36],"coords2":[109,37],"value":60,"id":910},{"coords1":[109,36],"coords2":[110,37],"value":63,"id":867},{"coords1":[110,36],"coords2":[111,37],"value":66,"id":19},{"coords1":[111,36],"coords2":[112,37],"value":69,"id":496},{"coords1":[112,36],"coords2":[113,37],"value":72,"id":602},{"coords1":[113,36],"coords2":[114,37],"value":75,"id":805},{"coords1":[114,36],"coords2":[115,37],"value":78,"id":348},{"coords1":[115,36],"coords2":[116,37],"value":81,"id":963},{"coords1":[96,37],"coords2":[97,38],"value":28,"id":152},{"coords1":[97,37],"coords2":[98,38],"value":31,"id":256},{"coords1":[98,37],"coords2":[99,38],"value":34,"id":736},{"coords1":[99,37],"coords2":[100,38],"value":37,"id":327},{"coords1":[100,37],"coords2":[101,38],"value":40,"id":694},{"coords1":[101,37],"coords2":[102,38],"value":43,"id":970},{"coords1":[102,37],"coords2":[103,38],"value":46,"id":50},{"coords1":[103,37],"coords2":[104,38],"value":49,"id":896},{"coords1":[104,37],"coords2":[105,38],"value":52,"id":498},{"coords1":[105,37],"coords2":[106,38],"value":55,"id":147},{"coords1":[106,37],"coords2":[107,38],"value":58,"id":909},{"coords1":[107,37],"coords2":[108,38],"value":61,"id":716},{"coords1":[108,37],"coords2":[109,38],"value":64,"id":165},{"coords1":[109,37],"coords2":[110,38],"value":67,"id":650},{"coords1":[110,37],"coords2":[111,38],"value":70,"id":496},{"coords1":[111,37],"coords2":[112,38],"value":73,"id":298},{"coords1":[112,37],"coords2":[113,38],"value":76,"id":136},{"coords1":[113,37],"coords2":[114,38],"value":79,"id":115},{"coords1":[114,37],"coords2":[115,38],"value":82,"id":849},{"coords1":[115,37],"coords2":[116,38],"value":85,"id":568},{"coords1":[96,38],"coords2":[97,39],"value":32,"id":186},{"coords1":[97,38],"coords2":[98,39],"value":35,"id":347},{"coords1":[98,38],"coords2":[99,39],"value":38,"id":472},{"coords1":[99,38],"coords2":[100,39],"value":41,"id":7},{"coords1":[100,38],"coords2":[101,39],"value":44,"id":947},{"coords1":[101,38],"coords2":[102,39],"value":47,"id":510},{"coords1":[102,38],"coords2":[103,39],"value":50,"id":684},{"coords1":[103,38],"coords2":[104,39],"value":53,"id":254},{"coords1":[104,38],"coords2":[105,39],"value":56,"id":735},{"coords1":[105,38],"coords2":[106,39],"value":59,"id":26},{"coords1":[106,38],"coords2":[107,39],"value":62,"id":813},{"coords1":[107,38],"coords2":[108,39],"value":65,"id":165},{"coords1":[108,38],"coords2":[109,39],"value":68,"id":747},{"coords1":[109,38],"coords2":[110,39],"value":71,"id":610},{"coords1":[110,38],"coords2":[111,39],"value":74,"id":71},{"coords1":[111,38],"coords2":[112,39],"value":77,"id":836},{"coords1":[112,38],"coords2":[113,39],"value":80,"id":141},{"coords1":[113,38],"coords2":[114,39],"value":83,"id":118},{"coords1":[114,38],"coords2":[115,39],"value":86,"id":856},{"coords1":[115,38],"coords2":[116,39],"value":89,"id":807},{"coords1":[96,39],"coords2":[97,40],"value":36,"id":929},{"coords1":[97,39],"coords2":[98,40],"value":39,"id":786},{"coords1":[98,39],"coords2":[99,40],"value":42,"id":843},{"coords1":[99,39],"coords2":[100,40],"value":45,"id":573},{"coords1":[100,39],"coords2":[101,40],"value":48,"id":355},{"coords1":[101,39],"coords2":[102,40],"value":51,"id":204},{"coords1":[102,39],"coords2":[103,40],"value":54,"id":565},{"coords1":[103,39],"coords2":[104,40],"value":57,"id":338},{"coords1":[104,39],"coords2":[105,40],"value":60,"id":898},{"coords1":[105,39],"coords2":[106,40],"value":63,"id":756},{"coords1":[106,39],"coords2":[107,40],"value":66,"id":742},{"coords1":[107,39],"coords2":[108,40],"value":69,"id":870},{"coords1":[108,39],"coords2":[109,40],"value":72,"id":284},{"coords1":[109,39],"coords2":[110,40],"value":75,"id":644},{"coords1":[110,39],"coords2":[111,40],"value":78,"id":63},{"coords1":[111,39],"coords2":[112,40],"value":81,"id":111},{"coords1":[112,39],"coords2":[113,40],"value":84,"id":582},{"coords1":[113,39],"coords2":[114,40],"value":87,"id":90},{"coords1":[114,39],"coords2":[115,40],"value":90,"id":885},{"coords1":[115,39],"coords2":[116,40],"value":93,"id":175}]
区域热力层
区域热力层是基础平面地图的子组件,支持独立的样式、数据和交互配置,包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等,能够以热力区域的形式表现地理位置上的区域信息。
适用场景:在地图中通过赋予不同颜色以范围,展示某一自定义区域的数据
样式设置

区域热力层的样式设置包含边界颜色、边界粗细,填充颜色范围,可设置其热力区域的最大值与最小值。
同时,区域热力图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:
.a0c0e48d.png)
数据设置
.88882a28.png)
数据字段
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"id":"65",
"intensity":"550",
"name":"新疆",
"cp":[
84.9023,
42.148
],
"childNum":18
},
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
96.416,
42.7588
],
[
96.416,
42.7148
],
[
95.9766,
42.4951
],
[
96.0645,
42.3193
],
[
96.2402,
42.2314
],
[
95.9766,
41.9238
],
[
95.2734,
41.6162
],
[
95.1855,
41.792
],
[
94.5703,
41.4844
],
[
94.043,
41.0889
],
[
93.8672,
40.6934
],
[
93.0762,
40.6494
],
[
92.6367,
39.6387
],
[
92.373,
39.3311
],
[
92.373,
39.1113
],
[
92.373,
39.0234
],
[
90.1758,
38.4961
],
[
90.3516,
38.2324
],
[
90.6152,
38.3203
],
[
90.5273,
37.8369
],
[
91.0547,
37.4414
],
[
91.3184,
37.0898
],
[
90.7031,
36.7822
],
[
90.791,
36.6064
],
[
91.0547,
36.5186
],
[
91.0547,
36.0791
],
[
90.8789,
36.0352
],
[
90,
36.2549
],
[
89.9121,
36.0791
],
[
89.7363,
36.0791
],
[
89.209,
36.2988
],
[
88.7695,
36.3428
],
[
88.5938,
36.4746
],
[
87.3633,
36.4307
],
[
86.2207,
36.167
],
[
86.1328,
35.8594
],
[
85.6055,
35.6836
],
[
85.0781,
35.7275
],
[
84.1992,
35.376
],
[
83.1445,
35.4199
],
[
82.8809,
35.6836
],
[
82.4414,
35.7275
],
[
82.002,
35.332
],
[
81.6504,
35.2441
],
[
80.4199,
35.4199
],
[
80.2441,
35.2881
],
[
80.332,
35.1563
],
[
80.2441,
35.2002
],
[
79.8926,
34.8047
],
[
79.8047,
34.4971
],
[
79.1016,
34.4531
],
[
79.0137,
34.3213
],
[
78.2227,
34.7168
],
[
78.0469,
35.2441
],
[
78.0469,
35.5078
],
[
77.4316,
35.4639
],
[
76.8164,
35.6396
],
[
76.5527,
35.8594
],
[
76.2012,
35.8154
],
[
75.9375,
36.0352
],
[
76.0254,
36.4746
],
[
75.8496,
36.6943
],
[
75.498,
36.7383
],
[
75.4102,
36.958
],
[
75.0586,
37.002
],
[
74.8828,
36.9141
],
[
74.7949,
37.0459
],
[
74.5313,
37.0898
],
[
74.5313,
37.2217
],
[
74.8828,
37.2217
],
[
75.1465,
37.4414
],
[
74.8828,
37.5732
],
[
74.9707,
37.749
],
[
74.8828,
38.4521
],
[
74.3555,
38.6719
],
[
74.1797,
38.6719
],
[
74.0918,
38.54
],
[
73.8281,
38.584
],
[
73.7402,
38.8477
],
[
73.8281,
38.9795
],
[
73.4766,
39.375
],
[
73.916,
39.5068
],
[
73.916,
39.6826
],
[
73.8281,
39.7705
],
[
74.0039,
40.0342
],
[
74.8828,
40.3418
],
[
74.7949,
40.5176
],
[
75.2344,
40.4297
],
[
75.5859,
40.6494
],
[
75.7617,
40.2979
],
[
76.377,
40.3857
],
[
76.9043,
41.001
],
[
77.6074,
41.001
],
[
78.1348,
41.2207
],
[
78.1348,
41.3965
],
[
80.1563,
42.0557
],
[
80.2441,
42.2754
],
[
80.1563,
42.627
],
[
80.2441,
42.8467
],
[
80.5078,
42.8906
],
[
80.4199,
43.0664
],
[
80.7715,
43.1982
],
[
80.4199,
44.165
],
[
80.4199,
44.6045
],
[
79.9805,
44.8242
],
[
79.9805,
44.9561
],
[
81.7383,
45.3955
],
[
82.0898,
45.2197
],
[
82.5293,
45.2197
],
[
82.2656,
45.6592
],
[
83.0566,
47.2412
],
[
83.6719,
47.0215
],
[
84.7266,
47.0215
],
[
84.9023,
46.8896
],
[
85.5176,
47.0654
],
[
85.6934,
47.2852
],
[
85.5176,
48.1201
],
[
85.7813,
48.4277
],
[
86.5723,
48.5596
],
[
86.8359,
48.8232
],
[
86.748,
48.9551
],
[
86.8359,
49.1309
],
[
87.8027,
49.1748
],
[
87.8906,
48.999
],
[
87.7148,
48.9111
],
[
88.0664,
48.7354
],
[
87.9785,
48.6035
],
[
88.5059,
48.3838
],
[
88.6816,
48.1641
],
[
89.1211,
47.9883
],
[
89.5605,
48.0322
],
[
89.7363,
47.8564
],
[
90.0879,
47.8564
],
[
90.3516,
47.6807
],
[
90.5273,
47.2412
],
[
90.8789,
46.9775
],
[
91.0547,
46.582
],
[
90.8789,
46.3184
],
[
91.0547,
46.0107
],
[
90.7031,
45.7471
],
[
90.7031,
45.5273
],
[
90.8789,
45.2197
],
[
91.582,
45.0879
],
[
93.5156,
44.9561
],
[
94.7461,
44.3408
],
[
95.3613,
44.2969
],
[
95.3613,
44.0332
],
[
95.5371,
43.9014
],
[
95.8887,
43.2422
],
[
96.3281,
42.9346
],
[
96.416,
42.7588
]
]
]
}
}
]
}
2.5D地图
2.5D地图是区域热力图的升级,在区域热力图的基础上,通过SVG自动渲染具有立体效果的2.5D地图。
适用场景:在地图中通过赋予不同颜色以范围,展示某一自定义区域的数据。
样式设置


2.5D地图的样式设置包含边界颜色、边界粗细,填充颜色范围,可设置其热力区域的最大值与最小值。
同时,2.5D地图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:
.a0c0e48d.png)
数据设置
.88882a28.png)
数据字段
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
数据格式
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"id":"65",
"intensity":"550",
"name":"新疆",
"cp":[
84.9023,
42.148
],
"childNum":18
},
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
96.416,
42.7588
],
[
96.416,
42.7148
],
[
95.9766,
42.4951
],
[
96.0645,
42.3193
],
[
96.2402,
42.2314
],
[
95.9766,
41.9238
],
[
95.2734,
41.6162
],
[
95.1855,
41.792
],
[
94.5703,
41.4844
],
[
94.043,
41.0889
],
[
93.8672,
40.6934
],
[
93.0762,
40.6494
],
[
92.6367,
39.6387
],
[
92.373,
39.3311
],
[
92.373,
39.1113
],
[
92.373,
39.0234
],
[
90.1758,
38.4961
],
[
90.3516,
38.2324
],
[
90.6152,
38.3203
],
[
90.5273,
37.8369
],
[
91.0547,
37.4414
],
[
91.3184,
37.0898
],
[
90.7031,
36.7822
],
[
90.791,
36.6064
],
[
91.0547,
36.5186
],
[
91.0547,
36.0791
],
[
90.8789,
36.0352
],
[
90,
36.2549
],
[
89.9121,
36.0791
],
[
89.7363,
36.0791
],
[
89.209,
36.2988
],
[
88.7695,
36.3428
],
[
88.5938,
36.4746
],
[
87.3633,
36.4307
],
[
86.2207,
36.167
],
[
86.1328,
35.8594
],
[
85.6055,
35.6836
],
[
85.0781,
35.7275
],
[
84.1992,
35.376
],
[
83.1445,
35.4199
],
[
82.8809,
35.6836
],
[
82.4414,
35.7275
],
[
82.002,
35.332
],
[
81.6504,
35.2441
],
[
80.4199,
35.4199
],
[
80.2441,
35.2881
],
[
80.332,
35.1563
],
[
80.2441,
35.2002
],
[
79.8926,
34.8047
],
[
79.8047,
34.4971
],
[
79.1016,
34.4531
],
[
79.0137,
34.3213
],
[
78.2227,
34.7168
],
[
78.0469,
35.2441
],
[
78.0469,
35.5078
],
[
77.4316,
35.4639
],
[
76.8164,
35.6396
],
[
76.5527,
35.8594
],
[
76.2012,
35.8154
],
[
75.9375,
36.0352
],
[
76.0254,
36.4746
],
[
75.8496,
36.6943
],
[
75.498,
36.7383
],
[
75.4102,
36.958
],
[
75.0586,
37.002
],
[
74.8828,
36.9141
],
[
74.7949,
37.0459
],
[
74.5313,
37.0898
],
[
74.5313,
37.2217
],
[
74.8828,
37.2217
],
[
75.1465,
37.4414
],
[
74.8828,
37.5732
],
[
74.9707,
37.749
],
[
74.8828,
38.4521
],
[
74.3555,
38.6719
],
[
74.1797,
38.6719
],
[
74.0918,
38.54
],
[
73.8281,
38.584
],
[
73.7402,
38.8477
],
[
73.8281,
38.9795
],
[
73.4766,
39.375
],
[
73.916,
39.5068
],
[
73.916,
39.6826
],
[
73.8281,
39.7705
],
[
74.0039,
40.0342
],
[
74.8828,
40.3418
],
[
74.7949,
40.5176
],
[
75.2344,
40.4297
],
[
75.5859,
40.6494
],
[
75.7617,
40.2979
],
[
76.377,
40.3857
],
[
76.9043,
41.001
],
[
77.6074,
41.001
],
[
78.1348,
41.2207
],
[
78.1348,
41.3965
],
[
80.1563,
42.0557
],
[
80.2441,
42.2754
],
[
80.1563,
42.627
],
[
80.2441,
42.8467
],
[
80.5078,
42.8906
],
[
80.4199,
43.0664
],
[
80.7715,
43.1982
],
[
80.4199,
44.165
],
[
80.4199,
44.6045
],
[
79.9805,
44.8242
],
[
79.9805,
44.9561
],
[
81.7383,
45.3955
],
[
82.0898,
45.2197
],
[
82.5293,
45.2197
],
[
82.2656,
45.6592
],
[
83.0566,
47.2412
],
[
83.6719,
47.0215
],
[
84.7266,
47.0215
],
[
84.9023,
46.8896
],
[
85.5176,
47.0654
],
[
85.6934,
47.2852
],
[
85.5176,
48.1201
],
[
85.7813,
48.4277
],
[
86.5723,
48.5596
],
[
86.8359,
48.8232
],
[
86.748,
48.9551
],
[
86.8359,
49.1309
],
[
87.8027,
49.1748
],
[
87.8906,
48.999
],
[
87.7148,
48.9111
],
[
88.0664,
48.7354
],
[
87.9785,
48.6035
],
[
88.5059,
48.3838
],
[
88.6816,
48.1641
],
[
89.1211,
47.9883
],
[
89.5605,
48.0322
],
[
89.7363,
47.8564
],
[
90.0879,
47.8564
],
[
90.3516,
47.6807
],
[
90.5273,
47.2412
],
[
90.8789,
46.9775
],
[
91.0547,
46.582
],
[
90.8789,
46.3184
],
[
91.0547,
46.0107
],
[
90.7031,
45.7471
],
[
90.7031,
45.5273
],
[
90.8789,
45.2197
],
[
91.582,
45.0879
],
[
93.5156,
44.9561
],
[
94.7461,
44.3408
],
[
95.3613,
44.2969
],
[
95.3613,
44.0332
],
[
95.5371,
43.9014
],
[
95.8887,
43.2422
],
[
96.3281,
42.9346
],
[
96.416,
42.7588
]
]
]
}
}
]
}
联动热力图层
联动热力层与区域热力层类似,均为借助不用颜色展示不同区域数据值的大小,区别在于联动热力层使用adcode码展示坐标信息,而区域热力层则是借助经纬度坐标点完成各个区域地理位置信息的勾勒。除此之外,两种图层的适用场景相同。
样式设置
.1563c64e.png)
基础设置
下钻层级可以选择在预览地图中我们是否会点击地图进行下钻以及下钻向下的最小层级。
联动热力层的样式设置可设置边界粗细,边界颜色,填充颜色。
其中填充颜色可以根据数量的多少进行区别,以获得更为准确的数据展示效果。
提示框设置
同时,联动热力层也支持提示框设置,目前支持:无提示框、提示框一直存在和鼠标划过提示框这三种模式,并可以由用户对提示框中的文本进行自定义设置,对于提示框的边框线条粗细,边框线条颜色和背景都可以进行配置,提示框背景支持颜色背景和图片背景两种设置,可以自主选择。
按钮设置 联动热力层也支持按钮设置,可以对按钮的文本和背景颜色进行设置。
数据设置
数据字段
.819076b9.png)
联动热力层的数据字段包括:adcode,value和tooltip
其中,adcode是国家行政区域划分标准码
value是该区域数值大小,数值大小可以根据样式设置中的颜色进行展示
tooltip是负责显示鼠标交互过程中展示的提示框内容
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"adcode":150000,"value":40,"info":"弹窗信息对应数据info;可用英文分号换行"},{"adcode":610000,"value":20,"info":"根据区域adcode可配置弹窗和颜色"},{"adcode":610800,"value":20,"info":""},{"adcode":610802,"value":20,"info":""},{"adcode":110000,"value":30,"info":""}]
交互设置
可以将adcode的值绑定到交互变量中,交互变量名称可自行设置,实现联动热力层和其它组件之间的交互。
飞线层
飞线层是基础平面地图的子组件,支持独立的样式和数据配置,能够以飞线的形式表现地理位置上两个点之间的OD数据
适用场景:可以用来展示两地之间的关联信息,如物流、交易等。
样式设置

飞线层的样式设置包含默认设置和提示框设置。
默认设置中可以设置气泡的位置在目的地还是出发地,以及气泡尺寸的最大最小值,气泡的填充颜色。
同时,飞线层也支持提示框设置,目前支持:无提示和鼠标滑过提示这两种模式,并可以由用户对提示框中的文本进行自定义设置,对于提示框的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:

数据设置
数据字段
.d02dd7ca.png)
飞线层的数据字段包括:from,to,labels,value
from:飞线的起点经纬度信息,需要将数据与图表进行映射;
to:飞线的终点经纬度信息,需要将数据与图表进行映射;
labels:起终点的地点名称,需要将数据与图表进行映射;
value:飞线代表的值,需要将数据与图表进行映射;
tooltip:提示框内容,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"labels":"北京,新疆","from":"116.404844,39.91405","to":"84.9023,42.148","size":10,"tooltip":"我是tooltip"},{"labels":"北京,西藏","from":"116.404844,39.91405","to":"87.8695,31.6846","size":15,"tooltip":"我是西藏"},{"labels":"北京,内蒙古","from":"116.404844,39.9140","to":"112.5977,41.3408","size":20,"tooltip":"我是内蒙古"},{"labels":"北京,四川","from":"116.404844,39.91405","to":"101.9199,30.1904","size":15,"tooltip":"我是四川"},{"labels":"北京,黑龙江","from":"116.404844,39.91405","to":"126.1445,48.7156","size":10,"tooltip":"我是黑龙江"}]
散点层
散点层是基础平面地图的子组件,支持独立的样式、数据和交互配置,能够以散点的形式表现地理位置上的点数据信息。
适用场景:在地图上展现北京,上号,成都等主要城市的信息。
样式设置

散点层的样式设置可设置 默认配置,提示框设置,弹窗样式。
默认设置
显示类型
.b657965d.png)
散点层支持用户选择散点的类型,可以是系统预置的散点类型,也可以用户自主上传图标。
当用户选择系统预置的散点时,可进行如下设置:
散点类型
.3730555e.png)
散点类型目前支持以上六种,选择某个类型,地图上的散点图标会有对应的变化。
散点颜色

散点颜色支持用户自定义设置。
并且可以根据数据中的value值进行不同value范围显示不同的散点颜色,如上图所示。
标注中心设置:可以自主选择以图标中心点或者图标底部中心两种设置。
散点尺寸
散点尺寸指在地图上的散点的尺寸在最小value值和最大value值之间线性变化,单位为px。
如上图所示,此处可设置散点的最小尺寸和最大尺寸。
当用户选择上传图标时,可进行如下设置:
图标图片:支持链接形式,或本地上传;
标注中心:指以图标的哪个点与经纬度对应,包含两个选择 图标中心点,图标底部中心点;
图标尺寸:指在地图上的图标的尺寸在最小value值和最大value值之间线性变化,单位为px。
如上图所示,此处可设置图标的最小尺寸和最大尺寸。
用户还可以自主设置自适应散点位置,可选择是或者否,以及设置适应边距。
聚合设置
.0832137c.png)
用户可以选择是否使用聚合,聚合的范围以及图标的基础半径。设置鼠标划过时是否显示轮廓,并可对数字的文本样式进行设置。还可以通过链接的形式导入背景图片。
提示框设置
.2d69e3e8.png)
提示框设置可以设置提示框显示形式。
提示框内部文本设置,提示框边框粗细,边框颜色,以及对提示框背景进行设置。还可以对提示框的尺寸和位置进行设置。
弹窗设置

弹窗设置里包括,弹窗宽度,弹窗高度,边框线条,边框颜色和背景颜色的设置。
动作设置
可以设置单击时响应的结果:可选择无动作,或者单击实现页面跳转,或者单击出现的是弹窗三种方式。
数据设置
数据字段
.85f6686f.png)
散点层的数据字段包括:
lng:必填项,经度值,需要将数据与图表进行映射;
lat:必填项,纬度值,需要将数据与图表进行映射;
id:数据的id值;
tooltip:提示框所显示的文本;
value:选填项,数值,需要将数据与图表进行映射;
info:选填项,弹窗中的文字;
link:选填项,点击散点后跳转的url链接;
iframe:选填项,点击后生成iframe的url链接。
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"lat":31.395141,"lng":100.180187,"id":"33","count":187,"text":"文字信息对应数据info;可用分号换行","url":"http://monet.urban-computing.cn/monet-doc/"},{"lat":37.314268,"lng":104.033458,"id":"34","count":58,"text":"散点支持弹窗交互","url":"http://monet.urban-computing.cn/monet-doc/"},{"lat":35.517994,"lng":112.050051,"count":31,"id":"35","text":"弹框","url":"http://monet.urban-computing.cn/monet-doc/"}]
交互设置
.ab237cf8.png)
标签点击响应事件默认开启。
可将散点的经纬度绑定到变量中,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 “:变量名称”的方式使用变量,完成数据的动态展示。
圈选层
圈选层是在地图组件的基础上,以某一位置为圆心,设定距离为半径在图中进行圈选。主要适用场景为:体现某一城市的指标向周边辐射的范围。
样式设置
.6f0c2e3b.png)
地图圈选层样式包含圈选样式和按钮样式;
圈选样式包含:背景颜色设置,边框颜色设置,边框宽度和边框样式设置
按钮样式包含:文本设置,背景颜色以及边框设置和按钮位置设置。
边框设置:对边框的线条粗细,线条颜色,线条样式,圆角设置进行设置。
按钮位置设置:可自行设置按钮的横纵坐标。

数据设置
数据字段

圈选层的数据字段包含:lng,lat和distance
lng和lat是中心点的坐标
distance是圈选出来的距离
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"lng":116,"lat":39,"distance":100}]
交互设置

可将圈选层的经纬度以及距离绑定到变量上,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 ‘:变量名称’的方式使用变量,完成数据的动态展示。
呼吸气泡层
呼吸气泡层是2D地图的子组件,支持独立的样式、数据和交互配置,能够以呼吸气泡的形式表现地理位置上的点数据信息。
适用场景:以大小不同的气泡样式来体现某地区或区域数据的大小。例如,借助大小不同的气泡展现不同城市的人口数量。
样式设置

呼吸气泡层的样式设置包含默认配置和提示框配置两种。
默认配置:可设置气泡类型,气泡颜色以及气泡的最大值和最小值。
气泡类型
气泡类型目前支持三种:实心,空心和圈点。选择某个类型,地图上的气泡图标会有对应的变化。
气泡颜色

气泡颜色支持用户自定义设置。
气泡尺寸

气泡尺寸指在地图上的散点的尺寸范围区间在最小值和最大值之间线性变化,单位为px。
提示框设置:

提示框设置中可以设置提示框展示方式,提示框的文本设置,边框粗细,边框颜色以及背景设置。
提示框展示方式:目前支持四种:无提示,提示一直存在,鼠标滑过提示和点击提示四种。
背景来源:包含颜色背景和图片背景两种。
颜色背景则选择对应的颜色即可,支持rgba颜色设置。
图片背景:支持自定义上传所需要的图片。
数据设置
数据字段

呼吸气泡层的数据字段包括:lng,lat,value
lng:经度值,需要将数据与图表进行映射;
lat:纬度值,需要将数据与图表进行映射;
value:数值,需要将数据与图表进行映射;
tooltip:设置提示框内容,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"lat":30.395141,"lng":104.180187,"count":87,"tooltip":"文字信息对应数据tooltip;可用分号换行"},{"lat":31.314268,"lng":113.033458,"count":58},{"lat":32.517994,"lng":112.050051,"count":51},{"lat":33.509955,"lng":115.07636,"count":36},{"lat":34.308593,"lng":116.033371,"count":71},{"lat":35.698055,"lng":103.81029,"count":29},{"lat":36.443159,"lng":117.052512,"count":12},{"lat":37.512241,"lng":104.069421,"count":21},{"lat":38.513178,"lng":118.059847,"count":47},{"lat":39.755745,"lng":103.783377,"count":77},{"lat":39.395141,"lng":108.180187,"count":41},{"lat":31.314268,"lng":103.033458,"count":68},{"lat":30.509955,"lng":107.07636,"count":55},{"lat":30.308593,"lng":120.033371,"count":93},{"lat":39.698055,"lng":101.81029,"count":55},{"lat":34.443159,"lng":105.052512,"count":59},{"lat":31.512241,"lng":106.069421,"count":41},{"lat":31.513178,"lng":105.059847,"count":78},{"lat":35.755745,"lng":108.783377,"count":45}]
轨迹层
地租组件的字组件,在地图中,以线条形式展现某一事物运行轨迹。例如:在地图中展示某一物流产品输运过程中的轨迹。
样式设置

轨迹层的样式设置可设置轨迹样式和重置按钮设置。
轨迹样式
可以对轨迹的线条颜色,线条宽度,线条样式以及轨迹显示的位置进行设置。默认只是在原来图层上加上轨迹,自适应居中则是在原来图层上加上轨迹后,轨迹还可以居于地图中央显示。
重置按钮设置
可以对按钮的文本,背景颜色,边框设置以及按钮位置进行设置。
边框设置:包含边框的粗细,线条,颜色进行设置。
按钮位置:可设置按钮的横纵坐标。
数据设置
数据字段
.811b7bc2.png)
区域联动层的数据字段包括:points
points就是组成轨迹层轨迹的点的集合
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{"points":"122.68,45.51;122.43,37.77;123.43,34.77;125.43,36.77"},{"points":"124.68,43.51;126.43,33.77"}]
弹框散点层
弹框散点层是基础平面地图的子组件,支持独立的样式、数据和交互配置,能够以散点的形式表现地理位置上的点数据信息,同时支持点击时出现弹框显示补充信息。
适用场景:需要在地图中以不同大小图标展示不同位置数据大小的同时,还可以通过点击图标生成弹出框来展示额外信息。
样式设置
.4bcf00a8.png)
散点层的样式设置可设置 默认配置,弹窗样式,交互设置。
默认设置
.51ef098a.png)
散点层支持用户选择散点的类型,可以是系统预置的散点类型,也可以用户自主上传图标。
当用户选择系统预置的散点时,可进行如下设置:
散点类型
散点类型目前支持六种,选择某个类型,地图上的散点图标会有对应的变化。
散点颜色
散点颜色支持用户自定义设置。
并且可以根据数据中的value值进行不同value范围显示不同的散点颜色,如上图所示。
散点尺寸
散点尺寸指在地图上的散点的尺寸在最小value值和最大value值之间线性变化,单位为px。
如上图所示,此处可设置散点的最小尺寸和最大尺寸。
图标图片:支持链接形式,或本地上传;
标注中心:指以图标的哪个点与经纬度对应,包含两个选择 图标中心点,图标底部中心点;
图标尺寸:指在地图上的图标的尺寸在最小value值和最大value值之间线性变化,单位为px。
如上图所示,此处可设置图标的最小尺寸和最大尺寸。
弹窗设置

弹窗设置:设置散点的弹窗样式,包括对弹出框的文本设置及边框的设置。
提示框设置

可对提示框内显示的文本进行字体,字号,粗细颜色的设置;可以设置提示框的背景颜色以及提示框的边框线条颜色及粗细。
交互设置
交互设置:点击或者操作散点时的交互设置,可出现弹窗,或者跳转到其他页面;
数据设置
数据字段
.122fd0a0.png)
散点层的数据字段包括:lng,lat,value
lng:必填项,经度值,需要将数据与图表进行映射;
lat:必填项,纬度值,需要将数据与图表进行映射;
value:选填项,数值,需要将数据与图表进行映射;
info:选填项,弹窗中的文字,支持使用
进行换行;
url:选填项,点击散点后跳转的url链接;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[{
"lat": 31.395141,
"lng": 100.180187,
"count": 87,
"text": "提示文字",
"url": "http://monet.urban-computing.cn/monet-doc/"
}, {
"lat": 33.314268,
"lng": 102.033458,
"count": 58,
"text": "提示文字"
}, {
"lat": 35.517994,
"lng": 106.050051,
"count": 51
}, {
"lat": 37.509955,
"lng": 108.07636,
"count": 36
}, {
"lat": 39.308593,
"lng": 104.033371,
"count": 71
}, {
"lat": 30.698055,
"lng": 110.81029,
"count": 29
}, {
"lat": 40.698055,
"lng": 112.81029,
"count": 29
}, {
"lat": 41.443159,
"lng": 114.052512,
"count": 12
}, {
"lat": 43.514083,
"lng": 126.066373,
"count": 73
}, {
"lat": 25.516678,
"lng": 114.059902,
"count": 2
}, {
"lat": 28.512241,
"lng": 112.069421,
"count": 21
}, {
"lat": 29.513178,
"lng": 103.059847,
"count": 47
}, {
"lat": 30.755745,
"lng": 105.783377,
"count": 77
}]
交互设置
.1105648e.png)
标签点击响应事件默认开启。
可将散点的经纬度绑定到变量中,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 “:变量名称”的方式使用变量,完成数据的动态展示。
3D地球组
样式设置

3D地球组组件样式设置包括 子组件管理,地球基础配置,图表位置和图表尺寸。
子组件管理
新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

删除子组件:鼠标悬停在子组件的名称上,出现删除按钮,点击即可删除子组件。

配置子组件:
点击子组件名称,进入子组件配置页面。

地球基础配置管理

地球基础配置包含 环境光配置、地球转速、地球距离,是否开启夜晚效果,是否转动 五个基础配置。
数据设置
该组件无数据设置
3D球体层
样式设置

3D球体层的样式设置目前可进行球体风格的设置,地图风格包含3种,可选择进行切换。
数据设置
该组件无数据设置
飞线层
飞线层是3D地球层的子组件,用以在地球上展示某些轨迹。例如:展示国际航班航线。
样式设置

飞线层的样式设置可设置飞线样式和尾迹样式。
飞线样式可设置飞线颜色和粗细;
尾迹样式可设置尾迹颜色,宽度和周期;
数据设置
数据字段
.98be7eff.png)
飞线层的数据字段包括:from,to,labels,value
from:飞线的起点经纬度信息,需要将数据与图表进行映射;
to:飞线的终点经纬度信息,需要将数据与图表进行映射;
labels:起终点的地点名称,需要将数据与图表进行映射;
value:飞线代表的值,需要将数据与图表进行映射;
在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。
目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。
当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。
当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。
[
{
"labels":[
"北京",
"新疆"
],
"from":[
116.404844,
39.91405
],
"to":[
84.9023,
42.148
],
"value":84.9023
},
{
"labels":[
"北京",
"西藏"
],
"from":[
116.404844,
39.91405
],
"to":[
87.8695,
31.6846
],
"value":87.8695
}
]
云层
3D地球字组件,用以在3D地球上方展示云层,起到装饰的作用。
样式设置
.22ff02cb.png)
云层的样式设置仅可以设置云层高度,范围是5-40 ,数值越大云层距离地球越远。
数据设置
该组件无数据设置和交互设置。
三维城市
组件说明
三维城市组件可实现对街市街景的真实建模、特效添加、镜头移动路径设置等效果。
组件对接了51world云渲染平台的相关服务支持。该组件主要以三维形式展现城市建筑群及相应地理信息数据,支持通过渲染口令的方式修改三维模型,可在三维城市基础上叠加散点、场景特效等地理信息子组件。
效果案例

组件结构
三维城市组件主要由「父组件」及「子组件」两部分组成,可根据实际场景分别定义对应配置项。每个组件都对应样式、数据、交互三部分。


父组件配置
子组件管理
组件创建时,系统会默认携带常用子组件,使用者可根据实际场景对子组件进行新增或编辑。

样式
①基本属性
位置尺寸:
图表位置包括组件的横坐标和纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
图表尺寸包括组件的宽度和高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。
旋转角度包括组件的宣传角度,单位为deg

②服务设置
服务设置中三维可切换城市底板地图服务,可自定义三维城市地图。将复制的渲染口令粘贴至服务设置中,即可完成三维城市底图的替换。

渲染口令及场景简介一览
场景名称:城市大脑_4.0
场景介绍:“城市大脑_4.0”案例基于51AES技术方案,使用GIS数据自动生成上海全域三维场景。 打造更精细、更完善、更科学、更智慧、更高效的“一张网”,让城市管理像绣花针一样精细。
渲染口令:e3DF5C11

场景名称:园区_4.0
场景介绍:“园区_4.0”案例基于51AES技术方案,使用GIS数据还原接近真实世界的三维场景.在此基础上完整还原园区内部建筑,实现数字孪生智慧园区。
渲染口令:C52E828b

场景名称:景区_4.0
场景介绍:“景区_4.0”案例基于51AES技术方案,使用GIS数据还原接近真实世界的三维场景,在此基础上完整还原景区建筑,实现数字孪生智慧景区。
渲染口令:12E0299D

场景名称:广州_4.0
场景介绍:“广州_4.0”案例基于51AES技术方案,使用GIS数据自动生成接近真实世界的三维场景。
渲染口令:DF96469D

场景名称:新区_4.0
场景介绍:“新区_4.0”案例基于51AES技术方案,自动生成郑州三维场景,实现智慧新区可视化管理。
渲染口令:eB7Ed0b0

场景名称:楼宇_4.0
场景介绍:“楼宇_4.0”使用CAD图纸完整还原了楼体内部结构,用来展示建筑物内部和外部世界的联系。
渲染口令:f1d50eC4

③坐标设置
选择坐标类型为经纬度坐标或CAD坐标。
④镜头设置
控制预览是镜头的运动路径。可以通过配置项调整镜头。

{
"coord_type": "0",
"cad_mapkey": "",
"center_coord": "113.321874,23.102038",
"arm_distance": "1151.056519",
"arm_distance_max": "2500.0",
"arm_distance_min": "50.0",
"pitch": "24.75",
"pitch_max": "89.0",
"pitch_min": "8.0",
"yaw": "149.25",
"fly": false
}
⑤水晶体设置
默认关闭,开启后可选择水晶体的样式、热区的效果。
⑥测量工具
默认关闭,开启后可显示测量工具。可以测量三维世界中的坐标、距离、面积;
⑦天气设置
默认关闭,开始后可显示天气状态,可设置晴天、阴天、中雨、中雪、雾霾等天气情况。
⑧光照设置
默认关闭,开启后可选择需要显示的光照时间点,可设置8点、12点、16点、20点来实现光照效果。
⑨音效设置
默认关闭,开始后可播放三维场景音效。
数据
三维城市主组件数据一般场景下无需进行编辑操作。
交互
可以设置三维城市的局部事件和数据事件

子组件管理
散点层
散点层是在城市模型基础上,添加不同样式点的图层;除此之外,散点层还可以支持跳转界面的操作。
样式

数据
支持在“数据”中调整子组件连接的数据,支持与动态数据的链接,动态数据需支持莫奈中的静态数据、API、数据库。
数据样例
[
{"coord":"113.317818,23.102919",
"coord_z":0,
"markerInfo":{"markerWidth":100,"markerHeight":228,"normalUrl":"http://superapi.51hitech.com/doc-static/images/static/markerNormal2.png","activateUrl":"http://superapi.51hitech.com/doc-static/images/static/markerActive2.png"},
"labelInfo":{"labelWidth":200,"labelHeight":80,"bgImageUrl":"http://superapi.51hitech.com/doc-static/images/static/LabelBg.png","labelOffset":"50,200","labelContent":"文本内容","labelSize":30,"labelColor":"#ECC500"},
"setPopup":{"popupUrl":"https://imonet.jd.com/#/screen?key=d359d5778095469ea88f58fe109344b1","popupWidth":800,"popupHeight":380,"popupOffset":"50,180"}
}
]
交互
支持子组件与莫奈中的其他组件进行交互。
场景特效
场景特效是指基于城市建模底图中,向三维城市中加入一些特殊动效的图层。
样式
场景特效样式设置可设置特效名称、坐标等基本信息;还可选择不同的场景特效样式以及加上跳转链接实现交互动作。
预设了地标建筑、设备维护、发生事故的19种常见场景。

数据

数据样例
[
{
"type":"shield",
"scale":50,
"coord":"113.320969,23.104143",
"coord_z":0,
"pitch":0,
"titleStyle":{"titleTextPortrait":false,"titleContent":"防护预警","titleSize":50,"titleColor":"rgba(173,67,139,0.85)"},
"setPopup":{"popupUrl":"https://imonet.jd.com/#/screen?key=d359d5778095469ea88f58fe109344b1","popupWidth":800,"popupHeight":380,"popupOffset":"0,0"}
}
]
交互
支持子组件与莫奈中的其他组件进行交互。