カスタムビューを豊富にします¶

基本的な内容を使って私たちの構造を作りました本当のカタログページを作りたいと思います

そのため、デフォルトビュー内容を含むか、コアGeoNetworkコンポーネント上にご自身のアプリケーションを構築することができます。

地理的ネットワークコンポーネント¶

UI設計は、共有されたウィジェット、論理、およびコンポーネントに基づく。AngularJSの用語では 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">

主な地図コンポーネント
- Wmsimport
- 地図検索入力
- 描画パネル.
- 測定パネル
- 印刷パネル
- レイヤマネージャ
- 背景レイヤセレクタ
- ちょっと待って。

したがって、これらのすべての構成要素をテンプレート内で再利用して、必要なビューを構築することができます。

様式.様式¶

重要

デフォルトのスタイルを導入し、自分のスタイルを最初から作成するのではなく、カスタム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;
    }
}