丰富您的自定义视图

现在我们用基本内容创建了我们的结构，我们想创建一个真正的目录页。

为此，您可以包括默认视图内容，或者在核心GeoNetwork组件之上构建自己的应用程序。

地理网络组件

UI设计基于共享的小部件、逻辑和组件。用语言来说，我们谈论 services 和 directives .

所有组件都存储在文件夹中 components

• 主页可用组件

主搜索输入

<input type="text"
       class="form-control input-lg"
       id="gn-any-field"
       data-ng-model="searchObj.params.any"
       data-ng-model-options="modelOptionsForm"
       placeholder="{{'anyPlaceHolder' | translate}}"
       data-ng-keyup="$event.keyCode == 13 && triggerSearch()"
       data-typeahead="address for address in getAnySuggestions($viewValue)"
       data-typeahead-loading="anyLoading" class="form-control"
       data-typeahead-min-length="1"
       data-typeahead-focus-first="false">

镶嵌面面板

<div data-ng-show="searchResults.records.length > 0"
     data-gn-facet-dimension-list="searchResults.dimension"
     data-params="searchObj.params"
     data-facet-type="facetsSummaryType"
     data-current-facets="currentFacets">
</div>

警报信息管理器

<div data-gn-alert-manager=""></div>

结果列表

<div data-ng-show="searchResults.records.length > 0"
     data-gn-results-container=""
     data-search-results="searchResults"
     data-template-url="resultTemplate"
     data-map="searchObj.searchMap"></div>

地理搜索

<div data-gn-map-field="searchObj.searchMap"
     data-gn-map-field-geom="searchObj.params.geometry"
     data-gn-map-field-opt="searchObj.mapfieldOption"
     class="gn-search-map">

• 主地图组件

  • WMS端口

  • 地图搜索输入

  • 绘图面板

  • 测量面板

  • 打印面板

  • 图层管理器

  • 背景层选择器

  • 等。。。

因此，可以在模板中重用所有这些组件来构建所需的视图。

风格

重要

您应该导入默认样式并添加自定义CSS规则，而不是从头开始创建自己的CSS规则。

在 gn_search_geoportal.less ，导入默认的较少文件。

• 导入常用搜索样式（如果从头开始新视图）

@import "../../../style/gn_search.less";

• 导入默认视图搜索样式（如果将视图基于默认视图之上）

@import "../../default/less/gn_search_default.less";

然后，在less文件中，可以开始添加新规则

.gn-resultview .list-group-item {
    background-color: red;
    &:hover {
    background-color: orange;
    }
}