動的タイル層の使用

4.5.1 動的タイル層の汎用および構成インスタンスの作成

動的タイル層インスタンスを作成するには、動的タイル層の汎用およびタイル層構成を作成する必要があります。

たとえば、baseURLという名前の変数が適切に定義され(http://myapp.mycorp.com/mapviewerなど)、指定されたデータ・ソースが存在しているものとします。タイル層の構成インスタンスおよび汎用インスタンスを作成する必要があります。Oracle Maps JavaScript API組込みの汎用を使用することも、独自のものを作成することもできます。わかりやすくするため、ここでは組込みの汎用を使用します。

タイル層構成インスタンスは、画像タイルのディメンションのみを定義する必要があり、タイル画像の幅および高さには256ピクセルが一般的に使用されます。次のコード・スニペットは、このインスタンスを作成します。

  var  myuniv= new OM.universe.LatLonUniverse();  // a built-in universe
  var  myconfig=new OM.layer.TileLayerConfig(  // a tile layer configure instance
          {
	        tileImageWidth: 256,  
	        tileImageHeight: 256
          });

親トピック: 動的タイル層の使用

4.5.2 ベース・マップを使用した動的タイル層の作成

マップ・コンテンツは、サーバー側マップ・ビジュアライゼーション・コンポーネントのベース・マップによってすでに定義されているため、ベース・マップを使用した動的タイル層の作成は最も簡単な方法です。次のステップを実行します。

ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。

        var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            basemap: 'demo_map',  // this basemap property defines the map contents
            transparent:true,
            antialiase:"false"
        });

この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。
```
        var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",  // map images come from this omserver
            enableUTFGrid: true,  // the UTFGrid is enabled
            enableUTFGridInfoWindow: true,  // the info window for displaying UTFGrid is enabled
            utfGridResolution: 4   // one grid cell represents 16 (4 by 4) image pixels
        };
```
この例では、変数tileServerURLの文字列値は、マップ・ビジュアライゼーション・コンポーネント・サーバーを指しています。これは、Webアプリケーションがデプロイされているサーバーと同じサーバーまたは別のマップ・ビジュアライゼーション・コンポーネント・サーバー・インスタンスです。たとえば、次のフォームのいずれかになります。
- 同じOracle Mapsサーバー・インスタンスからの場合です。次に例を示します。
```
var baseURL=document.location.protocol+"//"+document.location.host+"/mapviewer";
```
- 別のOracle Mapsサーバー・インスタンスからの場合です。次に例を示します。
```
var baseURL="http://myapp.mycorp.com/mapviewer ";
```
動的タイル層を作成します。次に例を示します。
```
  var dynamic_tilelayer_1 = new OM.layer.DynamicTileLayer("dtl1", dtl_props, req);
```
動的タイル層は、マップ・ビジュアライゼーション・コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

前述の例では、動的タイル層を作成するために、3つの文が指定されています: (1) マップ・リクエスト・インスタンスの作成(ServerMapRequest)、(2) 動的タイル層関連のプロパティを含むオブジェクトの作成、(3) 動的タイル層のインスタンス化。

動的タイル層は、マップ・ビジュアライゼーション・コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

親トピック: 動的タイル層の使用

4.5.3 事前定義済テーマを使用した動的タイル層の作成

動的タイル層を作成するための別の方法として、事前定義済テーマを使用する方法があります。次のステップを実行します。

ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。

        var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            transparent:true,
            antialiase:"false",
        });
        // the three themes below are defined in the metadata already.
        var t1 = new OM.server.ServerPredefinedTheme("THEME_DEMO_STATES");
        var t2 = new OM.server.ServerPredefinedTheme("THEME_DEMO_HIGHWAYS");
        var t3 = new OM.server.ServerPredefinedTheme("THEME_DEMO_CITIES");
        req.addThemes([t1, t2, t3]);

この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

        var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

動的タイル層を作成します。次に例を示します。
```
  var dynamic_tilelayer_2 = new OM.layer.DynamicTileLayer("dtl2", dtl_props, req);
```
動的タイル層は、マップ・ビジュアライゼーション・コンポーネントのマップ・サーバー(omserver)からのマップ画像をリクエストし、これにより、フレッシュなマップ画像がレンダリングされ、画像はディスクにキャッシュされません。

サーバー・ベース・マップを指定するのではなく、この手法では、ServerMapRequestインスタンスがマップ・ビジュアライゼーション・コンポーネント・サーバーの事前定義済テーマを追加します。実用的な観点から、これにより、クライアント側のアプリケーションは、ビューUSER_SDO_THEMES内のサーバー側の定義済テーマを使用してタイル層を作成できます。

親トピック: 動的タイル層の使用

4.5.4 空間表を直接使用した動的タイル層の作成

ServerJBCThemeインスタンスを作成して、これらをServerMapRequestインスタンスに追加することで、動的タイル層に空間表を直接使用できます。次のステップを実行します。

スタイルを作成します。次に例を示します。

        var myc1 = new OM.style.Color({
            styleName: "mycolor1",
            stroke: "#333333", 
            strokeOpacity: 1.0,
            fill: "#F2EFE9", 
            fillOpacity: 1.0
        });

JDBCテーマを作成し、そのプロパティを設定します。空間表は、SQL問合せ文で使用されます。文は、文字列タイプの変数として、OM.server.ServerJDBCThemeインスタンス内の属性として設定されます。次に例を示します。

        var jdbcTStates= new OM.server.ServerJDBCTheme('theme_jdbc_states');
        jdbcTStates.setDataSourceName('mvdemo');
        jdbcTStates.setSRID('8307');
        jdbcTStates.setGeometryColumnName('geom');
        var sql='select totpop, poppsqmi, state, state_abrv, geom from states'; // the query
        jdbcTStates.setQuery(sql);  // set the SQL string
        jdbcTStates.addInfoColumn({column: 'state_abrv', name:'State'});
        jdbcTStates.addInfoColumn({column: 'totpop', name:'Population'});
        jdbcTStates.addInfoColumn({column: 'poppsqmi', name:'Pop. Density'});
        jdbcTStates.setRenderingStyleName('mycolor1');

ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。

        var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:"MVDEMO",
            transparent:true,
            antialiase:"false",
        });
        req.addTheme(jdbcTStates);
        req.addStyle(myc1);

この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

        var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

動的タイル層を作成します。次に例を示します。

  var dynamic_tilelayer_3 = new OM.layer.DynamicTileLayer("dtl3", dtl_props, req);

この例では、動的に定義されたスタイルおよびServerJDBCThemeオブジェクトは最初に作成されます。ServerJDBCThemeは、SQL文を使用して、空間表を直接使用できます。この表は、次にServerMapRequestオブジェクトのaddThemeおよびaddStyleメソッドによって使用されます。

親トピック: 動的タイル層の使用

4.5.5 サード・パーティ・マップ・サービスを使用した動的タイル層の作成

動的タイル層を作成するための別の方法として、サード・パーティのマップ・サービスを使用する方法があります。サード・パーティのマップ・サービスURLは、クライアントが提供するURL生成機能によって提供されます。次のステップを実行します。

サード・パーティのマップ・サービス・プロバイダの仕様を使用して、動的タイル層によるマップ画像リクエストを構築するURL構築ファンクションを作成します。次に例を示します。

var urlb = function (w, h, minX, minY, maxX, maxY, options){
      var str="http://my.mycorp.com:8080/geoserver/ows?";
      var optParams="";
      str = str+"request=getmap"+
      "&bbox="+minX+","+minY+","+maxX+","+maxY+
      "&width="+w+
      "&height="+h;
      
    if (!OM.isNull(options)) {
      for (var key in options) {
        optParams=optParams +"&"+key +"="+options[key];
      }
    }    
    return str+optParams;
  }

この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

var dtl_props = {  
    universe: myuniv,            
    tileLayerConfig: myconfig,
    urlBuilder: urlb,
    urlBuilderOptions: {
              "layers":  "topp:states,sf:sfdem,sf:roads,sf:streams",
              "CRS":     "CRS:84",
              "service": "WMS",
              "version": "1.3.0",
              "format":  "image/png"
        } 
};

動的タイル層を作成します。次に例を示します。

  var dynamic_tilelayer_4 = new OM.layer.DynamicTileLayer("dl4", dtl_props);

この例では、動的タイル層インスタンス(dynamic_tilelayer_4)には、URL生成ファンクション(iurlb)を提供するurlBuilderプロパティが含まれます。URL生成ファンクションは、指定されたマップ・サービス・プロバイダから画像をフェッチするために動的タイル層によって使用されます。この例では、サード・パーティ・マップ・プロバイダGeoServerインスタンスが使用され、マップ画像が提供されます。

追加のマップ・サービス・プロバイダで必要とされるパラメータは、urlBuilderOptionsプロパティで提供可能です。この例では、GeoServerインスタンスで必要とされるいくつかの追加パラメータ(layers、CRS、service、versionおよびformat)が指定されています。

親トピック: 動的タイル層の使用

4.5.6 動的タイル層の使用例

このトピックでは、動的タイル層の使用例について説明します。

コードの例は、動的タイル層アプリケーションからのものです。アプリケーションでは、マップ画像タイルを提供するためにマップ・ビジュアライゼーション・コンポーネント・サーバーが使用されます。OM.server.ServerJDBCThemeインスタンスを介して空間表を直接使用します。

getWhereClauseFromUI()ファンクションを使用して、SQL問合せの"where"句をアプリケーションのユーザー・インタフェースから取得します(このファンクションは、アプリケーションの内ですでに適切に定義済であり、期待される結果を返すものと想定しています)。次に例を示します。
```
    var  wherec = getWhereClauseFromUI();
```

JDBCテーマを作成し、そのプロパティを設定します。次に例を示します。

    var objJDBCTheme= new OM.server.ServerJDBCTheme();
    objJDBCTheme.setDataSourceName('storm');
    objJDBCTheme.setSRID('3857');
    objJDBCTheme.setXColumnName('long_loc');
    objJDBCTheme.setYColumnName('lat_loc');

    objJDBCTheme.addInfoColumn({column: 'YEAR', name:'Year'});
    objJDBCTheme.addInfoColumn({column: 'MONTH', name:'Month'});
    objJDBCTheme.addInfoColumn({column: 'DAY', name:'Day'});
    objJDBCTheme.addInfoColumn({column: 'STATE', name:'State'});
    objJDBCTheme.addInfoColumn({column: 'LOSS', name:'Loss'});
    objJDBCTheme.addInfoColumn({column: 'CROPLOSS', name:'Crop_loss'});
    objJDBCTheme.addInfoColumn({column: 'FATALITIES', name:'Fatalities'});
    objJDBCTheme.addInfoColumn({column: 'INJURIES', name:'Injuries'});

    objJDBCTheme.setName('theme_tornado');
    objJDBCTheme.setQuery("SELECT s.geom.sdo_point.x long_loc,s.geom.sdo_point.y lat_loc,year,month,day,state,fatalities,injuries,loss,croploss from tornado_3857 s"+
(wherec === "" ?"": wherec));
    objJDBCTheme.setRenderingStyleName('V.TORNADO');

ServerMapRequestインスタンスを作成し、そのプロパティを設定します。次に例を示します。

        var req = new OM.server.ServerMapRequest(baseURL);
        req.setProperties({
            dataSource:'storm',
            transparent:true,  // map image is set to be transparent
            antialiase:"false"
        });
        req.addTheme(objJDBCTheme);

この動的タイル層のプロパティを含むオブジェクトを作成します。次に例を示します。

        var dtl_props = {  
            universe: myuniv,            
            tileLayerConfig: myconfig,
            tileServerURL: baseURL + "/omserver",
            enableUTFGrid: true,
            enableUTFGridInfoWindow: true,
            utfGridResolution: 4
        };

動的タイル層を作成します。次に例を示します。

  var tornado_damage = new OM.layer.DynamicTileLayer("tornado_damage", dtl_props, req);

前述のステップ内のコードの例は、次を表しています。

マップ・アプリケーションは、マップ・ビジュアライゼーション・コンポーネント・サーバーからマップ画像をフェッチします。このため、マップ・ビジュアライゼーション・コンポーネント・サーバーの使用可能なすべての地物が使用される場合があります。
マップ画像は、透明に設定されています(つまり、プロパティtransparentの値はtrueです)。この設定により、複数の動的タイル層の表示が重なった場合、重なりなしの地物がすべて表示されます。たとえば、tornado_damage動的タイル層をhail_damage動的タイル層の上に重ねた場合、(その名前が示すような)イベントが、重なりなしの場所で発生した場合、両方の層がマップ上に表示されます。この設定は、線形およびポイント地物を含む複数の層に対してより便利です。APIでは、層の可視性をオン/オフにできるため、常に、興味のある層をアプリケーション内で目立たせ、表示させることができます。
また、動的タイル層は、マップ・ビジュアライゼーション・コンポーネント・サーバーのUTFGridサポートを有効化します(具体的に、プロパティenableUTFGridがtrueに設定され、utfGridResolutionプロパティの解像度の値は4に設定されます)。この設定は、マップ・ビジュアライゼーション・コンポーネントのAPIに、マップ・タイル画像のコンパニオンとして追加のUTFGridファイルをリクエストするよう指示します。これはJSONファイルであり、タイル画像と一致するUTFエンコーディングの2次元のグリッド表を含みます。また、各グリッド・セルのテキスト属性も含みます。

画像ピクセルでマウス・イベント(マウス・クリックなど)がトリガーされると、対応するグリッド・セルを特定できるようになり、そのUTFコードが取得され、続いて、そのグリッド・セルのUTFコードに関連付けられているテキスト属性を取得でき、ポップアップ情報ウィンドウに表示できます。

このJSONファイルに含まれるテキスト属性は、addInfoColumn()メソッドを使用して指定します。テキスト属性は、マップ上でクリックされているピクセルに対する情報ウィンドウに表示されます。

サーバー側の事前定義済ジオメトリ・テーマが、動的タイル層で使用されている場合、情報ウィンドウのテキスト属性がテーマの<hidden_info>要素に指定されている必要があります。これは、ベース・マップに基づく動的タイル層にも適用され、この場合、事前定義済テーマはマップ・ビジュアライゼーション・コンポーネントのベース・マップ定義内にあります

解像度の値("utfGridResolution":4など)は、グリッド・セルの幅と高さがそのコンパニオン・マップ・タイル画像ピクセルと対照されることを示します。この例では、UTFGridデータセットの1つのグリッド・セルは、16ピクセル(4x4=16)を表します。
この動的タイル層は、ServerJDBCThemeを介して空間表を直接使用して、マップ・コンテンツを定義します。クライアントWebアプリケーションの埋込みSQL文では、使用する表、選択する列および問合せを絞り込む"where"句など、柔軟に文全体を構築できます。コード・スニペットでは、クライアント・ファンクションgetWhereClauseFromUI()は、JDBCテーマ定義の'where'句のみを構築すると仮定しています。

Oracle Maps JavaScript APIでサポートされている動的タイル層により、マップ・ビジュアライゼーション・コンポーネント・サーバー・メタデータがタイル層で使用可能になり、動的タイル層の定義方法、およびクライアント・アプリケーションによるマップ画像のフェッチ場所を柔軟に指定できます。

親トピック: 動的タイル層の使用