例1: 単一のラスター・レイヤーとともにORDSを使用するラスター・タイル・サービス

C.1 例1: 単一のラスター・レイヤーとともにORDSを使用するラスター・タイル・サービス

この例では、ラスター・データがスキーマscott下のworldという表に格納されていることを前提としています。表worldは、次の構造で定義されています:

CREATE TABLE world (
  georid	NUMBER PRIMARY KEY,
  georaster     SDO_GEORASTER
);

表worldには6つの行が含まれており、georaster列内の各GeoRasterオブジェクトは、SRIDが8307、セル深度が8BIT_U、仮想モザイクの空間エクステントがWGS84 (-180 -90 180 90)の地理参照3バンド・ラスターです。

次のステップを実行して、SDO_GEOR_UTL.get_rasterTileファンクションをコールするエンドポイントを作成し、MapLibreでラスター・タイル・レイヤーを構成します。必要に応じて、使用する環境にあわせてデフォルト値を置き換えてください。

ORDSを構成します。

コマンドords install (「Oracle REST Data Servicesのインストールおよび構成」を参照)を使用して、データベース接続パラメータを指定してORDSへの新しい接続を作成します。
ORDS RESTエンドポイントを作成します。
1. 次のPL/SQLブロックを使用して、スキーマscottをREST対応にします:
```
BEGIN
   ORDS.ENABLE_SCHEMA(
    p_enabled             => TRUE,
    p_schema              => 'SCOTT',
    p_url_mapping_type    => 'BASE_PATH',
    p_url_mapping_pattern => 'scott',
    p_auto_rest_auth      => FALSE);
  COMMIT;
END;
```
2. 次のPL/SQLブロックを使用して、service1というモジュールを定義します:
```
BEGIN
  ORDS.DEFINE_MODULE(
    p_module_name    => 'service1',
    p_base_path      => '/service1/',
    p_items_per_page =>  25,
    p_status         => 'PUBLISHED',
    p_comments       => NULL);
  COMMIT;
END;
```
3. モジュールservice1で、パターンが'vegetation/:z/:x/:y'のエンドポイントのテンプレートを定義します。
  次のコードで使用されるp_pattern値では、vegetationを使用して、表worldにアクセスするこの特定のエンドポイントを一意に識別します。同じ表にアクセスする複数のエンドポイントがモデルservice1に定義されている可能性があります。パラメータx、yおよびzは、エンドポイントURL文字列を介して渡されるパラメータです。これらは、次のステップでSDO_GEOR_UTL.get_rasterTileファンクションに渡されます。
```
BEGIN
   ORDS.DEFINE_TEMPLATE(
     p_module_name    => 'service1',
     p_pattern        => 'vegetation/:z/:x/:y',
     p_priority       => 0,
     p_etag_type      => 'HASH',
     p_etag_query     => NULL,
     p_comments       => NULL);
   COMMIT;
END;
```
4. 前のステップで定義したテンプレートのハンドラを定義します。
  ハンドラのp_module_nameおよびp_patternは、テンプレートと同じです。p_sourceは、エンドポイントへのアクセス時に実行されるPL/SQLブロックを定義します。p_patternのx、yおよびzパラメータは、p_sourceのPL/SQLブロックに渡され、world表のgeoraster列にあるすべてのGeoRasterオブジェクトから作成された仮想モザイクからタイルを取得します。
```
BEGIN
  ORDS.DEFINE_HANDLER(
    p_module_name    => 'service1',
    p_pattern        => 'vegetation/:z/:x/:y',
    p_method         => 'GET',
    p_source_type    => ords.source_type_media,
    p_items_per_page =>  0,
    p_mimes_allowed  => '',
    p_comments       => NULL,
    p_mle_env_name   => NULL,
    p_source         =>
    'SELECT ''image/png'' as mediatype, SDO_GEOR_UTL.GET_RASTERTILE(
          TABLE_NAME=>''WORLD'',
          GEOR_COL_NAME=> ''GEORASTER'',
          TILE_X=>:x,
          TILE_Y=>:y,
          TILE_ZOOM=>:z,
          MOSAIC_PARAM=>''resFilter=false'') from dual'
  );
  COMMIT;
 END;
```
  これで、ラスター・タイル・サービスは、次のパターンのHTTPリクエストを受信できるようになりました:
  
  http://localhost:8080/ords/scott/service1/vegetation/{z}/{x}/{y}
5. curlまたはWebブラウザを使用して、URL http://localhost:8080/ords/scott/service1/vegetation/0/0/0にGETリクエストを送信して、エンドポイントを確認します。
  
  URLパターン(前のステップを参照)の{z}、{x}および{y}は、ズーム・レベル0 (ゼロ)で一意のタイルをリクエストするために、ゼロに置き換えられます。

MapLibreを使用してエンドポイントを使用します。

次のHTMLコードおよびJavaScriptコードは、ステップ2で作成したラスター・タイル・サービス・エンドポイントを、MapLibre GL (グラフィック・ライブラリ) JS (Javaスクリプト)に追加する方法を示しています。

サンプル・コードの関連要素は次のとおりです:

ソース・オブジェクトの'type'属性(値は'raster')および'tiles'属性(値はXYZエンドポイントURLの配列)。
レイヤー・オブジェクトの'type'属性(値は'raster')およびソース・オブジェクトを参照する属性'source'。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display GeoRaster</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://maps.oracle.com/mapviewer/pvt/res/style/osm-positron/style.json',
    center: [0.0, 0.0],
    zoom: 1,
    transformRequest: (url, resourceType) => {
      if (resourceType === 'Tile' && (
        
url.startsWith('https://maps.oracle.com/mapviewer/pvt') ||
        url.startsWith('https://elocation.oracle.com/mapviewer/pvt'))
      ){
        return {
          url: url,
          headers: {'x-oracle-pvtile': 'OracleSpatial'},
          credentials: 'include'
        };
      }
    }
  });
  const sourceId = 'raster-tiles';
  map.on('load', function () {
    map.addSource(sourceId, {
        'type': 'raster',
        'tiles' : ['http://localhost:8080/ords/scott/service1/vegetation/{z}/{x}/{y}'],
        'minzoom': 0,
        'maxzoom': 22,
        'tileSize' : 256
    });
    map.addLayer(
        {
            'id': 'georaster',
            'type': 'raster',
            'source': sourceId,
            'paint':  {
                'raster-opacity': 1,
                'raster-hue-rotate': 0,
                'raster-brightness-min': 0,
                'raster-brightness-max': 1,
                'raster-saturation': 0,
                'raster-contrast': 0,
                'raster-fade-duration': 300
            }
        }
    );
  });
  map.addControl(new maplibregl.NavigationControl());
  map.addControl(new maplibregl.FullscreenControl());
</script>
</body>
</html>

要件に応じて前述の例をカスタマイズできることに注意してください。

親トピック: Webアプリケーション用のラスター・タイル・サービスの作成と使用