产品文档

京东城市莫奈可视化平台

2D地图组

2D地图组中目前支持添加:底层图、区域热力层、热力图、散点图、飞线图,联动热力层,网格热力层和气泡图,支持配置地图的位置、颜色、鼠标交互事件等,能够多角度、多形式地渲染全国各城市地理位置的实时数据。

样式设置

地图组组件样式设置包括 子组件管理,地图基础配置,图表位置和图表尺寸。

子组件管理

新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

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

配置子组件:

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

数据设置

该组件无数据设置

底图层

底图层也叫地图瓦片层,是基础平面地图的子组件,支持独立的样式和数据配置,包括底图层的瓦片类型或地址、颜色、滤镜等,能够使用自定义的瓦片服务来设置基础平面地图的背景。

样式设置

底图层的样式设置目前可进行地图风格的设置,地图风格包含12种,可选择进行切换。

数据设置

该组件无数据设置

热力层

热力层是基础平面地图的子组件,支持独立的样式和数据配置,包括热力点的大小、颜色、模糊程度以及经纬度等,能够使用热力点的形式表现地理位置上的点数据信息。

适用场景:热力层适用于要在地图上通过赋予不同颜色以权重来展示在不同位置上数据的值。比如:在地图上展示各地区人口密度情况,人口密度越高,颜色越偏红色;人口密度越低,颜色越偏绿色。

样式设置

热力层的样式设置仅可设置热力点的半径。

数据设置

数据字段

热力层的数据字段包括:lng,lat,intensity

lng:经度值,需要将数据与图表进行映射;

lat:纬度值,需要将数据与图表进行映射;

intensity:热力值,需要将数据与图表进行映射;

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

数据格式

 js
[
    {
        "lat":30.395141,
        "lng":104.180187,
        "count":87
    },
    {
        "lat":30.314268,
        "lng":104.033458,
        "count":58
    }
]

网格热力图层

网格热力层与热力层类似,也是通过不同颜色来表示不同位置的数据权重。不同之处在于,网格热力层将地图划分为大小一样的方格,以每一个方格为单位来进行颜色的划分。

适用场景:以小方格为单位,对全国人口密度进行展示。密度越大,颜色越深;密度越小,颜色越浅。

样式设置

网格热力层的样式设置可设置边界粗细,边界颜色,填充颜色。

其中填充颜色可以根据数量的多少进行区别,以获得更为准确的数据展示效果。

同时,区域热力图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:

数据设置

数据字段

网格热力图的数据字段包括:leftTop,RightBottom,Value和info

其中,lefttop和rightbottom是负责喧嚷网格大小的,他们分别是网格的左上和右下坐标。

Value是该网格数值大小,数值越大,颜色越深

Info是负责显示鼠标交互过程中展示的弹窗内容

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

数据格式如下:

js
[{"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}]

区域热力层

区域热力层是基础平面地图的子组件,支持独立的样式、数据和交互配置,包括区域的标注、颜色、边线、鼠标交互事件以及位置信息等,能够以热力区域的形式表现地理位置上的区域信息。

适用场景:在地图中通过赋予不同颜色以范围,展示某一自定义区域的数据

样式设置

区域热力层的样式设置包含边界颜色、边界粗细,填充颜色范围,可设置其热力区域的最大值与最小值。

同时,区域热力图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:

image-20200228212843841

数据设置

数据字段

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

数据格式

 js
{
    "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地图也支持弹窗设置,目前支持:无弹窗、弹窗一直存在、鼠标悬浮弹窗和点击弹窗这四种模式,并可以由用户对弹窗中的文本进行自定义设置,对于弹窗的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:

image-20200228212843841

数据设置

数据字段

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

数据格式

 js
{
    "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码展示坐标信息,而区域热力层则是借助经纬度坐标点完成各个区域地理位置信息的勾勒。除此之外,两种图层的适用场景相同。

样式设置

image-20200721110238

基础设置 image-20200721110542 下钻层级可以选择在预览地图中我们是否会点击地图进行下钻以及下钻向下的最小层级。

联动热力层的样式设置可设置边界粗细,边界颜色,填充颜色。

其中填充颜色可以根据数量的多少进行区别,以获得更为准确的数据展示效果。

提示框设置 image-20200721111009 同时,联动热力层也支持提示框设置,目前支持:无提示框、提示框一直存在和鼠标划过提示框这三种模式,并可以由用户对提示框中的文本进行自定义设置,对于提示框的边框线条粗细,边框线条颜色和背景都可以进行配置,提示框背景支持颜色背景和图片背景两种设置,可以自主选择。

按钮设置 联动热力层也支持按钮设置,可以对按钮的文本和背景颜色进行设置。

数据设置

数据字段

image-20200721111325

联动热力层的数据字段包括:adcode,value和tooltip

其中,adcode是国家行政区域划分标准码

value是该区域数值大小,数值大小可以根据样式设置中的颜色进行展示

tooltip是负责显示鼠标交互过程中展示的提示框内容

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

js
[{"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":""}]

# 交互设置

image-20200721111604 可以将adcode的值绑定到交互变量中,交互变量名称可自行设置,实现联动热力层和其它组件之间的交互。

飞线层

飞线层是基础平面地图的子组件,支持独立的样式和数据配置,能够以飞线的形式表现地理位置上两个点之间的OD数据

适用场景:可以用来展示两地之间的关联信息,如物流、交易等。

样式设置

飞线层的样式设置包含默认设置和提示框设置。

默认设置中可以设置气泡的位置在目的地还是出发地,以及气泡尺寸的最大最小值,气泡的填充颜色。

同时,飞线层也支持提示框设置,目前支持:无提示和鼠标滑过提示这两种模式,并可以由用户对提示框中的文本进行自定义设置,对于提示框的边框线条粗细,边框线条颜色和背景颜色都可以进行配置:

数据设置

数据字段

飞线层的数据字段包括: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":"我是黑龙江"}]

散点层

散点层是基础平面地图的子组件,支持独立的样式、数据和交互配置,能够以散点的形式表现地理位置上的点数据信息。

适用场景:在地图上展现北京,上号,成都等主要城市的信息。

样式设置

散点层的样式设置可设置 默认配置,提示框设置,弹窗样式。

默认设置

显示类型

散点层支持用户选择散点的类型,可以是系统预置的散点类型,也可以用户自主上传图标。

当用户选择系统预置的散点时,可进行如下设置:

散点类型

散点类型目前支持以上六种,选择某个类型,地图上的散点图标会有对应的变化。

散点颜色

散点颜色支持用户自定义设置。

并且可以根据数据中的value值进行不同value范围显示不同的散点颜色,如上图所示。

标注中心设置:可以自主选择以图标中心点或者图标底部中心两种设置。

散点尺寸

散点尺寸指在地图上的散点的尺寸在最小value值和最大value值之间线性变化,单位为px。

如上图所示,此处可设置散点的最小尺寸和最大尺寸。

当用户选择上传图标时,可进行如下设置:

图标图片:支持链接形式,或本地上传;

标注中心:指以图标的哪个点与经纬度对应,包含两个选择 图标中心点,图标底部中心点;

图标尺寸:指在地图上的图标的尺寸在最小value值和最大value值之间线性变化,单位为px。

如上图所示,此处可设置图标的最小尺寸和最大尺寸。

用户还可以自主设置自适应散点位置,可选择是或者否,以及设置适应边距。

聚合设置

用户可以选择是否使用聚合,聚合的范围以及图标的基础半径。设置鼠标划过时是否显示轮廓,并可对数字的文本样式进行设置。还可以通过链接的形式导入背景图片。

提示框设置

提示框设置可以设置提示框显示形式。

提示框内部文本设置,提示框边框粗细,边框颜色,以及对提示框背景进行设置。还可以对提示框的尺寸和位置进行设置。

弹窗设置

弹窗设置里包括,弹窗宽度,弹窗高度,边框线条,边框颜色和背景颜色的设置。

动作设置

可以设置单击时响应的结果:可选择无动作,或者单击实现页面跳转,或者单击出现的是弹窗三种方式。

数据设置

数据字段

散点层的数据字段包括:

lng:必填项,经度值,需要将数据与图表进行映射;

lat:必填项,纬度值,需要将数据与图表进行映射;

id:数据的id值;

tooltip:提示框所显示的文本;

value:选填项,数值,需要将数据与图表进行映射;

info:选填项,弹窗中的文字;

link:选填项,点击散点后跳转的url链接;

iframe:选填项,点击后生成iframe的url链接。

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

 js
[{"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/"}]

交互设置

标签点击响应事件默认开启。

可将散点的经纬度绑定到变量中,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 “:变量名称”的方式使用变量,完成数据的动态展示。

圈选层

圈选层是在地图组件的基础上,以某一位置为圆心,设定距离为半径在图中进行圈选。主要适用场景为:体现某一城市的指标向周边辐射的范围。

样式设置

地图圈选层样式包含圈选样式和按钮样式;

圈选样式包含:背景颜色设置,边框颜色设置,边框宽度和边框样式设置

按钮样式包含:文本设置,背景颜色以及边框设置和按钮位置设置。

边框设置:对边框的线条粗细,线条颜色,线条样式,圆角设置进行设置。

按钮位置设置:可自行设置按钮的横纵坐标。

数据设置

数据字段

圈选层的数据字段包含:lng,lat和distance

lng和lat是中心点的坐标

distance是圈选出来的距离

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

js
[{"lng":116,"lat":39,"distance":100}]

# 交互设置

可将圈选层的经纬度以及距离绑定到变量上,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 ‘:变量名称’的方式使用变量,完成数据的动态展示。

呼吸气泡层

呼吸气泡层是2D地图的子组件,支持独立的样式、数据和交互配置,能够以呼吸气泡的形式表现地理位置上的点数据信息。

适用场景:以大小不同的气泡样式来体现某地区或区域数据的大小。例如,借助大小不同的气泡展现不同城市的人口数量。

样式设置

呼吸气泡层的样式设置包含默认配置和提示框配置两种。

默认配置:可设置气泡类型,气泡颜色以及气泡的最大值和最小值。

气泡类型

气泡类型目前支持三种:实心,空心和圈点。选择某个类型,地图上的气泡图标会有对应的变化。

气泡颜色

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

气泡尺寸

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

提示框设置:

提示框设置中可以设置提示框展示方式,提示框的文本设置,边框粗细,边框颜色以及背景设置。

提示框展示方式:目前支持四种:无提示,提示一直存在,鼠标滑过提示和点击提示四种。

背景来源:包含颜色背景和图片背景两种。

颜色背景则选择对应的颜色即可,支持rgba颜色设置。

图片背景:支持自定义上传所需要的图片。

数据设置

数据字段

呼吸气泡层的数据字段包括:lng,lat,value

lng:经度值,需要将数据与图表进行映射;

lat:纬度值,需要将数据与图表进行映射;

value:数值,需要将数据与图表进行映射;

tooltip:设置提示框内容,需要将数据与图表进行映射;

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

 js
[{"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}]

轨迹层

地租组件的字组件,在地图中,以线条形式展现某一事物运行轨迹。例如:在地图中展示某一物流产品输运过程中的轨迹。

样式设置

轨迹层的样式设置可设置轨迹样式和重置按钮设置。

轨迹样式

可以对轨迹的线条颜色,线条宽度,线条样式以及轨迹显示的位置进行设置。默认只是在原来图层上加上轨迹,自适应居中则是在原来图层上加上轨迹后,轨迹还可以居于地图中央显示。

重置按钮设置

可以对按钮的文本,背景颜色,边框设置以及按钮位置进行设置。

边框设置:包含边框的粗细,线条,颜色进行设置。

按钮位置:可设置按钮的横纵坐标。

数据设置

数据字段

image-20200331185440780

区域联动层的数据字段包括:points

points就是组成轨迹层轨迹的点的集合

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

 js
[{"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"}]

弹框散点层

弹框散点层是基础平面地图的子组件,支持独立的样式、数据和交互配置,能够以散点的形式表现地理位置上的点数据信息,同时支持点击时出现弹框显示补充信息。

适用场景:需要在地图中以不同大小图标展示不同位置数据大小的同时,还可以通过点击图标生成弹出框来展示额外信息。

样式设置

散点层的样式设置可设置 默认配置,弹窗样式,交互设置。

默认设置

散点层支持用户选择散点的类型,可以是系统预置的散点类型,也可以用户自主上传图标。

当用户选择系统预置的散点时,可进行如下设置:

散点类型

散点类型目前支持六种,选择某个类型,地图上的散点图标会有对应的变化。

散点颜色

散点颜色支持用户自定义设置。

并且可以根据数据中的value值进行不同value范围显示不同的散点颜色,如上图所示。

散点尺寸

散点尺寸指在地图上的散点的尺寸在最小value值和最大value值之间线性变化,单位为px。

如上图所示,此处可设置散点的最小尺寸和最大尺寸。

图标图片:支持链接形式,或本地上传;

标注中心:指以图标的哪个点与经纬度对应,包含两个选择 图标中心点,图标底部中心点;

图标尺寸:指在地图上的图标的尺寸在最小value值和最大value值之间线性变化,单位为px。

如上图所示,此处可设置图标的最小尺寸和最大尺寸。

弹窗设置

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

提示框设置

可对提示框内显示的文本进行字体,字号,粗细颜色的设置;可以设置提示框的背景颜色以及提示框的边框线条颜色及粗细。

交互设置

交互设置:点击或者操作散点时的交互设置,可出现弹窗,或者跳转到其他页面;

数据设置

数据字段

散点层的数据字段包括:lng,lat,value

lng:必填项,经度值,需要将数据与图表进行映射;

lat:必填项,纬度值,需要将数据与图表进行映射;

value:选填项,数值,需要将数据与图表进行映射;

info:选填项,弹窗中的文字,支持使用
进行换行;

url:选填项,点击散点后跳转的url链接;

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

js
[{
	"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
}]

交互设置

标签点击响应事件默认开启。

可将散点的经纬度绑定到变量中,那么在当前大屏中则存在此经纬度变量,即可在当前大屏的其他组件使用此变量。其他组件使用时仅可在API和数据库配置时使用变量,通过 “:变量名称”的方式使用变量,完成数据的动态展示。

3D地球组

样式设置

3D地球组组件样式设置包括 子组件管理,地球基础配置,图表位置和图表尺寸。

子组件管理

新增子组件:点击子组件管理后的“+” 图标,弹出子组件窗口,选择一个子组件,即可完成子组件的添加;

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

配置子组件:

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

地球基础配置管理

地球基础配置包含 环境光配置、地球转速、地球距离,是否开启夜晚效果,是否转动 五个基础配置。

数据设置

该组件无数据设置

3D球体层

样式设置

3D球体层的样式设置目前可进行球体风格的设置,地图风格包含3种,可选择进行切换。

数据设置

该组件无数据设置

飞线层

飞线层是3D地球层的子组件,用以在地球上展示某些轨迹。例如:展示国际航班航线。

样式设置

飞线层的样式设置可设置飞线样式和尾迹样式。

飞线样式可设置飞线颜色和粗细;

尾迹样式可设置尾迹颜色,宽度和周期;

数据设置

数据字段

飞线层的数据字段包括:from,to,labels,value

from:飞线的起点经纬度信息,需要将数据与图表进行映射;

to:飞线的终点经纬度信息,需要将数据与图表进行映射;

labels:起终点的地点名称,需要将数据与图表进行映射;

value:飞线代表的值,需要将数据与图表进行映射;

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据,数据格式如下。

 js
[
    {
        "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地球上方展示云层,起到装饰的作用。

样式设置

云层的样式设置仅可以设置云层高度,范围是5-40 ,数值越大云层距离地球越远。

数据设置

该组件无数据设置和交互设置。

更新时间:2021-03-25 16:07:56
feedback