界面规范

下面列举了GIS开发相关的界面规范和要求，开发团队须按照以下规范完成自检(GIS界面规范自检表 (opens new window))，自检后须经UI确认所有样式都没有问题才算开发完成，可提交给用户。测试团队也须按此标准进行检查。

基本原则要求

要按配色规范进行配图

具体的地图配图规范，见附录

按规范配置地图的底图、字体、图标等

❌ 没有按要求配色，样式不美观

✔️

背景色与前景色要有对比

❌ 背景色与文字颜色没有对比，看不清

✔️ 文字清晰

要按图标规范配置地图对象图标

• 图标尺寸

  • 大屏：最大不超过44px*44px
  • pc端：42px*42px
  • 移动端：26px*26px

• 水环境

  • 水质级别

    • 水质级别用图标的颜色区分
      Ⅰ：
      rgba(113,190,246, 1)
      Ⅱ：
      rgba(27, 143, 226, 1)
      Ⅲ：
      rgba(88, 191, 108, 1)
      Ⅳ：
      rgba(254,197,33, 1)
      Ⅴ：
      rgba(254, 126, 77, 1)
      劣Ⅴ：
      rgba(246, 97, 77, 1)
      无数据：
      rgba(155, 155, 155, 1)

  • 区域等级分类

    • 区域等级用图标形状区分
    • 手工和自动区别在于：手工图标中间显示为罗马数字表示的水质级别，自动图标中间显示为“自”
      • 手工

    国：六边形

    省：正方形

    市：圆形

    县: 三角形

    乡：菱形

    报警：闪烁

  • 自动

    国：六边形

    省：正方形

    市：圆形

    县: 三角形

    乡：菱形

    报警：闪烁

• 空气质量

  • 空气质量等级划分

    • 空气质量等级用图标的颜色区分
  优：
  rgba(37, 232, 44, 1.00)
  良：
  rgba(253, 252, 1, 1.00)
  轻度：
  rgba(255, 110, 2, 1.00)
  中度：
  rgba(230, 21, 21, 1.00)
  重度：
  rgba(112, 48, 160, 1.00)
  严重：
  rgba(146, 0, 2, 1.00)
  无数据：
  rgba(155, 155, 155, 1.00)

  • 区域等级分类

    • 区域等级用图标形状区分

    国：六边形

    省：正方形

    市：圆形

    微站: 三角形

    报警：闪烁

  • 其他

  

图层叠加要区分主次，重点突出

❌ 没有突出重点图层，不知道关注点在哪

✔️ 断面和河流为主要内容，显示比较明显

可视化范围内的图层对象不能太杂乱

❌ 叠加的信息过多，显得地图很乱

✔️ 默认不要叠加太多的内容

其他规范要求

有河流断面处必须有水体或河流

❌ 不清楚断面在哪条河流上

✔️ 有断面的地方都有河流

🔑

• ArcMap处理动态河流数据 (opens new window)
• 地图构配置河流流动效果

图层应显示名称标注

当前视图范围内的主要地图对象，在满足重点突出、不杂乱的情况下，尽量显示名称标注，让用户一目了然明白当前地图对象是什么

❌ 河流是主要的地图对象，但是只显示了河流，没有河流名称

✔️ 放大后能够显示河流名称，有断面的河流作为主干河流，没有的则作为支流，干流和支流按不同的缩放级别进行显示

🔑 地图构配置图层标注

关键区域应一开始就尽量撑满全屏

❌ 地图未撑满全屏，缩一团很难看

✔️ 初始撑满全屏

🔑 地图构配置地图默认范围

专题图层应显示图例

❌ 不清楚每个图层的含义

✔️ 每个图层有图例

🔑 地图构配置图例

地图要限制最大最小缩放级别

❌ 初始范围是内蒙但缩放后可以看到全世界的范围，没有必要且不合理

✔️ 限制最小缩放级别以及最大缩放级别

🔑 地图构设置地图最大最小缩放级别

点击定位放大后要加定位效果

❌ 点击以后只将图标置于地图中心，没有任何其他效果，点位多看不出究竟是哪个

✔️ 点击后弹出提示信息窗口或在点位上有明显的选中效果

🔑

• 点击定位：zoomToExtent (opens new window)
• 定位效果
  • 弹出信息窗口：showInfoWindow (opens new window)
  • 动态波纹效果：showPointRipplePoint (opens new window)

能点击的点位，鼠标放上去应该变成手型

❌ 鼠标移上没有任何效果，不清楚这个是能点击的

✔️ 有手型

🔑 鼠标移动到图层变成手型：addLayerPointer (opens new window)

图层不可见时，相应的信息窗口应随之关闭

❌ 信息窗口在点位已经不存在的情况下，未及时通过代码关闭

✔️ 及时关闭

🔑 关闭信息窗口：removewPopupWindow (opens new window)

点击聚合的点位后应放大看明细

❌ 点击聚合点位后，未放大显示包含的所有点，一般情况下是有看当前聚合点位下所有点的分布情况的需求

✔️ 点击了聚合的点或者统计图，要显示聚合的真实点位

🔑 点击聚合点位查看明细 (opens new window)

当前展示的图层应与图例相匹配

❌ 图例与地图内容不匹配

✔️ 有图例就有对应的图层

🔑 地图构配置图例

微件始终不要被覆盖

❌ 内容覆盖在弹出的微件面板上

✔️ 微件无遮盖

🔑 地图构设置微件面板位置

"panelPosition": {"top": 100,"relativeTo": "map","right": 850,"height": 500}

侧边栏折叠展开，地图相应随之变化

折叠未展开时

❌ 展开后

✔️ 展开后

🔑 地图随侧边栏折叠展开变化 (opens new window)

有数据列表时，应配套定位功能

❌ 只在地图上显示点位，没有具体的数据列表，无法进行查询； 或是有数据列表，但无定位图标，无法知道具体位置； 当点位无经纬度信息时，定位图片没隐藏或是可被点击，但点击后没有任何效果；

✔️ 用于定位的数据列表，有定位图标，当点位无经纬度信息时，定位图标置灰，有经纬度信息的点位，须确保经纬度是正确的

🔑 定位：zoomToExtent (opens new window)

类似XXX一张图等业务功能，应保证切换业务场景时地图范围不变

在某个业务场景中选择行政区

❌ 切换到另一个业务场景后，只是业务数据的变化，不应该修改地图范围

✔️ 切换到另一个业务场景后，要保证切换后的业务场景也是当前行政区的数据，同时允许用户切换到其他行政区

地图定位效果要连贯

❌ 对图层要素定位时，不能出现地图跳动的情况（先缩小又放大，或者先放大又缩小）

✔️ 对图层要素定位时，动作是连贯的，仅放大或仅缩小

图层要素的弹框样式要美观

❌ 图层要素的弹框，默认不要显示滚动条

✔️ 图层要素的弹框样式美观

重置操作，应该同时清空地图上的缓冲结果和数据列表

❌ 重置操作，地图上的缓冲结果和数据列表都没有清空

✔️ 重置操作，应该同时清空地图上的缓冲结果和数据列表

缓冲结果

重置后

附录：地图配色规范

地形图（应用于大屏）

• 地形图配色

rgb(196,192, 128)

rgb(151, 186, 108)

rgb(100,158, 71)

rgb(34, 148, 74)

rga(0, 112, 84)

• 基础图层配色

全国省界颜色：

rgba(95, 193, 208, 255)

缓冲边界颜色（从内到外）：

rgba(10, 54, 175, 1)

rgba(35,107,240,1)

rgba(37, 202, 243,1)

遮罩颜色：

rgba(0, 13, 87, 0.5)

市州边界颜色：

rgba(130, 243, 141, 1)

区县边界颜色：

rgba(130, 243, 141, 1)

乡镇边界颜色：

rgba(28, 77, 32, 1)

选中区域颜色：

    边界：

rgba(255, 255, 255, 1)

    填充：

rgba(255, 255, 255, 0.2)

河流线颜色：

rgba(0, 234, 255, 1)

河流点颜色：

rgba(255, 255, 255, 1)

• 字体样式

  • 市州、区县标注

    字体：
    宋体
    字体颜色：
    rgba(0, 0, 0, 1)
    字体大小：
    13px
    晕圈颜色：
    rgba(255, 255, 255, 1)
    晕圈大小：
    2px
    字体样式：
    粗体、斜体

  • 河流标注

    干流字体：
    微软雅黑（Blod）
    干流字号：
    14px
    支流字体：
    微软雅黑（Blod）
    支流字号：
    11px
    流域标注颜色：
    rgba(0, 112, 255, 1)
    晕圈颜色：
    rgba(255, 255, 255, 1)
    晕圈大小：
    1px

地形图（应用于 pc 端）

• 地形图配色

rga(145, 48, 0)

rgb(210, 142, 69)

rgb(253,208, 122)

rgb(255, 220, 155)

rgb(90,176, 91)

rgb(118,197, 133)

rgb(151,225, 165)

• 基础图层配色

全国省界颜色：

rgba(95, 193, 208, 255)

缓冲边界颜色（从内到外）：

rgba(10, 54, 175, 1)

rgba(35,107,240,1)

rgba(37, 202, 243,1)

遮罩颜色：

rgba(0, 13, 87, 0.5)

市州边界颜色：

rgba(0, 0, 0, 1)

区县边界颜色：

rgba(130, 243, 141, 1)

乡镇边界颜色：

rgba(28, 77, 32, 1)

选中区域颜色：

    边界：

rgba(255, 255, 255, 1)

    填充：

rgba(255, 255, 255, 0.2)

河流线颜色：

rgba(0, 234, 255, 1)

河流点颜色：

rgba(255, 255, 255, 1)

• 字体样式

  • 市州、区县标注

    字体：
    宋体
    字体颜色：
    rgba(0, 0, 0, 1)
    字体大小：
    13px
    晕圈颜色：
    rgba(255, 255, 255, 1)
    晕圈大小：
    2px
    字体样式：
    粗体、斜体

  • 河流标注

    干流字体：
    微软雅黑（Blod）
    干流字号：
    14px
    支流字体：
    微软雅黑（Blod）
    支流字号：
    11px
    流域标注颜色：
    rgba(0, 112, 255, 1)
    晕圈颜色：
    rgba(255, 255, 255, 1)
    晕圈大小：
    1px

影像图（应用于大屏及 pc 端）

大屏和pc端的影像图都使用天地图影像-墨卡托

• 基础图层配色

全国省界颜色：

rgba(95, 193, 208, 255)

缓冲边界颜色（从内到外）：

rgba(10, 54, 175, 1)

rgba(35,107,240,1)

rgba(37, 202, 243,1)

遮罩颜色：

rgba(0, 13, 87, 0.5)

市州边界颜色：

rgba(0, 0, 0, 1)

区县边界颜色：

rgba(130, 243, 141, 1)

乡镇边界颜色：

rgba(28, 77, 32, 1)

选中区域颜色：

    边界：

rgba(255, 255, 255, 1)

    填充：

rgba(255, 255, 255, 0.2)

河流线颜色：

rgba(0, 234, 255, 1)

河流点颜色：

rgba(255, 255, 255, 1)

• 字体样式

  • 市州、区县标注
  字体：
  宋体
  字体颜色：
  rgba(0, 0, 0, 1)
  字体大小：
  13px
  晕圈颜色：
  rgba(255, 255, 255, 1)
  晕圈大小：
  2px
  字体样式：
  粗体、斜体
  • 河流标注
  干流字体：
  微软雅黑（Blod）
  干流字号：
  14px
  支流字体：
  微软雅黑（Blod）
  支流字号：
  11px
  流域标注颜色：
  rgba(0, 112, 255, 1)
  晕圈颜色：
  rgba(255, 255, 255, 1)
  晕圈大小：
  1px