OpenLayers Map widget｜Let's FIWARE

OpenLayers Map widget は、地図上にデータを表示する、マップ・ビューアー・ウィジェットです。このウィジェットは、レイヤー・データまたは Point of Interest データを受信して、マップに表示できます。

このウィジェットは、地図を表示するためにスタンドアロンで使用できます。ウィジェットに NGSI Entity2poi operator や NGSI Datamodel2poi operator などの他の Wirecloud コンポーネントを介して Point of Interest データを供給し、マップ上に表示できます。

ワイヤリング

入力エンドポイント

Layer Info: ベースレイヤーの変更に加えて、マップにレイヤーを追加または削除します。 Layer Info エンドポイントは、action と data の2つのフィールドを持つ JSON を受け取ります

action: このフィールドは、レイヤーで実行されるアクションを示します。3つの使用可能なアクションがあります:
- addLayer: レイヤーをマップに追加します。このアクションでは、id データフィールドを設定する必要があります
- removeLayer: マップからレイヤーを削除します。このアクションでは、id データ・フィールドを設定する必要があります。
- setBaseLayer: マップの基本レイヤーを変更します。このアクションでは、id データ・フィールドを設定する必要があります。
data: このフィールドには、アクションが実行されるレイヤーを識別するために必要なすべてのデータが含まれます。addLayer アクションの場合、レイヤーを定義および構成するために必要です

レイヤーを作成するには、レイヤー・ソースの目的の設定とは別に、レイヤー・タイプを定義する必要があります。例えば :

{
    "action": "addLayer",
    "data": {
        "id": "My Layer",
        "type": "ImageWMS",
        "url": "UrlToMyWMSService"
    }
}

{

"action": "addLayer",

"data": {

"id": "My Layer",

"type": "ImageWMS",

"url": "UrlToMyWMSService"

}

利用可能なタイプとオプションを確認するには、OpenLayers Documentation を参照してください。

Insert/Update PoI: Point of Interest を挿入または更新します。このエンドポイントは、１つのPoI または配列を介した複数の PoIs の送信をサポートします。各 PoI は次のフィールドで構成されています:
- id (required): この PoI を識別するために使用される id。関連付けられた PoI を見つけるための更新および削除操作で使用されます
- currentLocation (非推奨, location を使用しない場合は必須):
  - longitude (必須):
  - latitude (必須):
  - system: 測地基準系 (geodetic datum system)。通常は WGS84, UTM の可能性があります
- data: PoI selected 出力エンドポイントによって使用される、対象ポイントに関連付けられたデータ
- icon: マーカーまたは使用するアイコンを説明するオブジェクトに使用するアイコンのURL。利用可能なオプション:
  - anchor: アンカー位置。デフォルト値は [0.5, 0.5] (アイコンの中心)
  - anchorXUnits: アンカー x 値が指定されている単位。’fraction’ という値は、x 値がアイコンの一部であることを示します。’pixels’ の値は、ピクセル単位の x 値を示します。デフォルトは ‘fraction’ です
  - anchorYUnits: アンカー y 値が指定されている単位。’fraction’ という値は、y 値がアイコンの一部であることを示します。’pixels’ の値は、ピクセル単位の y 値を示します。デフォルトは ‘fraction’ です
  - opacity: アイコンの不透明度 (範囲は 0～1)。デフォルトは 1 です
  - scale: スケール。デフォルトは 1 です
  - src: イメージのソース URL
- iconHighlighted: PoI が選択されたときに使用するアイコン設定。icon フィールドと同じように機能します
- infoWindow: PoI に関連付けられたコンテンツ (HTMLを使用)
- location (currentLocation を使用しない場合に必要) : GeoJSON ジオメトリ。例えば {“type”: “Point”, “coordinates”: [125.6, 10.1]}
- minzoom (整数値): この PoI を表示する最小ズーム・レベル。空のままにすると、任意のズーム・レベルで PoI を表示します
- selectable (ブール値): ユーザがこの PoI を選択できる場合は true。(デフォルトの動作)
- style: レンダリングに使用するスタイル。サポートされているオプション:
  - fill:
    - color: 塗りつぶし色。CSS3 色、つまり16進数の rgb または rgba の色
  - stroke:
    - color: ストローク色。CSS3 色、つまり16進数の rgb または rgba の色
    - width: ピクセル単位のストローク幅
- iconHighlighted: PoI が選択されたときにレンダリングするために使用するスタイル。style フィールドと同じように機能します。提供されない場合、style の設定が使用されます
- subtitle: PoIに関連付けられたサブタイトル (字幕)
- title: PoI に関連付けられたタイトル
- tooltip: マウスが PoI の上にあるときにツールチップとして表示されるテキスト
Insert/Update Centered PoI: PoI を挿入または更新し、地図の中心にあるビューポートを変更します。Insert/Update PoI エンドポイントで使用されるのと同じ形式を使用します
Delete PoI: 地図から1つ以上の PoI を削除します
Replace PoIs: レンダリングされたすべての PoIs を、イベントで提供されたものに置き換えます。Insert/Update PoI で使用されるものと同じ形式を使用します

Output Endpoints

PoI selected: 地図上で選択された PoI
Visible Pols: 地図上に表示されている PoIs

設定

Initial Location: 地図の中心となる 10進座標。例: 52, 5。初期設定でマップを中央に配置しない場合は、この設定を空のままにします。初期位置を指定する場合は、必ず初期ズームレベルを変更してください
Initial Zoom Level: 初期ズームレベル。1 から 22 まで。1 は最も遠いレベルを表し、22 は最大ズームレベルを表します。デフォルトは 3 です
Min Zoom: ズームレベルの最小値。デフォルトは 4 です
PoI Zoom: PoI をセンタリングするときに適用されるズームレベル。デフォルトは 17 です
Layers Widget: ユーザがレイヤーを切り替えるために使用するウィジェット

ワイヤリング例

入力データ例

表示例

サンプルデータ

[
  {
    "id": "point001",
    "location": {
      "type": "Point",
      "coordinates": [
        139.7729,
        35.698225
      ]
    }
  },
  {
    "id": "line001",
    "location": {
      "type": "LineString",
      "coordinates": [
        [
          139.702629,
          35.671282
        ],
        [
          139.701519,
          35.65795
        ],
        [
          139.709852,
          35.646562
        ]
      ]
    }
  },
  {
    "id": "polygon001",
    "location": {
      "type": "Polygon",
      "coordinates": [
        [
          [
            139.692144,
            35.689913
          ],
          [
            139.741369,
            35.658161
          ],
          [
            139.767168,
            35.681489
          ],
          [
            139.692144,
            35.689913
          ]
        ]
      ]
    }
  }
]

[

{

"id": "point001",

"location": {

"type": "Point",

"coordinates": [

139.7729,

35.698225

]

}

{

"id": "line001",

"location": {

"type": "LineString",

"coordinates": [

[

139.702629,

35.671282

[

139.701519,

35.65795

[

139.709852,

35.646562

]

}

{

"id": "polygon001",

"location": {

"type": "Polygon",

"coordinates": [

[

139.692144,

35.689913

[

139.741369,

35.658161

[

139.767168,

35.681489

[

139.692144,

35.689913

]

}

]

Layer Info のワイヤリング例

レイヤー・データを、OpenLayrs Map Widgetの Layer Info の入力エンドポイントに入力できるようワイヤリングします。

setBaseLayer

マップ・ビューアー・ウィジェットのベースとなる地図を指定します。CartDB の地図の表示例です。

{
  "action": "setBaseLayer",
  "data": {"id": "CARTODB_LIGHT"}
}

{

"action": "setBaseLayer",

"data": {"id": "CARTODB_LIGHT"}

}

addLayer

KML, GeoJSON, TopoJSON 等のレイヤーを追加できます。

KML

サンプル・データ

{
  "action": "addLayer",
  "data": {
    "type": "Vector",
    "url": "https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/kml/2012_Earthquakes_Mag5.kml",
    "format": "KML",
    "id": "LayerName"
  }
}

{

"action": "addLayer",

"data": {

"type": "Vector",

"url": "https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/kml/2012_Earthquakes_Mag5.kml",

"format": "KML",

"id": "LayerName"

}

GeoJSON

サンプル・データ

{
  "action": "addLayer",
  "data": {
    "type": "Vector",
    "url": "https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries-110m.geojson",
    "format": "GeoJSON",
    "id": "LayerName"
  }
}

{

"action": "addLayer",

"data": {

"type": "Vector",

"url": "https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries-110m.geojson",

"format": "GeoJSON",

"id": "LayerName"

}

TopoJSON

サンプル・データ

{
  "action": "addLayer",
  "data": {
    "type": "Vector",
    "url": "https://raw.githubusercontent.com/niiyz/JapanCityGeoJson/master/topojson/29/29201.topojson",
    "format": "TopoJSON",
    "id": "LayerName"
  }
}

{

"action": "addLayer",

"data": {

"type": "Vector",

"url": "https://raw.githubusercontent.com/niiyz/JapanCityGeoJson/master/topojson/29/29201.topojson",

"format": "TopoJSON",

"id": "LayerName"

}

removeLayer

レイヤーを削除することもできます。

{
  "action": "removeLayer",
  "data": {
    "id": "LayerName"
  }
}

{

"action": "removeLayer",

"data": {

"id": "LayerName"

}

OpenLayers Map widget

ワイヤリング

入力エンドポイント

Output Endpoints

設定

ワイヤリング例

入力データ例

表示例

サンプルデータ

Layer Info のワイヤリング例

setBaseLayer

addLayer

KML

サンプル・データ

GeoJSON

サンプル・データ

TopoJSON

サンプル・データ

removeLayer

関連情報

HighCharts widget

Panel Filter Operator

MapLibre GL widget

ワイヤリング

入力エンドポイント

Output Endpoints

設定

ワイヤリング例

入力データ例

表示例

サンプルデータ

Layer Info のワイヤリング例

setBaseLayer

addLayer

KML

サンプル・データ

GeoJSON

サンプル・データ

TopoJSON

サンプル・データ

removeLayer

関連情報

HighCharts widget

Panel Filter Operator

MapLibre GL widget

Towards a Digital Single Market for Smart Cities

FIWARE による IDS コンセプトの実装

FIWARE はスマート・シティをトランスフォーメーションの旅に導きます

マラガの FIWARE Global Summit ’18 へのご参加、ありがとうございました