3.3ベクター・タイル・サーバー
ベクター・タイル・サーバーは、事前生成されたベクター・タイルをフェッチ、キャッシュおよび提供するベクター・タイル・キャッシュ・エンジンです。
ベクター・タイルは、ProtoBuf形式でエンコードされます(https://en.wikipedia.org/wiki/Protocol_Buffersを参照)。この形式を使用すると、構造化データのシリアライズが可能になり、プログラミング言語やオペレーティング・システムに影響することはありません。
現在、ベクター・タイルはWorld Mercator図法のみをサポートしています。Oracle SRIDは3857です。ズーム・レベルの数を含むタイル表示座標と、マップのデータ境界は、Googleマップのタイル表示スキームと同じです。
1つのベクター・タイルは1つのレイヤー専用で、複数のレイヤーを持つことはできません。マップ・ビジュアライゼーション・コンポーネントの用語では、レイヤーはテーマと呼ばれるので、1つのベクター・タイルは1つのテーマ専用です。ベクター・タイルが複数のテーマを持つことはできません。
例3-7 ベクター・タイルを表示するmapbox-gl JavaScriptライブラリの使用
この例では、mapbox-gl JavaScriptライブラリを使用して、マップ・ビジュアライゼーション・コンポーネントのベクター・タイル・サーバーによって提供されるベクター・タイル・レイヤーを表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Simple Demo Using Oracle Visualization Vector Tile Service</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<div id='map'></div>
<script>
var mapInstance = new mapboxgl.Map({
container: 'map',
// this defines where to load the background map tiles.
style: 'map-styles/world_map/oracle_world_map.json',
center: [-122, 37],
zoom: 4.5
});
var addMapViewerPointLayer = function() {
var mvURL ="http://"+document.location.host+"/mapviewer";
var mvDataSrc = "mvdemo";
var mvTheme = "CUSTOMERS";
var vectorTileUrl = mvURL+"/vt/"+mvDataSrc+"/{z}/{x}/{y}.mvt?t="+mvTheme ;
var layerDef1 = {
"id" : "my-layer-1",
"type" : "circle",
"source": {
"type" : "vector",
"tiles" : [vectorTileUrl], // a vector tile source
"minzoom" : 0,
"maxzoom" : 19
},
"source-layer" : mvTheme,
"paint" : {
"circle-radius": 10,
"circle-color": 'rgb(111, 111, 111)',
"circle-opacity": .8
}
};
mapInstance.addLayer(layerDef1);
};
mapInstance.on('load', addMapViewerPointLayer);
</script>
</body>
</html>
この例で、ファイルoracle_world_map.jsonで定義されているスタイル・プロパティの内容は次のとおりです:
{
"version": 8,
"id" : "elocation-mercator-worldmap-mb",
"name" : "World Map (Oracle)",
"metadata" : {
"sgtech:version": "19.1.0",
"sgtech:sources:type": "raster"
},
"sources": {
"elocation-worldmap-mb": {
"type": "raster",
"attribution": "<a target=''_blank'' href=''https://elocation.oracle.com/elocation/legal.html''> © 2019 Oracle Corporation </a> <a target=''_blank'' href=''http://elocation.oracle.com/elocation/legal.html''> Map data © 2019 HERE </a>",
"tiles": [
"https://elocation.oracle.com/mapviewer/mcserver/ELOCATION_MERCATOR/world_map_mb/{z}/{y}/{x}.png"
],
"tileSize": 256
}
},
"layers": [
{
"id": "Oracle World Map",
"type": "raster",
"source": "elocation-worldmap-mb",
"minzoom": 0,
"maxzoom": 19
}
],
"sprite": "http://localhost:8080/mapviewer/private/mapbox-demos/map-styles/world_map/sprites/sgtech-maki",
"glyphs": "http://localhost:8080/mapviewer/private/mapbox-demos/map-styles/world_map/fonts/glyphs/{fontstack}/{range}.pbf"
}
ご覧のように、mapviewerサーバーに送信されるベクター・タイル・リクエストは、このテンプレートを使用して作成されます:
"http://"+document.location.host+"/mapviewer"+"/vt/"+mvDataSrc+"/{z}/{x}/{y}.mvt?t="+mvTheme ;この例の実行中にブラウザのネットワーク・トラフィックをチェックすると、次のようなベクター・タイル・リクエストが表示されます:
http://localhost:8080/mapviewer/vt/mvdemo/4/2/6.mvt?t=CUSTOMERS
サーバーからアクセスできるデータ・ソースの場合、事前定義されているジオメトリ・テーマにはベクター・タイル・サーバーからアクセスできます。
親トピック: マップ・ビジュアライゼーション・サーバー