OpenLayers3を触ってみる
お久しぶりの投稿です。
めちゃくちゃサボっておりました。
さて、今回のネタは地図です。
地図といえば
Google Maps APIなんかを使えば、比較的容易に地図を使ったアプリの作成が可能ですね。
あとは、好みに合わせてYahooやBingなんかもあります。
Google Mapsは便利ですが、ある一定ラインを超えると、課金対象となってしまいます。
怖いですね。
無料で使えるものはないのか…。
OpenLayers3
A high-performance, feature-packed library for all your mapping needs.
OpenLayers2を一から書き直した物だそうです。
OpenLayers3
OpenLayers3 example
exampleが豊富ですし、組み合わせで大体のことができそうですね!
exampleのanimationとか、ゲームとかでありそうな動きです。
Quick Start
Quick Startがサイトにあるので、そのコードでどうなるか試してみます。
script部分のみぬき出し。全部はサイト参照。
var map = new ol.Map({ target: 'map', layers:[ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View2D({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326','EPSG:3857'), zoom: 4 }) });
target:'map'
:地図を表示する場所の指定になります。
<div id='hoge'>
なら、target:'hoge'
といったような感じです。
layers:[new ol.layer.Tile({})
:表示する地図のタイル指定ですね。
source:new ol.source.MapQuest({layer:'sat'})
:タイルのソース指定でしょうか?
center:ol.proj.transform(....)
:表示した時の中心の指定ですね。
transform
は座標の変換です。
zoom
は言う必要もなく、ズームレベルの指定です。
表示してみる
このように衛生地図が簡単に表示できました。
地図の表示はすごく簡単!
終わりに
久しぶりの投稿でしたが、テスト投稿でもありました。
Markdown記法を覚えると良いと教えていただいたこともあり、Markdownを少し使いながら書いてみました。
覚えるまで時間がかかりそうだな。。。
またOpenLayers3について書けることがあれば、ちまちま書いてみようかと思います。
あ、Vimやらないと…。