2 - ol3-beta.5ex 11b - Image vector example 2

「image-vector-layer.js（211-ol3ex.js）」は、地図を表示するのに必要な javascript です。
「211-ol3ex.js」

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
  }),

  new ol.layer.Image({
   source: new ol.source.ImageVector({
    source: new ol.source.GeoJSON({
     projection: 'EPSG:3857',
  // url: 'data/geojson/countries.geojson',
     url: 'v3.0.0-beta.5/examples/data/geojson/countries.geojson',
    }),
    style: new ol.style.Style({
     fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.6)'
     }),
     stroke: new ol.style.Stroke({
      color: '#319FD3',
      width: 1
     })
    })
   })
  })
 ],

 target: 'map',
 view: new ol.View2D({
  center: [0, 0],
  zoom: 1
 })
});

var featureOverlay = new ol.FeatureOverlay({
// 一時的にフィーチャのスタイルを換えるときに使用（Canvas renderer）
 map: map,
 style: new ol.style.Style({
  stroke: new ol.style.Stroke({
   color: '#f00',
   width: 1
  }),
  fill: new ol.style.Fill({
   color: 'rgba(255,0,0,0.1)'
  })
 })
});

var highlight;

var displayFeatureInfo = function(pixel) {

 var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
 // 'forEachFeatureAtPixel' viewport 上を横切るピクセルフィーチャを検知
  return feature;
 });

 // 国名（name）の表示 
 var info = document.getElementById('info');
 if (feature) {
  info.innerHTML = feature.getId() + ': ' + feature.get('name');
 } else {
  info.innerHTML = ' ';
 }

 // フィーチャのハイライトのオンオフ
 if (feature !== highlight) {
  if (highlight) {
   featureOverlay.removeFeature(highlight);
  }
  if (feature) {
   featureOverlay.addFeature(feature);
  }
  highlight = feature;
 }

/*
 * マウス（ポインタ）が動いた時、ビューポートのピクセル位置を取得して
 * displayFeatureInfo を実行。
 */

$(map.getViewport()).on('mousemove', function(evt) {
 var pixel = map.getEventPixel(evt.originalEvent);
 displayFeatureInfo(pixel);
});

// マウスクリック時？
map.on('click', function(evt) {
 displayFeatureInfo(evt.pixel);
});

};