云搭

Appearance

地图组件 ​

组件说明 ​

多功能地图用于地图的展示，支持arcgis、图吧、百度地图、腾讯地图、高德地图以及超图6种地图格式，支持设置中心点，设置区域边界，在地图上绘制点、线、多边形、圆、自定义DIV、飞线等内容。

效果案例 ​

地图应用场景演示

在可视化大屏编辑状态下，点击左侧的组件库，选择地图列，单击"通用地图"选项。

然后可视化大屏编辑主界面上就添加了地图组件，效果如下内容：

地图组件设置 ​

1、基础设置 ​

添加地图组件后进行基本的设置。支持设置地图所属屏幕，位置，尺寸等，可以手动隐藏地图，通常地图设置为满屏展示，注意在大屏编辑状态下左侧的图层中要保持地图在最下方，否则会覆盖其他元素。

2、地图设置 ​

支持设置地图的类型，有arcgis、图吧、百度地图、腾讯地图、高德地图以及超图合计6个备选项。此外还支持设置地图中心点、地图初始缩放级别等内容。

业务图层搭建 ​

使用地图组件搭建业务图层，可分为三个过程

首先配置数据请求为地图组件接入数据，通常地图所需要展示的内容实际为一组或几组包含经纬度的对象，这一过程目的是为了将服务后台传入前端的数据进行处理以满足地图组件所需要的数据格式，不同类型的图层对应的数据结构不一样。

然后配置点线面图层基本信息并绑定接入的数据，一般地图组件包含不同类型的图层，例如点、线、区域、标题、区域中心打点、Wms图层、飞线、热力图，这一步将传入给组件的数据绑定到图层上，如此图层就有了数据，具备绘制的效果。

最后配置地图指令根据业务控制地图显示和隐藏。

1、配置数据请求 ​

在可视化大屏页面编辑状态下，选择数据请求可进行接口的接入，点击+新增接口，支持http和websocket接口请求，在弹出页面中填写接口的基本信息，注意通常只需请求一次的数据将‘自动执行‘打开即在加载页面时调用接口获取数据。

接口数据需要挂在到组件参数变量上，例如信号点图层经纬度挂在到参数变量xinhao，打开接口的’事件配置‘选项卡，事件类型选择数据更新，动作选择组件联动，联动组件选择添加的地图组件，组件动作选择地图数据更新，变量字段起名’xinhao‘。这样接口返回的数据将会映射到地图组件的变量上供组件使用。点击确定，并点击页面上方的保存按钮进行保存。配置完成后，点击"请求数据"按钮，然后点击确定。

一般后台接口的数据不满足地图组件所需的格式，因此需要编写js代码将接口数据转换为地图组件所需的格式，在接口基础配置选项卡里点击编辑过滤器，根据注释提示的参数含义，根据业务逻辑进行接口数据处理并最后return。

以点为例，点的数据结构为：

[
	{
		“coordinate”:”117.0215,32.3548”//经纬度,精度在前维度在后以英文逗号隔开
        ......//该对象其他信息
    },
    ......
]

多个点以数组表示，api接口返回中没有coordinate字段，因此在接口处理中循环将点的经纬度取出组合成新字段coordinate，如上图所示。点击确定然后点击页面上方保存按钮。至此数据接入就以完成。

下面列出不同数据的数据结构

点：

[
	{
		“coordinate”:”117.0215,32.3548”//经纬度,精度在前维度在后以英文逗号隔开
},
……
]

线：

[
	{
		“coordinate”:”117.0215,32.3548, 117.1254,32.2105……”//经纬度,精度在前维度在后以英文逗号隔开，线是以多个点连接成线，多个点经纬度依次用英文逗号隔开
},
……
]

自定义div:

[
	{
		“lng”:117.0215 ,//经度
		“lat”: 32.3548 //纬度
		……//该点的其他信息，可以通过自定义代码获取到
},
……
]

区域：

[
	{
		“coordinate”:”117.0215,32.3548, 117.1254,32.2105……”//经纬度,精度在前维度在后以英文逗号隔开，区域与线数据格式类似，区别是多点围城一个区域，多个点经纬度依次用英文逗号隔开
},
……
]

标题：

[
	{
		“title”:”交通警察支队”,
		“lng”:117.0215 ,//经度
		“lat”: 32.3548 //纬度
		……//该点的其他信息
},
……
]

整体过程如下：

2、配置点线面图层数据 ​

在地图组件上单击，在点/线/区域设置中根据需要添加或者复制元素。

在编辑页面根据业务，编辑图层的名称，选择合适的类型。如下图为例，信号为多个点则类型选择点，地图展示定制的图标则输入图标的宽度和高度，然后点击上传图标。如果点位不多不需要聚合则把关闭聚合开关打开,如需图标显示标题则在标题字段填入标题参数的变量名，数据选择上一步创建的参数变量’xinhao’，然后点击确定，再点击页面上方的保存

目前支持配置点、线、多边形区域（多边形或者圆）、自定义div、标题。注意：数据需要手动从下方的可视化json中选取（通常选择的是一组数据）如果json中未包含想要使用的数据，需要到相应的数据请求上，点击一下"请求数据"按钮。

如需图标展示自定义的样式，类型选择自定义dvi，同理其他数据进行编辑，其中在内容里编写html，可用${v.xxx}获取到该点数据格式的内容，详见自定义div数据格式。

配置弹窗（可选）：

如需点击图标显示弹窗展示更多内容，则先在地图上绘制弹窗组件

然后在新绘制的"警情弹窗"上点击隐藏，使其一开始不显示。

在需要弹出该点的点击编辑，例如上述弹窗对应的"警情点"：

点击编辑，在事件部分添加事件

在这里配置点击后"显示"，事件2通常配置成弹窗（其余配置和事件1相同），这样弹窗就在点击位置的下方显示。如果需要有数据需要传递给弹窗动态展示，则可以新加一个页面变量，弹窗上的变量全部绑定这个页面变量，定义一个事件将点上的数据传给页面变量完成绑定。

如下图所示：

点击"编辑过滤器"按钮，配置具体的对应字段。

弹窗配置完毕

整体过程如下：

3、配置地图指令 ​

如上图所示，需要点击警情点的时候在地图上打出对应的点。

在警情点的地图元素上点击，然后在面板上选择"事件"。

点击交互动作+号，新增一个交互动作，动作选择组件联动，联动组件选择地图组件，组件动作选择地图指令配置，指令类型根据业务选择，这里警情点是点类型，地图元素名选择警情点。点击取消隐藏选择否。点击保存，至此完成多有配置完成信号点图层的配置，在预览页面即可实现该业务功能。另外，对于动态绘制地图的业务，不需要隐藏只需要一直绘制那么交互动作的选项’点击取消隐藏’选择是，如此图层将不会隐藏会刷新绘制。

地图部署要点 ​

地图组件依赖himap服务，可视化大屏进行对接项目现场提供的himap服务，需要修改配置，在可视化大屏前端部署路径下找到public\map\himapConfig.js

let urlHostName = window.location.hostname
if (urlHostName == 'citybrain.hisense.com' || urlHostName == 'yd.hisense.com') {
    var HOSTNAME = 'http://citybrain.hisense.com/HiMap/'
    var gkmapHOSTNAME = 'http://citybrain.hisense.com/HiMap/'
} else if (
    urlHostName == '27.223.99.143' ||
    urlHostName == '219.147.31.25' ||
    urlHostName == '219.147.31.12'
) {
    var HOSTNAME = 'http://27.223.99.143/HiMap/'
    var gkmapHOSTNAME = 'http://27.223.99.143/HiMap/'
} else {
    // HiMap 部署地址
    var HOSTNAME = 'http://10.16.3.178:804/HiMap/'
    var gkmapHOSTNAME = 'http://10.16.3.178:804/HiMap/'
}

其中HOSTNAME和gkmapHOSTNAME修改为项目现场himap服务的IP和端口

var mapType = 'arcgis' // arcgis  minemap  mapabc supermap_leaflet

mapType修改为项目现场使用的地图类型，通常为arcgis

var GETTILEURL = function (level, row, col) {
    //1.閫氳繃鍚庡彴鏂规硶鐩存帴璇诲彇锛堢摝鐗囦笅杞藉櫒锛夌摝鐗囪矾寰勶細
    // var url = HiMapConfig.HOSTNAME+ 'getTiledFile?Service=getImage&Type=RGB&Col={col}&Row={row}&Zoom={zoom}&V=' +
    // DOWNLOADVERSION + '&FILEPATH=TILEDFILEPATH';
    // url = url.replace(/{row}/, row);
    // url = url.replace(/{col}/, col);
    // url = url.replace(/{zoom}/, level);
    // url = url.replace(/{z}/,level);
    // return url;

    //2.閫氳繃nginx杞彂璇锋眰锛氾紙鐡︾墖涓嬭浇鍣級鐡︾墖鍒嗗眰瀛樺偍鐨勮鍙栨柟寮�
    var row16 = Number(row).toString(16).padStart(6, '0')
    var col16 = Number(col).toString(16).padStart(6, '0')
    var firstPath = col16.substring(0, 1) + '-' + row16.substring(0, 1)
    var secondPath = col16.substring(0, 2) + '-' + row16.substring(0, 2)
    var thirdPath = col16.substring(0, 3) + '-' + row16.substring(0, 3)
    var fourthPath = col16.substring(0, 4) + '-' + row16.substring(0, 4)
    var fifthPath = col16.substring(0, 5) + '-' + row16.substring(0, 5)
    return (
        'http://10.16.3.178:804/HiMap/vectors/dark/' +
        level +
        '/' +
        firstPath +
        '/' +
        secondPath +
        '/' +
        thirdPath +
        '/' +
        fourthPath +
        '/' +
        fifthPath +
        '/g_' +
        col16 +
        '_' +
        row16 +
        '_' +
        level +
        '.png'
    )
    //return "http://10.16.3.178:804/HiMap/vectors/white/" + level + "/" + firstPath + "/" + secondPath + "/" + thirdPath + "/" + fourthPath + "/" + fifthPath + "/g_" + col16 + "_" + row16 + "_" + level + ".png";
    //return "http://10.16.3.178:804/HiMap/vectors/tianjin_white/" + level + "/" + firstPath + "/" + secondPath + "/" + thirdPath + "/" + fourthPath + "/" + fifthPath + "/g_" + col16 + "_" + row16 + "_" + level + ".png";

    //3.閫氳繃nginx杞彂璇锋眰锛氾紙鐡︾墖涓嬭浇鍣級鐡︾墖涓嶅垎灞傚瓨鍌ㄧ殑璇诲彇鏂瑰紡
    //var url =  "http://10.16.4.40:81/GoogleMap/vector/" + level + "/m_" + level + "_" + col + "_" + row + ".png";
    //return url;

    //4.閫氳繃nginx杞彂璇锋眰锛氬叾浠栨柟寮忎笅杞界殑鍒嗗眰鐡︾墖鍙栨柟寮�
    // var url =  "http://10.16.3.178:8101/HiatmpView/sdvector/" + level + "/"  + col + "/" + row + ".png";
    // return url;
}

瓦片地址修改为项目现场的瓦片地址