OpenLayers 3.5.0でVector APIが変更されてた

久しぶりにOpenLayers 3を使おうと思ったら、昔のコードのままでol.jsを差し替えだけでは動きませんでした。
昨年10月に触ったときは3.0.0だったOpenLayers 3も、いつの間にか3.5.0になっていたので色々と機能追加や変更があったようです。
特に今回引っ掛かったのはGeoJSONの読み込みで、リリースノートを見ると、ol.source.*(ol.source.GeoJSONなど)が廃止されてol.source.Vectorに統一、formatでこれを指定することになったらしい。

以下、作ってる途中のコードの切れっ端ですが...

3.4.0まで

var smallScalePoints = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        url: 'smallScalePoints.json',
        projection: 'EPSG:3857'
    }),
    style: styleFunction,
    minResolution: 1000,
    maxResolution: 20000
});

3.5.0以降

var smallScalePoints = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'smallScalePoints.json',
        format: new ol.format.GeoJSON(),
    }),
    style: styleFunction,
    minResolution: 1000,
    maxResolution: 20000
});

projectionの指定も必要なくなり、読み込み時にviewのprojectionとソースのprojectionが一致してない場合は変換されるようになったみたい。

参考 : Release v3.5.0 · openlayers/ol3

OpenLayers 3でOpenStreetMap上にピンを打つ

OpenLayers 3を使って、緯度経度で指定したポイントやポイントを結んだ形の図形をOpenStreetMap上に表示してみた。
OpenLayersは2から3へのアップデートで結構変わってる上にドキュメントは微妙、日本語での解説は2ばかりという状況なので、色々と試しながらです。

問題点は
・OpenStreetMapは球面メルカトル図法(EPSG:3857)で描画される
・ポイントは緯度経度(WGS84/EPSG:4326)で示したい
・EPSG:3857とEPSG:4326のレイヤーは同時に表示できない

最終的には

format: new ol.format.GeoJSON({
    defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',

みたいな感じで解決できました。

以下、ソースコード

GeoJSONの仕様は
http://s.kitazaki.name/docs/geojson-spec-ja.html
を参考に。

上記コード内では、textで直接GeoJSONを書き込んでいるが、実際はurlで外部からjsonファイルを引っ張ってくる使い方が一般的(のはず)。

ちなみに、Polygonは閉路になる順にcoordinatesを指定してしないと捻れちゃうので、その辺も要注意。
そういうのを踏まえて、投げられた複数のジオタグから凸包を描くようなGeoJSONを吐くプログラムを現在製作中...