---
order: 48
navTitle: GIS地图
---
# 仪表板组件-GIS地图

当数据和地理位置有关系时，可以使用GIS地图展示地理空间数据。通过地图的空间数据分布快速获取信息，例如：

- 哪个省份的销售数量最佳
- 哪些城市的疫情最严重
- 全国便民服务网点的分布情况，哪些区域的分布比较密集，哪些区域的分布比较稀疏

## 使用地图组件{#component}

制作基本地图至少需要1个维度且设置了[地理角色](#geographical)，如省份字段；至少取1个度量信息，如销售数量指标，用于展示各省的销售数量分布。

![地图操作](./images/area.gif)

示例地址：[区块图层地图](https://demo.succbi.com/v5/bi/district-layer_1)

操作步骤：

1. **拖入GIS地图**：从**组件区>图形**处将GIS地图拖入到画布中
2. **制作区块图层地图**：选中拖入的GIS地图，在**组件工具条**处，切换至**区块图层**
   1. **设置位置**：双击或拖入维度【省】到**位置**属性。地图组件会根据数据粒度自动变更地图底图，更多说明可以查看[地图底图设置](#basemap)
   2. **使用颜色标记**：双击或拖入度量【销售数量】到**颜色**
3. **设置地图的图例**：在**区块图层>样式>图例**下，在显示的下拉列表中选择【销售数量】指标，也可以按需选择其他选项
4. **删除不需要的图层**：系统自带添加了**底图图层**，如果不需要可以在**组件工具条**中删除该图层

:::tip
地图图层**数据**下的**位置**属性、**经度**和**纬度**属性,需要设置了地理角色的字段才能拖入到这几个属性中，地图的数据绑定就是通过地理角色来处理的。

:::

## 地图底图设置{#basemap}

拖入的地图组件默认使用的是中国地图作为地图的底图，也可以根据需求选择底图，设置操作步骤如下：

1. 在组件工具条上切换至**区块图层**
2. 在**样式**>**基本**>**底图**属性，下拉选择合适的底图

![底图](./images/2020-07-28-17-40-19.png)

系统内置了如下底图内容：

- **自动**：默认是自动的模式，会根据拖入到位置的数据粒度自动变更底图。例如数据粒度是全国各省，则拖入的地图组件底图会自动变更为中国
- **中国**：包含了中国地图以及各省市地图，可以手动选择中国地图或者固定的省市地图
- **中国各市**：地图的边界显示为全国各地市的行政区域边界
- **湖北各县**：显示为湖北地图，且地图边界显示为湖北省各区县的行政区域边界
- **湖北自贸区**：包含了湖北省各自贸区的地图， 为自定义地图
- **世界**：世界地图，且边界显示为各国行政区域边界

### 自定义地图底图{#basemap-customize}

如果需要新的地图，如某经济开发区地图、某地级市地图，可以使用扩展方式实现新的地图底图，可以参考文档：[增加新的地图底图](#new-map)

## 地理角色设置{#geographical}

为字段分配了地理角色后，才能使用GIS地图展示地理信息数据。在为字段分配了地理角色后，系统会自动关联内置的数据，从而为每个数据关联上经度和纬度数据，实现在地图上精准定位数据。
地理角色的设置有两种途径：

- **在模型表中设置**：选中字段**右键>字段角色>地理**，按需选择
- **在仪表板中设置**：在数据列表中，选中模型字段，**右键>字段角色>地理**，按需选择

更多关于地理角色的介绍，请参考文档：[字段角色](../../../../data-gov/model/field-role.md)

## 地图图层{#layer}

地图由图层组成，图层可以单独使用，也可以组合构建酷炫的地图效果。提供了9个图层可供选择，包括：地图容器、底图图层、区块图层、散点图层、气泡图层、飞线图层、背景图层、热力图层、提示信息图层。其中:

- **地图容器**：该图层是内置图层，一个地图只能有一个地图容器图层且不允许删除，提供了地图通用属性的设置
- **其他图层**：可以无限制增加和删除，选中GIS地图在组件工具条处可以增加、复制和删除图层

![地图组件组成](./images/2020-07-28-16-19-52.png)

### 带电子底图的地图{#baselayer}

地图设置了电子底图，可以显示除所选区域地图外其它区域的骨架脉络，如下图所示：

![带电子底图的地图](./images/dttc.gif)

示例地址：[带电子底图的地图](https://demo.succbi.com/v5/bi/base-layer_1)

操作步骤：

1. **设置底图**：切换到**底图图层**，在左侧的属性栏中选择合适的底图样式
2. **设置蒙版**：可以在底图上添加一层蒙版，并设置蒙版的**颜色**和**透明度**。

#### 底图图层属性

在**样式>基本**下提供了底图图层的属性设置。系统内置了多个底图图层样式可供选择，也可以为底图加一层蒙版，以及设置底图的透明度和滤镜效果：

- **蒙版**：是指在底图之上加一层遮罩，可以设置蒙版的**颜色**和**透明度**
- **透明度**：设置底图的**透明度**
- **滤镜**：和ps的滤镜用法一致。默认是无滤镜，选择自定义启用滤镜，提供滤镜的样式设置

### 区块填充地图{#rectlayer}

区块填充地图是使用区块颜色深浅标识数据大小。制作区块填充地图是使用颜色标记来实现的，将度量数据拖入到颜色标记上即可实现：

![区块填充图层](./images/qktc-jb.gif)

示例地址：[区块填充图层-渐变](https://demo.succbi.com/v5/bi/district-layer_1)

操作步骤：

1. **添加地理数据**：切换到区块图层，双击或拖入维度【省】到**位置**
2. **添加颜色标记**：双击或拖入度量【销售数量】到**颜色**

上述操作实现的是连续的颜色填充底图，也可以实现分段颜色填充底图，该效果要求拖入到颜色中的字段是设置了数值分段的字段，操作步骤如下：

![区块填充图层-分段](./images/qktc-fd.gif)

示例地址：[区块填充图层-分段](https://demo.succbi.com/v5/bi/district-layer_1)

操作步骤：

1. **准备数值型分段度量**：在[模型上设置分段](../../../../data-process/transform/calc-section-field.md)，或者在[仪表板内模型上分段](../../design/datasource.md#创建分段字段)都可以
2. **添加颜色标记**：将分段好的度量拖入到**颜色**中，右键该度量选择**离散**。可以选择默认的色板颜色标记，也可以根据数据规则自定义每个区间段的颜色

::: tip
颜色的设置提供了**离散**和**连续**两种模式，默认为连续的设置，连续适合度量数据，离散要求度量为数值型分段指标才可以使用

:::

#### 区块图层属性

在**样式>基本**下提供了区块图层的属性设置，可以设置区块的样式等内容，如下：

- **底图设置**：在[地图底图设置](#basemap)中已经介绍
- **标签**：设置地图区块上的标识，可以在**数据>标签**中设置，也可以在这里设置
- **区块**：提供了区块缺省**颜色填充**，**区块的内/外边框**，以及**内/外阴影**
- **高亮样式设置**：当鼠标移至区块时的样式，包括**标签**和**区块**的设置
  - **高亮标签**：标签的样式设置包括**字体**和**文字阴影**设置
  - **高亮区块**：区块的样式设置包括**颜色**、**边框**和**阴影**设置

### 散点地图{#scatterlayer}

散点地图是在地图区块上以点或图标形式展示，点的位置是使用经度和纬度在地图区块上标注的。其中经度和纬度的数据来源在[地理角色](#geographical)中有介绍。

![普通散点图](./images/gismap-sdtc.gif)

示例地址：[普通散点](https://demo.succbi.com/v5/bi/scatter-layer_1)

操作步骤：

1. **添加地理数据**：添加散点图层，将【省】拖入到**位置**
2. **设置标记**：
   1. **设置大小标记**：将【销售数量】拖入到**大小标记**，并在**样式>基本>形状**属性中，自定义形状**大小**和**颜色**
   2. **设置颜色标记**：使用指标标记形状的**颜色**，将对应指标拖入到**颜色标记**中即可

::: tip
散点也支持通过**经度**和**纬度**来定位，将对应的字段双击或拖入到**经度**和**纬度**即可。

:::

#### 散点图层属性

在**样式>基本**下提供了散点图层的属性设置。

- **标签设置**：当散点图层的标签设置为显示时，标签文字和散点可能会有重叠，可以在**标签标记**中设置标签的**位置**和**显示角度**，其中标签的位置是相对散点的位置。
- **形状设置**：散点图可以自定义形状，可以在**样式>基本>形状中**进行设置，包括**形状**、形状的**颜色**和**大小**。同时也可以设置点的**边框线颜色**和**粗细**等。
- **散点的偏移设置**：在偏移属性中提供了**水平**和**垂直偏移**，偏移量参照[地理角色](#geographical)关联的经纬度进行计算

### 海量散点地图{#scatterlayer-volume}

当需要在地图上展示海量的数据（如网点位置）时，可以使用海量散点图。原理是通过经纬度来确定点位，在地图上展示出海量的散点。

![海量散点图](./images/2020-12-13-01-23-45.png)

示例地址：[海量散点](https://demo.succbi.com/v5/bi/scatter-layer_1)

操作步骤：

1. 添加散点图层，将【经度】、【纬度】字段拖到对应的位置上即可

### 气泡地图{#bubblelayer}

与散点地图的使用场景基本一致，相比于散点图层，气泡图层侧重于动态效果的展示。

![气泡图](./images/gismap-bubble.gif)

示例地址：[自定义气泡特效](https://demo.succbi.com/v5/bi/bubble-layer_1)

操作步骤：

1. **添加地理数据**：添加气泡图层，将【省】拖入到**位置**
2. **设置标记**：
   1. **设置大小标记**：将【销售数量】拖入到**大小标记**，并在**样式>基本>形状**属性中，自定义形状**大小**和**颜色**
   2. **设置颜色标记**：使用指标标记形状的**颜色**，将对应指标拖入到**颜色标记**中即可
3. **添加动效**：在**样式>基本>动画效果**中更改动画效果，默认是**涟漪-线**，可以改为呼吸动效等其他效果

#### 气泡图层属性

在**样式>基本**下提供了气泡图层的属性设置：

- **气泡形状**：内置了样式，也可以选择系统自带的图片库或定义上传图片。同时可以设置气泡的颜色和大小等样式
- **动画效果**：内置了多种动效可供选择
  - **动效速度**：动画效果的播放速度，范围为0-1。 设置为1时动画的播放速度为每秒一次。播放速度越小，动画播放越慢
  - **不透明度**：气泡渐隐时的不透明度。**渐隐渐现**的特有属性，范围为0-1
  - **动效范围**：气泡放大的范围。**呼吸动效**的特有属性，范围为1-3
- **偏移**：调整气泡位置，可以分别调整**水平**和**垂直**方向上的位置。偏移量参照地理角色关联的经纬度进行计算

### 流向地图{#flowlayer}

当需要展示数据的流动情况，如人口流向时，可以使用流向地图。原理是通过流出地和流入地的行政区划代码确定起点和终点的点位，然后通过飞线连接起来。

![流向图](./images/gismap-liuxiang.gif)

示例地址：[分散流向图](https://demo.succbi.com/v5/bi/flow-layer_1)

操作步骤：

1. **添加地理数据**：添加**飞线图层**，拖入维度【武汉】-【行政区划代码】到**起点**，拖入维度【城市】-【行政区划代码】到**终点**
2. **设置飞线样式**：在**样式>线条**中调整线条的**颜色**和**粗细**等，也可以设置特效的**显示**及特效**动画**等

#### 飞线图层属性

在**样式>基本**下提供了飞线图层的属性设置：

- **线条**：设置飞线样式，包括飞线**线型**、**颜色**和**粗细**
  - **显示曲线**：勾选后飞线以曲线的形式展现，否则以直线的形式展现
    - **曲度**：勾选显示曲线后出现该属性，用来调整飞线的弯曲程度
  - **显示箭头**：勾选后飞线末端显示箭头
- **特效**：设置飞线的特效样式
  - **图标**：设置飞线特效中显示的图标**样式**、**颜色**和**大小**
  - **动画时间**：设置动画的播放完成时间，单位为秒，时间越短，播放速度越快
  - **显示尾迹**：勾选后，动画播放过程中，图标末端显示运动轨迹
    - **尾迹长度**：图标末端显示的运动轨迹的长度

### 带3D背景的地图{#imagelayer}

当需要让地图看起来更有立体感时，可以使用带3D背景的地图。叠层的阴影是通过背景图层实现的，在区块下面叠加一层颜色较深的地图图片，并进行偏移。这样能使整个地图看起来有“厚度”，从而呈现出3D的效果。

![3D背景地图](./images/2020-10-21-16-27-09.png)

示例地址：[3D背景地图](https://demo.succbi.com/v5/bi/3d-map)

操作步骤：

1. **设置背景图层图片**：添加**背景图层**，在**样式**中设置图片填充，图片库选取产品自带的中国地图背景图层或自定义上传
2. **调整坐标参考系**：调整坐标参考系的**x、y坐标**，具体的参考下面的[背景图层属性](#背景图层属性)介绍

#### 背景图层属性

背景图层提供了背景图片的填充和透明度的设置：

- **填充设置**：在**样式>填充**中可以选择内置的地图背景图片图层或上传本地提前准备好的图片
- **透明度设置**：背景图层的透明度，范围为0-1。

背景图层还需要设置**坐标参考系**，才能达到较好的3D效果。在**样式>坐标参考系**中可以设置相关属性：

- **x、y坐标**：用来定位背景图层的位置，不同的地图坐标也是不同的，计算方式可以参考下文

**坐标参考系：EPSG3857**

EPSG3857是一种地图坐标系，其实就是地图的边界的经纬度，可以通过左下角和右上角的X、Y坐标，来调整背景层的位置。其中X坐标的取值范围为\[-180，180]，Y坐标的取值范围为\[-90，90]。坐标参考系根据不同的地图（如中国地图/湖北省地图/武汉市地图等）采用不同的坐标参考系。可参考：[中国各个省市经纬度坐标范围](https://doc.xuehai.net/be478d6223eade9a5ef88aa9d.html)

以中国地图为例，我们只需要通过中国地图的边界经纬度就可以确定背景图层左下角及右上角（如下图所示） ，由此就可以将中国地图的背景图层相对较好的卡在中国gis地图的下方。可以参考下图：

![坐标系](./images/2020-10-21-17-47-36.png)

### 热力地图{#heatmaplayer}

当需要分析分析目标客户物理位置分布和分布密度时，可以选择热力地图。原理与散点地图类似，根据经纬度确定热力点位，根据权重值大小自动从设置好的渐变色中获取色值。

![热力地图](./images/2020-10-22-14-51-25.png)

示例地址：[热力地图](https://demo.succbi.com/v5/bi/heatmap-layer_1)

操作步骤：

1. **添加数据**：添加**热力图层**，拖动字段【纬度】到**纬度**，拖动字段【经度】到**经度**，拖动字段【实缴资本（万元）】到**权重**
2. **设置热力点样式**：在**样式**中设置热力点**颜色**、**半径**和**透明度**属性

#### 热力图层属性

在**样式>基本**下提供了热力图层的属性设置。

- **颜色**：热力点的颜色，只能使用渐变色。热力点的颜色根据权重值自动从渐变色中获取对应的颜色
- **半径**：热力点的半径
- **透明度**：热力点的透明度

### 带TopN提示信息的地图{#tooltiplayer}

当需要在地图上展示TopN地区的指标详情时，可以使用带TopN提示信息的地图。原理是在地图区块上增加一层提示信息图层，通过设置过滤条件来筛选出符合条件的提示信息点位，展现在地图上。

![提示信息地图](./images/2020-10-21-18-33-55.png)

示例地址：[带TopN提示信息的地图](https://demo.succbi.com/v5/bi/tooltip-layer_1)

操作步骤：

1. **添加地理数据**：添加**提示信息图层**，拖入字段【省】到**位置**上
2. **添加过滤条件**：拖入字段【销售数量排名】到**筛选器**，输入筛选条件**等于1**
3. **设置提示信息样式**：在**样式**中调整提示信息的样式属性

如果想要展示多个不同样式的提示信息，可以按照以上步骤设置多个提示信息图层。

#### 提示信息图层属性

提示信息图层，最关键的是设置显示在地图上的信息，提供了如下属性设置：

- **提示内容**：即显示在地图上的**标注信息**，可以写表达式，可以插入模型字段和参数等
- **引线样式设置**：即地图区块和提示信息之间的连线样式设置，可以选择**直线**、**折线**或**不显示**
  - **直线**：可以设置线的**长度**和**显示方向**，以及线的**类型**、**粗细**和**颜色**
  - **折线**：折线分为2段，可以分别设置每段的**长度**，以及线的**类型**、**粗细**和**颜色**
- **端点**：设置标注信息点的**图标**、**颜色**和**大小**

## 带时间轴的地图{#timeline}

当需要在地图上展示按时间动态变化的数据时，可以使用带时间轴的地图。时间轴地图的原理是：

1. 定义一个全局参数，在时间轴上设置这个全局参数的交互，即可实现时间轴带动了全局参数的变化
2. 地图上使用全局参数设置过滤条件，这样参数变化时，地图数据也随之动态变化

![带时间轴的地图](./images/gismap-time.gif)

示例地址：[带时间轴的地图](https://demo.succbi.com/v5/DEMO/app/DEMO.app/%E5%9C%B0%E5%9B%BE%E4%B8%93%E9%A2%98.tpg?id=%E5%B8%A6%E6%97%B6%E9%97%B4%E8%BD%B4%E7%9A%84%E5%9C%B0%E5%9B%BE)

操作步骤：

1. **设置参数**：参数名称为`日期`，参数表达式为起始日期`20200124`
2. **设置时间轴组件**：
   1. 拖入时间轴组件并添加数据
   2. 在时间轴组件的**交互**中添加**改变参数值**
   3. 点击**编辑参数**，设置参数名称为`日期`，数据来源为`日期`，值为`原值`
3. **设置地图组件**
   1. 将**gis地图**切换到区块图层并添加数据
   2. 拖入字段【日期】到**过滤器**，设置过滤条件为【日期】等于参数`日期`

## 地图交互设置{#interaction}

地图除了支持丰富的图层，还可以设置多种交互，比如过滤数据、打开链接、层层下钻等。

### 过滤数据{#filteringdata}

当需要通过点击地图区块来刷新页面其他组件的数据时，可以设置过滤数据的交互。过滤数据的原理是：

1. 点击地图区块后，系统会自动获取区块对应的行政区划代码
2. 系统计算其他组件的数据时，会自动将获取到的行政区划代码附加到查询条件中

![过滤数据](./images/gismap-glsj.gif)

示例地址：[地图交互\_过滤数据](https://demo.succbi.com/v5/bi/%E5%9C%B0%E5%9B%BE%E4%BA%A4%E4%BA%92)

操作步骤：

1. **设置参数**：参数名称为`省份`，表达式为`全国`，用于插入到其他组件的标题中
2. **拖入并设置条形图和柱形图并添加数据**
3. **拖入并设置gis地图**
   1. 切换到区块图层，添加数据
   2. 在**交互**中点击**添加动作**>[过滤数据](../../design/action/filter-data.md)
   3. 在**交互**中点击**添加动作**>**设置参数值**，参数名称为`省份`，数据来源为`省`，值为`显示值`

### 打开链接{#openlinks}

当需要实现点击地图区块，跳转到其他页面来展示所选区域的详细数据时，可以设置打开链接的交互。打开链接的原理如下：

1. 点击地图打开链接时将某些过滤条件（如省份、时间等）传递到子页面
2. 子页面设置对应的参数来获取传递过来的值，并且对数据进行过滤

![跳转链接](./images/gismap-tzlj.gif)

示例地址：[地图交互\_跳转页面](https://demo.succbi.com/v5/DEMO/app/DEMO.app/%E5%9C%B0%E5%9B%BE%E4%B8%93%E9%A2%98.tpg?id=%E5%9C%B0%E5%9B%BE%E4%BA%A4%E4%BA%92_%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2)

操作步骤：

1. 切换到区块图层，添加数据
2. 点击**交互**>**添加动作**>[打开链接](../../design/action/linkto.md)>**编辑链接**
3. 设置[相关属性](/dash/action/openlink/#property)和需要传递的过滤条件，设置完成后点击**确定**

### 层层下钻{#drilldown}

点击地图某个区块后可以层层下钻到下一级区域地图，通过设置下钻交互即可实现。使用下钻交互的前提条件是，拖入到**位置**属性的字段需要关联带有层次的维表。层层下钻的原理如下：

在地图上设置下钻交互，点击地图区块时，系统会自动根据关联的行政区划维表的层级关系，钻取到下一层级。

![下钻](./images/gismap-xz.gif)

示例地址：[地图下钻](https://demo.succbi.com/v5/bi/%E5%9C%B0%E5%9B%BE%E4%BA%A4%E4%BA%92)

操作步骤：

1. 切换到区块图层，拖入字段【省】到**位置**上
2. 点击**交互**>**添加动作**>[下钻](../../design/action/drill-down.md)

## 属性介绍{#property}

除了上述介绍的每个图层的特有属性，不同的图层还有一些通用的属性：

### 地图缩放级别设置{#zoom}

地图可以设置缩放级别，提供了最大和最小级别的缩放设置：

- **最小缩放级别**：当前图层支持缩放的最小级别，当地图缩放级别小于最小缩放级别时，隐藏当前图层
- **最大缩放级别**：当前图层支持缩放的最大级别，当地图缩放级别大于最大缩放级别时，隐藏当前图层

### 图例设置{#legend}

在**样式>图例**下可以设置图例的显示，并提供了图例的属性设置：

- **显示**：控制图例是否显示，以哪种维度显示
- **位置**：图例显示的位置
- **对齐**：图例的对齐方式，图例位置不同时，对齐方式的选项也不同
- **滚动翻页**：勾选后图例会分页显示，可以滚动翻页来切换查看未显示的图例

## 自定义地图{#customize}

目前系统自带了全国-各省-各市三级层次的地图，基本满足项目的地图区块展示、下钻等需求。在某些情况下，还可以自定义地图来达到期望的效果，如：

1. 从某市下钻到某区
2. 需要满足能够按照区域来划分区块的场景，比如华中华南等地区
3. 地图新增功能区，如开发区/自贸区等

### 增加乡镇/街道区块{#villages}

系统自带的地图只到市级地图中查看各区的情况，若需要下钻查看区县地图，即在地图上通过省市县下钻到县级后，能够以区块显示乡镇街道信息，则需要在系统内置的地图包中增加需要下钻的位置地址，以增加湖北省武汉市江汉区下街道区块为例，步骤如下：

1. **基于已有地图制作新的区块**：由于系统自带的扩展是不可修改的，所以需要点击[下载](https://www.jianguoyun.com/p/Da65xRsQz--gChjnkKwE)（提取码：SuccBI）原地图扩展包，并在此基础上制作新的地图。在示例扩展包中，每个省都有一个json文件用来存放该省下所有市的信息，每个市下有一个json文件用来存放该市中所有区的信息，因此我们补充的是每个区下所有的街道信息，即每补充一个区的街道信息，都需要新建一个json文件
2. **新增区块**：在目录下创建`420103.json`文件用来存放江汉区街道区块的信息，可以在[阿里地图DATAV](http://datav.aliyun.com/tools/atlas/#\&lat=30.332329214580188\&lng=106.72278672066881\&zoom=3.5)上搜索目标地区，若能够找到目标地区，且该地区上区块绘制完整，则直接下载该json文件即可；若没有现成的区块json文件，如搜索江汉区，仅展示了江汉区完整的区块，没有对街道的划分，则需要手动绘制其内部边界
   1. 将网页中的json内容复制到[绘制网站](http://geojson.io/#map=9/31.1223/113.9502)中，在地图右侧可使用多边形绘制工具绘制江汉区内部的各个街道的区块边界，在右边json中加上每个区块的中心点位置、名称以及adcode等
   2. 由于是在江汉区地图的基础上绘制其内部区块，所以json中包含了“江汉区”的信息，这时需要在json中删除“江汉区”的代码，仅保留各街道信息，再将所有代码复制到目录文件夹下`江汉区xx街道.json`中，该json文件的名称与第三步中添加的街道编码一致
3. **确认系统表的数据**：确认系统[cn\_adcode](https://demo.succbi.com/v5/DEMO/data?:open=WjHI0Q2yNkCJPshiQli9uE&:tblview=modelData)表中的信息与新增的区划信息是否对应，若对应不上，则按照新的区划信息进行修改
4. **确认行政区划维表数据**：检查行政区划维表中是否包含街道信息，若没有，同步骤3一样需要增加对应的信息
5. **添加层级关系**：修改`package.json`文件，在**武汉市**的下方新增`items`，用来存放武汉市下各区信息，可参考文档[map-地图拓展](../../../../dev/extension/extension-points/map.md#package.json)
6. 将上述步骤制作完成的文件上传至系统中使用，主要有以下几个步骤
   1. **删除系统自带的地图扩展包**：在服务器端将系统自带的**中国地图**，即在系统ROOT.war（或其他名称）包，把`\ROOT\dist\extension\extensions`路径下的`succ-map-china`文件夹删掉
   2. **导入新的扩展包**：启动系统后，将上述步骤制作的整个`succ-map-china`文件夹压缩，通过[扩展](../../../../devops/extension-manage/README.md)上传至系统中
   3. **确认扩展包是否上传成功**：在**系统数据**>**资源**>**extensions**文件夹下确认导入的文件是否正确，若在**extensions**的下级目录中存在`succ-map-china`文件夹，则表示扩展上传成功，此时该扩展文件会自动替换原`succ-map-china`扩展包的作用，如下图所示：![地图扩展包上传](./images/2021-11-16-16-41-44.png)
   4. **使用新的地图扩展包**：在GIS地图组件中设置**区块图层**底图为**自动**，即可实现下钻的效果

上述步骤中涉及到了`区块json`和`package.json`两类json文件，可以简单的理解为：`区块json`是用来描绘地图区块形状的，而`package.json`是用来记录区块之间上下级关系的。

:::tip

1. 点击**市**下钻到**区**时，若不需要显示其内部的区域划分，则可以不绘制内部边界。将[阿里地图DATAV](http://datav.aliyun.com/tools/atlas/#\&lat=30.332329214580188\&lng=106.72278672066881\&zoom=3.5)中导出的json文件放在与**市**平级的目录下，并在`package.json`文件添加该市对应的下级信息即可
2. 在**区块图层**的**中国**底图中确认新加的区块是否在列表中存在，若存在，表示区块新增成功。[下钻](../../design/action/drill-down.md)交互在使用时需要勾选**允许下钻末级节点**，若勾选后还无法下钻到新增的区块，则需要确认新增区块是否有数据
3. 若下钻后发现区块边缘不齐，高亮的区块与实际展示的边界不一致，则可以判定是下层区块的边界经纬度与上层json文件中记录的边界经纬度不同导致的，如在`420100.json`中记录了武汉市的下级区块江汉区的经纬度，与新增的`420103.json`中记录的经纬度不同，此时可以用`420100.json`中江汉区的经纬度去替换`420103.json`中的经纬度信息，保证其上下级的边界经纬度一致，使区块边缘对齐
4. 若下钻到区级后，散点没有在区级地图中显示或显示在区块外部，则需要检查该散点的经纬度是否在对应的区块经纬度范围内
5. json文件在编辑时，可以使用编译软件，或在系统的**应用**中，新建一个后缀为json的文件，将代码复制进去并格式化，方便阅读和编辑，完成修改后再将代码复制到目标区块json文件中

:::

### 自定义大区区块{#block}

系统内置地图根据地理位置划分为八个大区，分别是东北、华东、华中、华北、华南、港澳台、西北、西南。当需要调整大区划分或增加新的大区时，可以在系统自带的[行政区划](https://demo.succbi.com/v5/DEMO/data?:open=JNim5L6UWlBLivKoX0LagC&:tblview=modelData)维表中修改大区字段数据即可。

### 增加新的地图底图{#new-map}

增加新的地图底图即不使用系统自带的地图形状和维表，与[增加乡镇/街道区块](#villages)、[自定义大区区块](#block)是对原有的文件进行修改不同，新增[地图底图](#basemap)不仅需要对地图中的区块重新绘制，还需要按照新地图制作一张新的维表，也就是说需要完整的制作一个地图扩展包。最终通过导入地图扩展包的形式导入至系统中使用，简版示例可点击[下载](https://www.jianguoyun.com/p/DZgbRCYQz--gChiKkawE)（提取码：SuccBI），具体步骤如下：

1. 新建文件夹，该文件夹下包含`地区.json`、`package.json`文件，若希望上传的拓展包有缩略图，还可以包含一个`thumbnail.jpg`缩略图文件
2. 地区json的绘制与[下钻到乡镇区块](#villages)中介绍如何绘制json文件一致，绘制完成后将json数据从网页上拷贝至json文件中即可
3. `package.json`的内容可参考文档[map-地图拓展](../../../../dev/extension/extension-points/map.md#package.json)

<details>
  <summary><font size=2>以武汉市地图为例模板如下</font></summary>

```json
{
    "name": "succ-map-wuhan",
    "displayName": "武汉地图",
    "categories": ["datav"],
    "version": "1.0.0",
    "compatibilities": {
        "platform": "^4.0.0"
    },
    "author": {
    "name": "xx"
    },
    "thumbnail": "thumbnail.jpg",  //若上传了缩略图则包含该属性
    "contributes": {
        "map": {
            "hierarchies": {
                "id": "420100",
                "caption": "武汉市"
            }
        }
    }
}
```

</details>

4. 将文件夹进行压缩，并通过[扩展](../../../../devops/extension-manage/README.md)导入至系统中
5. 在系统内部新建一张地理维表，新建维表可参考文档[录入数据](../../../../data-gov/input-model-data.md)，维表中至少要包括**行政区划代码**字段，建议新增行政区划名称字段用来中文展示该区块的名字，其他字段如中心点、简称等按照需求进行添加，若希望该地图支持下钻，还需要为该维表设置层次，具体可参考文档[数据级次](../../../../data-gov/model/data-hierarchy.md)，维表制作完成后在数据表中关联该表
6. 切换**GIS地图**控件的图层至**区块图层**，**底图**属性中选择上传的新地图即可使用

## 案例-地图下钻与动态图层{#use-case}

GIS地图时常会出现多个图层搭配使用的场景，如：

1. 在全国地图上显示数据的流向情况，当下钻到省级地图时，显示该区域中各机构的分布情况
2. 省级、市级、区级用户在查看页面时，只能展示其所属区域的数据等

为了更快速的理解和使用GIS地图组件，下面以一个具体的案例来介绍在GIS地图中，多个图层如何交叉使用。

### 业务介绍{#description}

案例实现的效果如下：

1. 用户区分为全国、省级、市级用户，不同用户组的用户只能查看其权限范围内的数据，如全国用户可以查看所有省份的数据，省级用户查看其对应省份的数据，市级用户查看对应城市的数据等
2. 图层效果：
   1. 在全国地图上展示数据的流向情况，如从湖北省流向其他省份等
   2. 当地图下钻到xx省后，在区级地图上展示机构的分布情况
3. 点击地图的区块时，自动过滤仪表板内其他的图形数据

根据上述业务的需求，我们可以初步判断配置页面时，需要从**数据的准备**、**权限**、**地图配置**这几个方面入手，下述是详细步骤。

### 数据准备{#prepare}

- **地图数据要求**：为了能在**GIS地图**组件中使用数据，数据中必须包含**行政区划**字段，并且需要关联[行政区划维表](https://demo.succbi.com/v5/DEMO/data?:open=JNim5L6UWlBLivKoX0LagC&:tblview=modelData)，有如下几点需要注意：
  - SuccBI系统的**default**库中已经存在其所对应的物理表，名称为`gen_dim_xzqhfz`，可以将[数据表导入模型](../../../../data-gov/import-table.md#data-table-import)后，再在业务表上关联该维表
  - 数据表导入为模型后，需要为其设置父子层次，具体介绍可参考文档[数据级次](../../../../data-gov/model/data-hierarchy.md)，或者仿照[行政区划维表](https://demo.succbi.com/v5/DEMO/data?:open=JNim5L6UWlBLivKoX0LagC&:tblview=modelData)的层次进行设置

示例地址：[按行政区划层级下钻](https://demo.succbi.com/v5/demo/按行政区划层级下钻/play)

- **流向数据要求**：
  - 在**GIS地图**上配置[飞线图层](#flowlayer)来表示流向信息，由于**GIS地图**中每个图层是单独取数的，每一行数据对应一条飞线，所以**流向数据**可以与**业务数据**在同一张模型表内，也可以与**业务数据**分离
  - **飞线图层**的取数不仅支持使用**行政区划**字段，还可以通过**起点**和**终点**的**经纬度**来进行设置，若使用**经纬度**，则需要在模型上对**经度**和**维度**字段设置对应的[字段角色](../../../../data-gov/model/field-role.md)

示例地址：[人口流向图](https://demo.succbi.com/v5/bi/%E5%9F%8E%E5%B8%82%E4%BA%BA%E5%8F%A3%E6%B5%81%E5%90%91)

### 地图配置{#settings}

- **地图下钻的取数**：地图的下钻取数，需要在[区块图层](#rectlayer)中设置，有以下两点需要注意：
  - 在**区块图层**>**样式**>**布局**中设置**底图**为**自动**（该选项为默认项）
  - 区块图层位置属性设置：
    - 若地图初始显示为**全国**地图，则需要将【行政区划】字段的【省】拖拽到**位置**属性中
    - 若地图初始显示为**xx省**地图，则需要将【行政区划】字段的【市】拖拽到**位置**属性中

示例地址：[按行政区划层级下钻](https://demo.succbi.com/v5/demo/按行政区划层级下钻/play)

![地图下钻取数](./images/2021_12_03_10_56_18_256.gif)

- **地图图层效果设置**：根据业务的需求，在**全国**地图上展示数据的流向，下钻后不再展示飞线，当钻取到**省级**地图后显示该区域的机构分布情况，示例地址：[飞线和散点图层的显示与隐藏](https://demo.succbi.com/v5/demo/飞线和散点图层的显示与隐藏/play)，详细步骤如下：
  - **地图下钻取数设置**：在**区块图层**上取数为【行政区划】字段下的【省】
  - **飞线图层设置**：
    - 取数设置：添加**飞线图层**和**散点图层**并根据数据分别取数（行政区划字段/经纬度）
    - 图层显示条件设置：在**飞线图层**>**数据**>**高级**中设置**显示**属性为**条件**，并输入表达式`[gisMap1].[下钻级次]=0`，表示gisMap1组件不下钻时，显示**飞线图层**
  - **散点图层设置**：在**散点图层**>**数据**>**高级**中设置**显示**属性为**条件**，并输入表达式`[gisMap1].[下钻级次]!=0`，表示只要gisMap1组件下钻后，就显示**散点图层**

![地图图层效果设置](./images/2021_12_03_11_03_00_58.gif)

- **根据不同权限用户定位地图**：由于该地图需要支持下钻，而下钻的**区块图层**取数需要具体取到【行政区划】字段的【省】、【市】等这种层级字段，所以需要根据不同权限的用户，展示不同的地图，即**全国**用户查看的地图取数为【省】，**省级**用户查看的地图取数为【市】，这要借助[多页面板](../layout/panelbook.md)组件，并在**多页面板**组件的不同页面分别制作上述的两个地图，可参考DEMO[总体经营情况](https://demo.succbi.com/v5/bi/%E6%80%BB%E4%BD%93%E7%BB%8F%E8%90%A5%E6%83%85%E5%86%B5)
  - 在**多页面板**的每一页中配置不同的**GIS地图**组件
  - 在**多页面板**>**数据**>**默认页**中设置为**动态页**，并输入表达式判断不同权限的用户展示不同的页面，如`IF([用户].[部门] like '80%' AND [用户].[部门] != "800000",'panel2','panel1')`表示以部门编号以80开头且编号不为800000的用户（即分公司用户）在打开仪表板时，查看panel2的内容（即xx省的地图），否则查看panel1的内容（即全国地图）。这里根据业务需要，使用`IF(USER_INGROUP('省级'),'panel2','panel1')`表示当用户属于省级用户组时，查看panel2的内容，否则查看panel1的内容

![根据不同权限用户定位地图](./images/2021_12_03_11_21_53_690.gif)

- **过滤数据**：
  - **过滤同一模型表数据**：在**区块图层**上配置[过滤数据](../../design/action/filter-data.md)交互
  - **过滤不同模型表数据**：有两种方式
    - 定义全局参数，通过点击区块为参数赋值，并在模型表上通过参数设置过滤条件，可参考文档[参数](../../design/data/param.md)
    - 在组件中[过滤](../../design/data/data-filter/README.md)数据
- **页面美化**：仪表板中自带了需要**样式设置**，如**风格**、**背景**等，可按照需求对图形的样式进行调整，具体的介绍可以参考文档[美化](../../../../../getstarted/SuccBI/dashboard/beautify-dashboard.md)

### 权限配置{#permission}

省级、市级用户登录系统后显示对应区域的地图，并展示该区域的数据，这涉及到为用户分配数据范围，可参考文档[数据级次权限](../../../../permission/grant/datarange.md)，具体思路如下：

1. **区分用户**：在业务上为不同权限用户分类，在系统中则需要借助[用户组](../../../../permission/groups.md)把这些用户区分开来
2. **设置数据范围**：业务上一般以用户所属行政区划来判断其查看某地的数据权限，可根据文档[数据级次权限](../../../../permission/grant/datarange.md)进行设置
3. **用户组权限分配**：区分了不同用户后，需要为**用户组**设置具体的权限，如查看某页面的权限、查看某页面时的数据范围等，可参考文档[权限操作说明](../../../../permission/grant/operations.md)