nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript を使い始める - レイヤーのグループ化

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A> <\/P>

<\/P>

GroupLayer ウィジェット<\/H1><\/P>このGroupLayer <\/>ウィジェットを使うと、複数のサブレイヤーを共通のレイヤーにグループ化できます。<\/P>

<\/P>

この例では、

Gemeente Tilburg の ArcGIS Server<\/>で見つけた美しい歴史的な航空写真と地図のセットを使用しています。これらの写真と地図はウェブアプリで2つのグループに分けられており、長いレイヤーリストではなく、2つのグループレイヤーの見やすいリストになっています。<\/P><\/P>オプション visibilityMode: "exclusive" <\/>を使うことで、サブレイヤーにラジオボタンが表示されます。これにより、1934年から2018年までの航空写真と1760年から1976年までの地図を簡単に切り替えることができます。<\/P><\/P>ここでアプリケーションの動作を見ることができます:<\/P>Tilburg の歴史 | 歴史的地図と航空写真<\/><\/>A> <\/>P>

<\/>P>ソースコードは以下にあります。<\/>P><\/>P>

<!DOCTYPE html><\/>SPAN>
<<\/>html<\/>SPAN>><\/>SPAN><\/>SPAN>
<<\/>head<\/>SPAN>><\/>SPAN><\/>SPAN>
<<\/>meta<\/>SPAN> charset<\/>=<\/>"<\/>utf-8"<\/><\/>
">
<!-- メニュー -->
<div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
<a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="calcite-dropdown-toggle">
<span class="sr-only">ドロップダウンメニューを切り替え < /  span   >  
 < /  span   >  
 < /  span   >  
 < /  span   >  
 < /  span   >  
 < /  div </ Span >< Span Class = "Punctuation Token "> & gt ; </ Span ></ Span >
      < Span Class = "Token Tag ">< Span Class = "Token Tag ">< Span Class = "Punctuation Token "> < / </ Span > a </ Span >< Span Class = "Punctuation Token "> & gt ; </ Span ></ Span >
      < Span Class = "Token Tag ">< Span Class = "Token Tag ">< Span Class = "Punctuation Token "> <ul </ Span >< Span Class = "Attr-Name Token ">class </ Span >< Span Class = "Attr-Value Token ">< Span Class = "Punctuation Token ">=</ Span >< Span Class = "Punctuation Token ">" </ Span > dropdown-menu </ Span >< Span Class = "Punctuation Token ">" </ Span ></ Span >< Span Class = "Attr-Name Token ">role </ Span >< Span Class = "Attr-Value Token ">< Span Class = "Punctuation Token ">=</ Span >< Span Class = "Punctuation Token ">" </ Span > menu </ Span >< Span Class = "Punctuation Token ">" </ Span ></ Span >< Span Class = "Punctuation Token ">> </ Span ></ Span >
        < span  クラス  =  token"><<\/SPAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>calcite-title-main"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>ティルブルフの歴史<\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/SPAN>span<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>calcite-title-divider hidden-xs"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/PAN>span<\/SPAN>><\/SPAN><\/SPAN>
<\/<\/PAN>span<\/SPAN> class<\/SPAN>=<\/PAN>"<\/Span>calcite-title-sub hidden-xs"Kijk terug in de tijd op oude luchtfoto's en kaarten<\/span>
<\/div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav"
<li>
<div class="calcite-navbar-search calcite-search-expander"
<div id< Span >< Span > = < Span > "searchWidgetDiv" < Span > >< Span >< Span > & lt ; / div > < Span > 
        < Span >< Span > & lt ; / div > 
      < Span >< Span > & lt ; / li > 
    < Span >< Span > & lt ; / ul > 
  < Span >< Span > & lt ; / nav > 

  < Span >< Span > & lt ; !-- /.calcite-navbar -- > 

  < Span >< Span > & lt ; !-- Map  -- > 

  < Span >< Span > & lt ; div  Class = "calcite-map calcite-map-absolute" > 
    < Span >< Span > & lt ; div  Id = "mapViewDiv" > 
    < Span >< Span > & lt ; / div > 
  < Span >< Span > & lt ; / div > 

  < Span >< Span > & lt ; !-- /.calcite-map -- > 

  < Span >< Span > & lt ; !-- Panels -- > 

  < Span >< Span > & lt ; div  Class = "calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group" > 

    < Span >< Span > & lt ; !-- Panel - About -- > 

    < Span >< Span > & lt ; div  Id = "panelInfo" Class = "panel collapse in" > 
      < Span >< Span > & lt ; div  Id = "headingInfo" Class = "panel-heading" Role = "tab" > 
        < Span >< Span > & lt ; div  Class = "panel-title" > 
          < Span >< Span > & lt ; a  Class = "panel-toggle" Role = "button" Data-toggle = "collapse" Href = "#collapseInfo" Aria-expanded = "true" Aria-controls = "collapseInfo" > 
            < Span >< Span > & lt ; span  Class = "glyphicon glyphicon-info-sign" Aria-hidden = "true" > 
            < Span >< Span > & lt ; / span > 
            < Span >< Span > & lt ; span  Class = "panel-label" >  token">><\/SPAN><\/SPAN><<\/SPAN>b<\/SPAN>><\/SPAN><\/SPAN>この地図について<\/<\/SPAN>b<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>a<\/SPAN>><\/SPAN><\/SPAN> 
<<\/SPAN>a<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>panel-close"<\/SPAN><\/SPAN> role<\/SPAN>=<\/SPAN>"<\/Span>button" data-toggle="collapse" tabindex="0" href="#panelInfo"></spanb  href="https://www.tensing.com/">Tensing GIS Consultancy B.V.</a></p>
</div>
</div>
</div>

<div id="panelGuide" class="panel collapse in">
<div id="headingInfo" class="panel-heading" role="tab">
 & Lt; /  Div </ Span >  & Gt; </ Span ></ Span >
 & Lt; /  Div </ Span >  & Gt; </ Span ></ Span >
 & Lt; Div </ Span > </ Span >   Id </ Span >     = </ Span >   " </ Span > CollapseInfo   " </ Span >  </ Span >    クラス  </ Span >     = </ Span >   " </ Span > パネル-コラプス コラプス イン   " </ Span >  </ Span >   役割  </ Span >     = </ Span >   " </ Span > タブパネル   " </ Span >  </ Span >   aria-labelledby  </ Span >    =  "headingInfo"  </ Span >>
<Div< / span >< spanclass=   token">:<\/SPAN> 500px;<\/SPAN><\/SPAN>"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>table<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>thead<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>tr<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>th<\/SPAN> colspan<\/SPAN>=<\/SPAN>"<\/SPAN>2"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>画面右側のボタン<\/<\/span>th<\/span>><\/span><\/span><\/<\/span>tr<\/span>><\/span><\/span><\/<\/span>thead<\/span>><\/span><\/span>
<\/<\/span>tbody<\/span>><\/span><\/span>
<\/<\/span>tr<\/span>><\/span><\/span>
<td><\/td>



                    住所検索
                    <\/<td>




                    地図レイヤーのオン/オフ切り替え
                    <\/<td>
                <\/<tr>





                    ベースマップを選択
                    <\/<td>




                    初期位置に戻る
                    <\/<td>
                <\/<tr>



  token">><\/SPAN><\/SPAN><\/<\/SPAN>span<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>esri-widget--button"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><<\/SPAN>span<\/SPAN> title<\/SPAN>=<\/SPAN>"<\/SPAN>ズームアウト"<\/SPAN><\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>esri-icon-minus"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/span<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>地図のズームインとズームアウト<\/td><divclass=

タグ付けされた投稿をもっと見る

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.