2 - ol3-beta.5ex 10b - Vector layer example 2

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

「countries.geojson」データの内容は次のようになっていました。
「countries.geojson」

{"type":"FeatureCollection",
 "features":[{
  "type":"Feature",
  "id":"AFG",
  "properties":{"name":"Afghanistan"},
  "geometry":{
   "type":"Polygon",
   "coordinates":[[[61.210817,35.650072],...

「210-ol3ex.js」

var styleCache = {};

var vectorLayer = new ol.layer.Vector({
 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: function(feature, resolution) {
  var text = resolution < 5000 ? feature.get('name') : '';
  // 解像度が 5000 以下なら ラベル（name 国名）非表示
  if (!styleCache[text]) {
  // 'styleCache[text]={}' なので 'if(true)'
   styleCache[text] = [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
    }),
    text: new ol.style.Text({
     font: '12px Calibri,sans-serif',
     text: text,
     fill: new ol.style.Fill({
      color: '#000'
     }),
     stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
     })
    })
   })];
  }
  return styleCache[text];
 }
});

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
  }),
  vectorLayer
 ],
 target: 'map',
 view: new ol.View2D({
  center: [0, 0],
  zoom: 1
 })
});

var highlightStyleCache = {};

var featureOverlay = new ol.FeatureOverlay({
// 一時的にフィーチャのスタイルを換えるときに使用（Canvas renderer）
 map: map,
 style: function(feature, resolution) {
  var text = resolution < 5000 ? feature.get('name') : '';
  if (!highlightStyleCache[text]) {
   highlightStyleCache[text] = [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)'
    }),
    text: new ol.style.Text({
     font: '12px Calibri,sans-serif',
     text: text,
     fill: new ol.style.Fill({
      color: '#000'
     }),
     stroke: new ol.style.Stroke({
      color: '#f00',
      width: 3
     })
    })
   })];
  }
  return highlightStyleCache[text];
 }
});

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);
});

var highlight;