2 - ol3ex 28b - TopoJSON example 2

「topojson.js（228-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
TopoJSON は、「mbostock/topojson Wiki（https://github.com/mbostock/topojson/wiki）」の「Introduction（https://github.com/mbostock/topojson/wiki/Introduction）」に、次のようにあります。
*****
TopoJSON is an extension of GeoJSON. TopoJSON introduces a new type, "Topology", that contains GeoJSON objects.
TopoJSON は、GeoJSON を拡張したものです。 TopoJSON は、GeoJSON オブジェクトを含む新しいタイプの、「トポロジ」を、紹介します。
A topology has an objects map which indexes geometry objects by name. These are standard GeoJSON objects, such as polygons, multi-polygons and geometry collections. However, the coordinates for these geometries are stored in the topology's arcs array, rather than on each object separately.
トポロジは、名前でジオメトリオブジェクトを検索するオブジェクト·マップを持っています。これらには、ポリゴン、マルチポリゴンやジオメトリコレクションなどの標準 GeoJSON オブジェクトです。しかし、これらのジオメトリの座標は、分かれているオブジェクトごとではなく、トポロジーのアーク配列で格納されます。
An arc is a sequence of points, similar to a line string; the arcs are stitched together to form the geometry. Lastly, the topology has a transform which specifies how to convert delta-encoded integer coordinates to their native values (such as longitude & latitude).
アークはラインストリングのような点の連続です。すなわち、アークは、ジオメトリを形成するために一緒に綴じられています。最後に、トポロジは、デルタ-エンコードされた整数座標（例えば経度＆緯度など）それらのネイティブな値に変換する方法を指定する変換があります。
*****

TopoJSON の利点は、座標を記述するスペースが少なくなるため、容量が小さくなることです。

TopoJSON のデータから実際の座標を計算する方法は、「Geographic Information Systems Stack Exchange」の「TopoJSON: how to calculate scale and translate?（http://gis.stackexchange.com/questions/69249/topojson-how-to-calculate-scale-and-translate）」などを参照してください。

world-110m.json の内容は次のようになっています。
「world-110m.json」

{
 "type":"Topology",
 "transform":{
  "scale":[0.0036000360003600037,0.0016925586033320111],
  "translate":[-180,-85.60903777459777]
 },

 "objects":{
  "land":{
   "type":"MultiPolygon",
   "arcs":[[[0]],[[1]],[[2]],...（省略）
  },

  "countries":{
   "type":"GeometryCollection",
   "geometries":[{
     "type":"Polygon",
     "arcs":[[499,500,501,502,503,504]],
     "id":4
    },{
     "type":"MultiPolygon",
     "arcs":[[[505,506,352,507]],[[354,508,509]]],
     "id":24
    },{
---

    },{
     "type":"Polygon",
     "arcs":[[-984,-597,-985,-861]],
     "id":716
   }]
  }
 },
 "arcs":[[[31586,3163],[625,-23],[599,-58],...（省略）
}

「228-ol3ex.js」

var raster = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング（事前描画）を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。（ol3 API）
 */

 source: new ol.source.TileJSON({
 /** ol.source.TileJSON 
  * Layer source for tile data in TileJSON format.
  * TileJSON フォーマットのタイルデータのためのレイヤソース。
  * （ol3 API）
  */

  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-dark.jsonp'
 })
});

var styleArray = [new ol.style.Style({
/** ol.style.Style 
 * Base class for vector feature rendering styles.
 * ベクタフィーチャがスタイルを描画するための基本クラス。
 * （ol3 API）
 */

 fill: new ol.style.Fill({
 /** ol.style.Fill 
  * Set fill style for vector features.
  * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
  */

  color: 'rgba(255, 255, 255, 0.6)'
 }),

 stroke: new ol.style.Stroke({
 /** ol.style.Stroke 
  * Set stroke style for vector features. 
  * Note that the defaults given are the Canvas defaults, 
  * which will be used if option is not defined. 
  * The get functions return whatever was entered 
  * in the options;  they will not return the default.
  * ベクタフィーチャのためのストロークスタイルの設定。
  * デフォルトは、オプションが定義されていない場合に使用される
  * Canvas のデフォルトを与えられることに注意してください。 
  * GET機能は、オプションで入力されたものはすべて返します。
  * それらはデフォルトを返しません。（ol3 API）
  */

  color: '#319FD3',
  width: 1
 })
})];

var vector = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されたベクタデータ。（ol3 API）
 */

 source: new ol.source.TopoJSON({
 /** ol.source.TopoJSON
  * Static vector source in TopoJSON format.
  * TopoJSON形式の静的なベクトルソース。（ol3 API）
  */

  projection: 'EPSG:3857',
  // url: 'data/topojson/world-110m.json' 修正
  url: 'v3.0.0/examples/data/topojson/world-110m.json'
 }),

 style: function(feature, resolution) {
 // don't want to render the full world polygon, which 
 // repeats all countries
 // すべての国を繰り返して、全世界のポリゴンを描画させません。

  return feature.getId() !== undefined ? styleArray : null;
  /** getId()
   * Return: id（ol3 API）
   */
  /** 条件演算子 condition ? expr1 : expr2 
   * condition: true か false かを評価する条件文です。
   * expr1, expr2: 各々の値の場合に実行する式です。
   * condition が true の場合、演算子は expr1 の値を選択します。
   * そうでない場合は expr2 の値を選択します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Guide/Expressions_and_Operators]）
   */
 }
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});