2 - ol3.13ex 147b - Icon Colors 2

「icon-color.js（2147-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2147-ol3ex.js」

var rome = new ol.Feature({
/** ol.Feature
 * A vector object for geographic features with a 
 * geometry and other attribute properties, similar 
 * to the features in vector file formats like 
 * GeoJSON.
 * GeoJSONのようなベクトルファイル形式のフィーチャに類
 * 似した、ジオメトリとその他の属性プロパティを持つ地物
 * フィーチャのためのベクトルオブジェクト。（ol3 API）
 */

 geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
 /** ol.geom.Point
  * Point geometry.（ol3 API）
  */

 /** ol.proj.fromLonLat(coordinate, opt_projection)
  * Transforms a coordinate from longitude/latitude to a 
  * different projection.
  * 緯度/経度座標から異なる投影に変換します。（ol3 API）
  */

});

var london = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
});

var madrid = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
});

rome.setStyle(new ol.style.Style({
/** setStyle(style)
 * Set the style for the feature. This can be a single 
 * style object, an array of styles, or a function that 
 * takes a resolution and returns an array of styles. If 
 * it is null the feature has no style (a null style).
 * フィーチャのスタイルを設定します。これは、単一のスタイルオ
 * ブジェクト、スタイルの配列、または解像度をとり、スタイルの
 * 配列を返す関数とすることができます。null の場合、フィー
 * チャは、スタイルなし（null のスタイル）を持ちます。
 * （ol3 API）
 */

/** ol.style.Style 
 * Container for vector feature rendering styles. Any 
 * changes made to the style or its children through 
 * set*() methods will not take effect until the 
 * feature or layer that uses the style is re-rendered.
 * ベクタフィーチャがスタイルを描画するためのコンテナ。
 * スタイルや set*() メソッドを通じてその子に加えられた変
 * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
 * ダリングされるまで有効になりません。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 /** ol.style.Icon 
  * Set icon style for vector features.
  * ベクタフィーチャのアイコンスタイルを設定します。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 /** 「@type」 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

  color: '#8959A8',
  /** color:
   * Color to tint the icon. If not specified, the icon 
   * will be left as is.
   * アイコンを着色する色。指定しない場合、アイコンはそのまま
   * 残されます。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  // src: 'data/dot.png'
  src: 'v3.13.0/examples/data/dot.png'
  /** src:
   * Image source URI. Required.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

 }))
}));

london.setStyle(new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  color: '#4271AE',
  // src: 'data/dot.png'
  src: 'v3.13.0/examples/data/dot.png'
 }))
}));

madrid.setStyle(new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  color: [113, 140, 0],
  // src: 'data/dot.png'
  src: 'v3.13.0/examples/data/dot.png'
 }))
}));

var vectorSource = new ol.source.Vector({
/** ol.source.Vector
 * Provides a source of features for vector layers. 
 * Vector features provided by this source are 
 * suitable for editing. See ol.source.VectorTile for 
 * vector data that is optimized for rendering.
 * ベクタレイヤのフィーチャのソースを用意します。このソース
 * が提供するベクタフィーチャは、編集に適しています。レンダ
 * リングのために最適化されたベクタデータの 
 * ol.source.VectorTile を参照してください。（ol3 API）
 */

 features: [rome, london, madrid]
 /** features:
  * Features. If provided as ol.Collection, the features 
  * in the source and the collection will stay in sync.
  * フィーチャ。ol.Collection として提供された場合、ソース内
  * のフィーチャとコレクションが同期したままになります。
  * （ol3 API）
  */

});

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

 source: vectorSource
 /** source:
  * Source. Required.（ol3 API）
  */

});

var rasterLayer = 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({
 /** source:
  * Source for this layer. Required.（ol3 API）
  */

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

  url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
  /** url:
   * URL to the TileJSON file. Required.（ol3 API）
   */

  crossOrigin: ''
  /** crossOrigin:
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if you want to 
   * access pixel data with the Canvas renderer. See 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image for more detail.
   * ロードされたイメージの crossOrigin属性。WebGLのレンダ
   * ラーを使用している場合、または、キャンバスレンダラでピ
   * クセルデータにアクセスする場合、crossOrigin 値を提供な
   * ければならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。（ol3 API）
   */

 })
});

var map = new ol.Map({
 renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
 layers: [rasterLayer, vectorLayer],
 target: document.getElementById('map'),
 view: new ol.View({
  center: ol.proj.fromLonLat([2.896372, 44.60240]),
  zoom: 3
 })
});