2 - ol3-beta.5ex 17b - Draw features example 2

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

var raster = new ol.layer.Tile({
 source: new ol.source.MapQuest({layer: 'sat'})
});

var source = new ol.source.Vector();

var vector = new ol.layer.Vector({
 source: source,
 style: new ol.style.Style({
  // 描画確定後のスタイル LineStrig, Polygon
  fill: new ol.style.Fill({
   color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new ol.style.Stroke({
   color: '#ffcc33',
   width: 2
  }),
  // 描画確定後のスタイル Circle
  image: new ol.style.Circle({
   radius: 7,
   fill: new ol.style.Fill({
    color: '#ffcc33'
   })
  })
 })
});

var map = new ol.Map({
 layers: [raster, vector],
 target: 'map',
 view: new ol.View2D({
  center: [-11000000, 4600000],
  zoom: 4
 })
});

// ジオメトリタイプ（Circle, LineStrig, Polygon）の取得
var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
 draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
 });
 map.addInteraction(draw);
}

/**
 * Let user change the geometry type.
 * @param {Event} e Change event.
 * ドロップダウンリストのジオメトリタイプを変更したとき
 * イベントを発生させ、描画ジオメトリタイプを変更
 */

typeSelect.onchange = function(e) {
 map.removeInteraction(draw);
 addInteraction();
};

addInteraction();

2171d-ol3ex.png