MapGO

# 基础

# 应用管理

应用列表中展示了当前用户下所有可操作的地图应用和可查看的应用模板；提供了快捷搜索，创建2/3D应用，编辑，预览，复制，共享，下载，删除应用等功能。其中编辑功能提供了强大灵活的应用配置项；应用共享、复制功能为高效开发提供了可能性和便捷性，大大提高了复用度

# 操作

  • 创建：创建空白地图应用
  • 编辑：进入应用配置界面，搭建专题地图
  • 预览：查看搭建好的专题地图效果
  • 下载：下载应用，可独立部署
  • 删除：删除应用
  • 复制：快速拷贝一份副本，拷贝出来的副本与原应用互相独立
  • 共享：选定用户共享搭建好的地图成果
  • 转让所有权：将地图应用转让给指定用户
  • 设为模板：一般应用设为模板后，所有用户可查看共享下载，不同角色对于模板应用的操作权限不同，详情见“角色”说明
  • 设为应用：模板设为应用后，用户可在复用模板部分效果的基础上实现个性化定制

# 角色

为了便于管理和操作地图应用，按角色不同分两种权限

角色 模板应用权限 一般应用权限
管理员
预览、编辑、下载、删除、设为应用
预览、编辑、下载、删除、复制、共享、转让所有权、设为模板
其他用户
预览、下载、设为应用
预览、编辑、下载、删除、复制、共享、转让所有权

# 应用编辑

基于创建的空白地图应用和平台提供的定制地图应用功能（提供了丰富多样的底图，支持各种常见类型的图层，内置有数十种微件），分别配置底图、地图、图层和微件，如果需要实现更强大的功能，可在开发者模式下编写 JavaScript 代码，结束编辑后保存，即得到一个内容丰富的地图应用。

# 底图

设置底图相关，作为整个地图应用的背景

# 底图管理

# 添加底图

默认添加高德矢量地图

# 删除底图

删除当前底图

# 上移

显示顺序上移一层

# 下移

显示顺序下移一层

# 底图编辑

# 名称

设置底图名称，设置底图名称包含关键字 “普通地图”、“地形地图”、“影像地图”，即可使用底图切换微件一键切换底图

# 类型

支持的底图类型包括

  1. 互联网（天地图、高德、谷歌）矢量图、影像图、地形图
  2. ArcGIS 地图服务（动态、切片）
  3. 基于 OGC 标准的地图服务（WMS、WMTS）
# 样式

当底图类型为“内置”时显示，可选择指定的互联网在线地图

# 服务地址

当底图类型为非“内置”时显示，输入地图服务地址

# 不透明度

设置底图的不透明度，范围是0~1，越接近于1，越不透明

# 可见

设置底图默认是否可见

# 地图

设置地图状态相关

# 允许缩放

设置是否允许通过鼠标滚轮对地图进行缩放

# 允许平移

设置是否允许通过鼠标拖拽对地图进行平移

# 背景颜色

设置地图的背景颜色，注意透明度设置

# 最小缩放级别

当底图中包含切片类型时，可设置地图允许缩小的最小级别

# 最大缩放级别

当底图中包含切片类型时，可设置地图允许放大的最大级别

# 坐标系

设置地图坐标系

# 默认范围

设置地图的默认范围，可通过以下两种方式设置

  1. 分别输入地图左下角和右上角的经纬度
  2. 通过“拾取地图范围”按钮将右侧当前视图的地图范围设置为默认范围

# 图层

# ID

图层的唯一标识，常用于开发者代码中对图层进行相关操作

# 名称

在图层列表面板中，图层的显示名称

# 图层类型

支持以下四种数据来源的十种图层类型

  • 接口图层：根据后台提供的含有坐标信息的REST服务生成的点图层
  • ArcGIS 地图服务图层：包括要素（feature）图层、ArcGIS 动态服务图层、ArcGIS 切片服务图层、ArcGIS 影像服务图层
  • GeoJSON图层: 包括 GeoJSON 图层、标注图层
  • 基于 OGC 标准的地图服务图层：包括 WMS 图层、WMTS 图层和 WFS 图层

❓ 拿到一个 ArcGIS 地图服务 url ,如何判断它是 ArcGIS 动态服务或 ArcGIS 切片服务？

✔️ 访问该地图服务，搜索 “Single Fused Map Cache” 节点，查看其值，若为 true 是切片服务，否则是动态服务

# 图层地址

# 图层渲染

设置图层的样式，支持单字段渲染、多字段渲染、统计图、ECharts 渲染、HTML 渲染五种渲染方式，具体如果配置请看章节 渲染

# 几何类型

包括点、线、面三种

# 数据路径

  • 如果接口返回数据为一层嵌套结构，如以下示例，则数据路径为 data
{
  head:{
    total:"3",
    message:"执行成功"，
    state:"true",
    statusCode:"200"
  }
  data:[
    {
      longitude: 118.882,
      latitude: 25.0445,
      code: A1000，
      name: "福建中昌塑胶有限公司"
    },
    {
      longitude: 118.554,
      latitude: 25.676,
      code: A1000，
      name: "中仑塑业（福建）有限公司"
    }
  ]
}
  • 如果接口返回数据为多层嵌套结构，如以下示例，则数据路径为 list.data
{
  head:{
    total:"3",
    message:"执行成功"，
    state:"true",
    statusCode:"200"
  }
  list:{
    data:[
    {
      longitude: 118.882,
      latitude: 25.0445,
      code: A1000，
      name: "福建中昌塑胶有限公司"
    },
    {
      longitude: 118.554,
      latitude: 25.676,
      code: A1000，
      name: "中仑塑业（福建）有限公司"
    }
    ]
  }
}

# 经度字段

接口返回数据中点位的经度字段

# 纬度字段

接口返回数据中点位的纬度字段

# 图层关联显隐

  • 如果设置图层1的关联显隐为图层2，则通过图层列表微件的眼睛按钮控制图层1显示或隐藏，图层2相应也会显示或隐藏

  • 需要注意的是 关联显隐是单向的，即这种设置下操作图层1的显隐可以控制图层2，但是操作图层2的显隐不能控制图层1

# 最大缩放比例

设置图层可见的最大比例尺，当地图比例尺小于图层的最大比例尺，该图层才可见，当地图比例尺大于图层的最大比例尺，该图层不可见

# 最小缩放比例

设置图层可见的最小比例尺，当地图比例尺大于图层的最小比例尺，该图层才可见，当地图比例尺小于图层的最小比例尺，该图层不可见

# 在图层列表中显示

设置该图层是否显示在图层列表微件面板中

# 默认可见

设置图层默认是否可见

# 图层不透明度

设置图层不透明度，范围是0~1，越接近于1，越不透明

# 数据关联

  • 接口地址：关联接口地址
  • 数据路径：同图层的数据路径
  • 图层字段：图层中用于关联的字段
  • 关联字段：接口中用于关联的字段

示例：河流JSON和断面接口的关联

河流的 JSON 数据如下

{
  type: "FeatureCollection",
  features: [
    {
       type: "Feature",
       properties: {
         OBJECTID: 0,
         NAME: "交溪",
         POINTCODE: "AS123"
       },
       geometry: {
         type: "LineString",
         coordinates:[]
       }
    },
    {
      type: "Feature",
       properties: {
         OBJECTID: 1,
         NAME: "上清",
         POINTCODE: "df998"
       },
       geometry: {
         type: "LineString",
         coordinates:[]
       }
    }
  ]
}

断面接口数据如下

{
  head:{
    total:"2",
    message:"执行成功"，
    state:"true",
    statusCode:"200"
  }
  data:[
    {
      longitude: 118.882,
      latitude: 25.0445,
      code: "AS123"，
      name: "宁化肖家",
      WaterQualityLevel: 2
    },
    {
      longitude: 118.554,
      latitude: 25.676,
      code: "df998"，
      name: "永安安砂水库",
      WaterQualityLevel: 3
    }
  ]
}
  • 河流和断面是一对一的映射关系，通过二者的相同字段连接起来
  • 将河流和断面关联起来的连接字段是：河流 json 中的 POINTCODE 字段和断面接口中的 code 字段
  • 关联之后的结果是河流json 既有河流属性字段，也有相关联的断面属性字段，如下
  • 这样关联后就可以用断面的水质级别字段（WaterQualityLevel）唯一值渲染河流
{
  type: "FeatureCollection",
  features: [
    {
       type: "Feature",
       properties: {
         OBJECTID: 0,
         NAME: "交溪",
         POINTCODE: "AS123",
         longitude: 118.882,
         latitude: 25.0445,
         code: "AS123"，
         name: "宁化肖家",
         WaterQualityLevel: 2
       },
       geometry: {
         type: "LineString",
         coordinates:[]
       }
    },
    {
      type: "Feature",
       properties: {
         OBJECTID: 1,
         NAME: "上清",
         POINTCODE: "df998",
         longitude: 118.554,
         latitude: 25.676,
         code: "df998"，
         name: "永安安砂水库",
         WaterQualityLevel: 3
       },
       geometry: {
         type: "LineString",
         coordinates:[]
       }
    }
  ]
}

# 是否使用服务样式

只针对要素服务图层，因为要地图服务本身自带样式，可以选择使用要素图层自带的默认样式，也可以通过设置渲染重新定义图层样式

# 可见图层

设置动态服务（包括 ArcGIS 动态服务和 WMS 图层）的可见图层，因为动态服务中可能有一个或多个图层，可以自定义需要展示动态服务中的哪些图层

# 图层标注

  • 标注内容：即标注字段

  • 标注样式：包括字体、大小、颜色、晕圈等

  • 标注显示：是否显示、显示位置、可见范围（地图比例尺）

# 图层提示框

  • 提示框内容：即提示字段

  • 提示框样式：包括字体大小、字体颜色、背景色等

  • 提示框显示：是否显示、显示位置偏移量

  • 触发事件：鼠标移动到要素时触发

# 图层信息框

  • 信息框内容：

    • 标题：若使用图层字段，格式为 “${字段名}”，如 ${entername} ，也可自定义标题内容
    • 内容：通过写 html 标签，自定义信息框的样式和显示内容，若需要使用图层字段，格式同标题，为 “${字段名}”

  • 信息框样式：主要样式通过弹框内容的 style 标签定义，也可以设置弹框的宽高

# 图层操作

# 新建

  • 新建目录：自定义目录名称
  • 新建图层：默认新建接口图层

# 移动

把图层放在某个自定义目录下或者放在根目录下

# 复制

快速拷贝图层副本

# 删除

删除图层

# 图层顺序

  • 置顶：该图层显示在图层菜单顶部，地图上该图层显示在最底层，被其他图层覆盖
  • 置底：该图层显示在图层菜单底部，地图上该图层显示在顶层，覆盖其他图层
  • 上移：在图层菜单中该图层上移一级，在地图上该图层下移一级
  • 下移：在图层菜单中该图层下移一级，在地图上该图层上移一级

以上操作若是针对目录操作，则对该目录下全部图层整体操作

# 数据切换

用于将底图和图层中使用的 IP 端口、token 等整体替换

# 微件

内置了十余种即用型微件：书签、绘图、打印、鹰眼等，以供快速构建应用。

用户可添加、删除微件，自定义微件在地图上的位置，以及设置是否打开面板，即拿即用。

# 缩放滑块

缩放地图

# 回到默认范围

一键回到初始范围

# 底图切换

根据不同的地图风格，按照某种规律切换底图的显隐

# 具体配置
{
  "id": "widgets_MapSwicher_Widget", // 微件id
  "name": "MapSwicher", // 微件名称
  "position": { // 微件按钮的位置（支持上下左右，优先级：top > bottom, left > right）
    "top": 215,
    "left": 25,
    "relativeTo": "map"
  },
  "label": "底图切换", // 鼠标悬浮在按钮上的提示文本
  "uri": "widgets/MapSwicher/Widget" // 该微件的主代码文件地址
}
# 注意事项

能切换的图层必须在图层名称中带有 普通底图、影像地图、地形地图 关键字

# 具体实现逻辑

  • 获取地图所有图层，并找到图层名称带有三个关键字的图层和判断当前是三个中的哪一个在显示（没有默认为普通图层）

  • 显示下一顺序的图层，隐藏其他图层（顺序为 普通底图 -> 影像地图 -> 地形地图）

# 经纬度

显示实时的鼠标位置经纬度

# 比例尺

显示当前视图下的比例尺

# 图层列表

控制图层显示或隐藏、点位图层切换热力和聚合渲染

# 具体配置
{
  "id": "widgets_LayerManager_Widget", // 微件id
  "uri": "widgets/LayerManager/Widget",
  "config": "configs/LayerManager/config.json",
  "panelPosition": { // 微件面板的位置（支持上下左右，优先级：top > bottom, left > right）
    "top": 20,
    "relativeTo": "map",
    "right": 690,
    "height": 500
  },
  "position": {// （可选）微件按钮的位置，默认在按钮的附近（支持上下左右，优先级：top > bottom, left > right）
    "top": 20,
    "right": 70,
    "relativeTo": "map"
  },
  "label": "图层列表", // 鼠标悬浮在按钮上的提示文本
  "name": "图层列表", // 微件名称
  "openAtStart": true, //
  "showAtStart": false
}

# 鹰眼

地图显示范围的缩略图，可显示当前地图窗口在整幅地图中的位置。通过拖动鹰眼图对话框中的矩形框可改变当前地图的显示区域范围

# 打印

当前视图输出

# 书签

在浏览地图过程中将某一时刻的地图视图保存为书签，便于用户方便地返回已保存的某个视图的状态。

# 测量

测面积、测距以及位置

# 周边

搜索自定义位置周边一定范围内的情况，设置配置文件路径即可

# 绘图

绘制矢量图并提供下载 EsriJSON

# 搜索

关键字查询

# 图例

对地图上各种符号和颜色所代表内容的解释和说明

  • 新建图例场景

可以根据场景创建多个图例

  • 删除场景图例

删除某个场景的图例

  • 新建图层/目录的图例

    • 新建图层：当图层是简单渲染时，适合通过新建图层创建该图层的图例
    • 新建目录：当图层是ECharts渲染、HTML渲染等其他渲染时，适合通过新建目录创建该图层的图例，须保证目录名和图层名一致才能在图层列表微件中操作图层显隐时动态更新图例

  • 添加或编辑具体子图例项 新建目录可以添加并编辑该目录下的子图例项;新建图层可以编辑该图层下的子图例项

    • 图例名：展示在图例中的每个图标或色块的标注
    • 类型：
      • 图片：可从图标库选择图片或者上传图片，设置图片宽高
      • 色块：可设置色块的填充色、边框的颜色和宽高、色块的宽高
    • 数据筛选 如果子图例是图片，可以设置数据筛选功能 数据筛选即点击图例图片后图片置灰，地图上不显示该图片代表字段相关的点位；再次点击该图片，图片变亮，地图上显示该图片代表字段相关的点位
      • 是否启用数据筛选
      • 筛选字段：图片代表的字段
      • 字段值：图片代表的字段值
  • 是否显示

默认只能显示一个场景的图例

  • 是否展开

图例显示时是否展开全部内容

# 时间轴

随时间轴播放更新图层

  • 新建时间轴场景

可以根据场景创建多个时间轴

  • 删除场景时间轴

删除某个场景的时间轴

  • 名称

时间轴名称

  • 数据来源

    • 自定义：时间数据可以手动输入自定义
    • 接口：时间轴的各个数据可以请求接口获取

  • 时间设置

    • 固定时间：时间轴展示固定的一段时间
    • 实时时间：时间轴展示的是根据实时时间动态更新变化的一段时间

  • 时间类型

支持年、月、日、小时和分钟五种格式

  • 开始时间

时间轴展示时间段的开始时间

  • 结束时间

时间轴展示时间段的结束时间

  • 选中时间

时间轴默认的选中时间

  • 分割时间

如果时间轴展示的时间段分实测时间段和预测时间段，分割时间就是分割实测和预测的时间

  • 标注显示

自定义标注格式、标注间隔、标注的位置

  • 时间线显示

时间线分长线和短线，可自定义时间线间隔，长线时刻为时间轴可播放时刻

  • 播放速度

时间轴播放时的速度，单位为毫秒

  • 自动播放

时间轴加载后，是否自动播放

  • 循环播放

时间轴播放是否循环播放

  • 记住播放时间

记住播放时间后，播放结束的终点是开始播放时间，否则是开始时间

  • 默认显示

默认只能显示一个场景的时间轴

# 开发者代码

参考开发文档和示例程序，借助提供的部分常用代码片段，编写 JavaScript 代码，实现业务需求

← 进阶 →