2017年6月10日土曜日

OpenLayers4 Workshop - 5.1. Concepts(5. Custom Builds)

カスタムビルドを理解する
OpenLayers はたくさんのきのを提供する大きなライブラリです。ですが、アプリケーションが OpenLayers 3(現在は 4)が提供する機能をすべて必要とし、使用するはほとんどありません。カスタムビルド(a.k.a. application-specific builds)は、アプリケーションが必要とする機能だけを使用する OpenLayers 3(現在は 4)ビルドです。カスタムビルドは、フルビルドよりとても小さくなることがあるので、カスタムビルドを作成することは良い考えになることがあります。

5.1.1 必要条件
OpenLayers ビルドは Closure Compiler を使用することによって作成されます。Closure Compiler の目標は、ダウンロードの時間を少なくし実行速度を上げるよりよい JavaScript にするために、JavaScript をコンパイルすることです。
Closure Compiler は Java プログラムで、Compiler を実行するためには Java Virtual Machine を必要とします。それで、次のセクションに進み、カスタムビルドを作成する前に、Java がインストールされていることを確認します。
Java Runtime Environment が必要で、これは Oracle Java site からダウンロードできます。例えば、Windows なら、jre-8u60-windows-i586.exe をダウンロードし、インストールします。

5.1.2 ビルド設定ファイル
カスタムビルドを作成するにはビルド設定ファイルを書く必要があります。ビルド設定ファイルのフォーマットは JSON です。これはビルド設定ファイルの簡単な例です。
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.layer.Tile",
  "ol.source.OSM"
 ],
 "jvm": [],
 "umd": true,
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "define": [
   "goog.dom.ASSUME_STANDARDS_MODE=true",
   "goog.DEBUG=false",
   "ol.ENABLE_DOM=false",
   "ol.ENABLE_WEBGL=false",
   "ol.ENABLE_PROJ4JS=false",
   "ol.ENABLE_IMAGE=false"
  ],
  "jscomp_error": [
    "*"
  ],
  "jscomp_off": [
   "analyzerChecks",
   "lintChecks",
   "unnecessaryCasts",
   "useOfGoogBase"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "use_types_for_optimization": true,
  "manage_closure_dependencies": true
 }
} 
この設定オブジェクトの最も関連する部分は export 配列です。この配列は、JavaScript コードで使用する関数/コンストラクタを宣言します。例えば、上記の設定ファイルは、次の JavaScript コードで使用します。
var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 4
 })
});

0 件のコメント: