typeof Diary

VimとかJSとか。やったことのメモ。自分のため。

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は言う必要もなく、ズームレベルの指定です。

表示してみる

f:id:lisia:20140310232233p:plain

このように衛生地図が簡単に表示できました。 地図の表示はすごく簡単!

終わりに

久しぶりの投稿でしたが、テスト投稿でもありました。
Markdown記法を覚えると良いと教えていただいたこともあり、Markdownを少し使いながら書いてみました。
覚えるまで時間がかかりそうだな。。。

またOpenLayers3について書けることがあれば、ちまちま書いてみようかと思います。
あ、Vimやらないと…。