---
order: 15
navTitle: 移动轨迹
---
# SuperPage组件-移动轨迹

SuperPage提供了GIS地图，使用移动轨迹组件可以在地图中显示2个地点（起点和终点）之间的行动轨迹路线。

![操作步骤](./images/gispath2.gif)

示例地址：[移动轨迹](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E7%A7%BB%E5%8A%A8%E8%BD%A8%E8%BF%B9)
:::tip
移动轨迹支持多种不同的底图风格显示，可以在[系统设置-外部服务-GIS](../../../../sys-settings/more/remote-services/gis.md)中自定义底图样式，并在**属性栏**>**样式**>**地图**>**底图风格**选择自定义的底图风格。
:::

## 使用移动轨迹展示移动路线{#start}

使用移动轨迹组件需要绑定含有地址信息字段的模型数据，具体数据要求可参考[数据设置](#data-settings)，同时根据需求选择合适的[轨迹类型](#type)，并进行对应设置即可。下方列举两个场景：

1. 需要显示巡查、行驶过的详细路径，则数据需要有固定频率记录的多条路径信息，如每5s采集经纬度位置，轨迹类型可选择**行动轨迹**
2. 需要显示当前地点到目的地的路径，则数据中需要有起始与目的地的中文地址或经纬度，轨迹类型可选择**地点路线**，以记录执法人员停留点大于5分钟为例，具体步骤如下：

![操作步骤](./images/gispath.gif)

1. **拖入移动轨迹：** 在**组件区**>**嵌入**分组下将**移动轨迹**组件拖入到布局中
2. **绑定数据模型：** 在**属性栏**>**移动轨迹**的**数据**中选择含有地址信息的数据模型，如`执法人员单次行动停留点`模型
3. **选择轨迹类型并设置：**  在**属性栏**>**移动轨迹**>**数据**的**轨迹类型**中选择**地点路线**类型，并根据地址在数据模型中存储的数据类型选择地址类型为**经纬度**或者**地址**，设置相关位置字段，更多可查看[数据设置](#data-settings)

## 数据设置{#data-settings}

在**属性栏**>**移动轨迹**>**数据**中需要引入含有位置信息数据的模型表，模型表设置如下：

- **经纬度**：当地址类型为**经纬度**时，需要选择**经度**和**纬度**字段，下拉选择数据模型中的**经度**、**纬度**字段即可，**经度**和**纬度**字段需要设置地理角色，可参考文档[字段角色-地理](../../../../data-gov/model/field-role.md#geo)
- **地址**：当地址类型为**地址**时，需要选择**地址**字段，也可设置**地址**字段提高位置准确性，**地址**和**地区**字段也需要设置[地理角色](../../../../data-gov/model/field-role.md#geo)
  - 地区：可选，一般是行政区划之类的地理范围，可以是行政区划代码（如110000）或者行政区划名称（如湖北、武汉...）。当不指定地区时，默认为全国。选择明确的地区更有利于根据地址精确定位到地点

当存放多个轨迹点的地址信息数据时，模型表中有两种存储形式：

- 存放多条数据：将每个轨迹点的地址信息存放为一条数据，如每一组经度度分别存在一行，则多个点就有多条数据，可查看[执法人员单次行动轨迹表](https://demo.succbi.com/v5/DEMO/data?:open=jWh9BgmY7FCjIqa8SPyGED&:expandIds=%2FDEMO%2F%24APPMODEL)
- 存放一条数据：将多个轨迹点的位置信息存放在一行中，如将多个经度、纬度分别以逗号`,`分割存放在一行数据中

在**数据**处选择绑定数据模型之后，还需设置**地址类型**、**轨迹点索引**、**轨迹类型**等：

![数据设置](./images/2021-01-21-15-05-11.png)

- **地址类型**：可选择**经纬度**与**地址**类型，**行动轨迹**类型适用于数据量较大的，所以地址类型默认为**经纬度**，不可选择
- **轨迹点索引**：设置轨迹路径中轨迹点顺序位置，如选择数据模型中的时间类型字段`开始时间`，则会按开始时间对轨迹点进行排序
- **轨迹类型**：可选择**地点路线**与**行动轨迹**两种类型，地点路线适用于较简单的移动路线，行动轨迹适用于数据量较大且需要展示轨迹点详细位置信息的移动轨迹，具体可查看[移动轨迹类型](#type)

### 移动轨迹类型{#type}

可以根据路线复杂度、数据量、展示地址信息等需求对轨迹类型进行选择：

- **地点路线**：一般用来显示人员行动的简单路线，常用于包含少量轨迹点的数据，支持使用地址与经纬度两种地址类型作为数据在程序中转换。如跑步软件中，只需要记录从起始到终点的简单路线，对于经过的点的详细信息不需要了解
- **行动轨迹**：一般用来显示人员行动的具体路线以及查看停留点的信息，数据量较大，只能用经纬度作为数据，对于路线上的经过点也支持在提示信息中直接给出地点的基本信息。如检查人员上访多个家庭检查，记录行驶数据生成具体行动轨迹路线，同时对每个停留点的详细信息也能记录展示

|地点路线|行动轨迹|
|--|--|--|--|--|
|![地点路线](./images/2021-03-03-13-45-26.png)|![行动轨迹](./images/2021-03-03-13-48-01.png)|

### 轨迹点设置{#trackpoint}

有**起点**、**终点**和**经过点**三类轨迹点，其中：

- 起点与终点：分别只有一个，可以设置提示信息和标签内容
- 经过点：可以有多个，当在**移动轨迹**>**数据**>**经过点**中勾选了**突出经过地点**，在匹配条件属性中写入[表达式](../../../../exp/README.md)，符合该匹配条件的经过点才会显示，如`${[执法人员单次行动轨迹].[停留时间] > 5}`，则停留时间大于5的经过点才会显示。勾选后，同样可以设置提示信息和标签内容

所有的轨迹点都可以设置提示信息和标签内容，如下：

- 提示信息设置：在**提示框**属性中可设置对轨迹点做补充说明的提示信息，在**样式**>**提示框**中可以设置提示信息的样式，可参考[轨迹点提示信息样式设置](#promptbox)。提示信息有三种显示方式：
  - 不显示
  - 自动显示：直接显示
  - 鼠标移入显示：鼠标移至点上，才会显示提示信息
- 标签设置：勾选显示标签后，在输入框中写表达式，如`${[执法人员单次行动停留点].[经过顺序]}`，则在轨迹点上会显示依次经过的顺序`1`、`2`等

## 样式设置{#properties}

在**属性栏**>**样式**中可设置移动轨迹的[地图样式](#map)、[轨迹样式](#style)、[提示信息样式](#promptbox)等。

![样式设置](./images/pptx-image-gispath.png)

### 地图样式设置{#map}

在**样式**>**地图**中可设置地图的类型，以及底图类型与底图风格。

- 底图类型：可以选择卫星图模式
- 底图风格：可设置标准、幻月黑、月光银、远山黛风格

### 轨迹样式设置{#style}

在**样式**>**轨迹**中可设置轨迹与轨迹点的样式以及[动画样式](#animation)。

**轨迹样式**

包含**轨迹**与**经过轨迹**的样式，经过轨迹效果会叠加在轨迹效果之上。在轨迹中可直接设置样式，经过轨迹则需要在**轨迹**>**经过轨迹**中勾选**显示经过效果**才能设置，轨迹样式如下：

- 轨迹：可设置轨迹颜色与大小
- 在轨迹中显示箭头：勾选后轨迹中会显示从起点朝向终点的箭头，在弹出的**箭头**中可设置箭头的颜色与大小，**箭头间隔**中设置每个箭头的间距
- 在终点显示箭头：此设置只能在轨迹中设置

**轨迹点样式**

在**起点**、**终点**、**经过点**中可分别设置对应轨迹点的样式，包括图标、显示位置等：

- 图标：设置在对应点处显示的图标，默认为标记地点图标，可设置图标的宽度与高度，前一个为宽度设置
- 显示位置：设置图标在对应点的相对位置，包括上方、左侧、中心、左上等
- 标签偏移：设置对应点的标签偏移量
- 标签字体：设置标签的字体、颜色与大小

### 动画效果{#animation}

在**样式**>**轨迹**>**动画**中可设置整个移动轨迹的动画效果，可设置如下属性：

- 自动播放动画：勾选后才会播放轨迹动画效果
- 循环播放：勾选后，轨迹动画可循环播放
- 动画时长：设置播放一次动画的时长
- 轨迹流动特效：勾选后可以显示轨迹流动的特效，并且可以调节流动速度
- 巡航器：可设置轨迹移动巡航的图标、颜色和大小

### 轨迹点提示信息样式设置{#promptbox}

在**样式**>**提示框**中可以设置轨迹点提示框的字体、背景等样式。

![提示信息样式](./images/2021-03-11-10-39-06.png)

## 地图操作模式{#operate}

在**属性栏**>**移动轨迹**>**高级**中可设置地图的操作模式，可启用移动轨迹组件的拖拽和缩放，勾选**启用拖拽**与**启用缩放**即可。

![拖拽缩放](./images/2021-01-21-14-56-36.png)

- 启用拖拽：预览界面可使用鼠标拖拽移动轨迹位置
- 启用缩放：预览界面可使用鼠标滚动来缩放移动轨迹，也会弹出**显示缩放按钮**选项，勾选后，在移动轨迹右下角会出现缩放按钮，点击按钮可对应缩放