openLayers 3 で地図の移動
opeLayers2系で開発していたのだけれど、3に移行したほうがいいかなということで開発を3に割り振った。
で、いろいろなサンプルを見て回ったのだけれど見たのは全部マップを一回表示されるだけで終わっている。地図アプリケーションって検索したら別のところ行きたいじゃないですか、で苦労したんだけど灯台下暗しでした。
function setMapCenter(center){ //イベントで呼ばれる関数 view.setCenter(ol.proj.transform([center.lon, center.lat], "EPSG:4326", "EPSG:3857")); };
center:画面の中央位置のオブジェクト。別になんでもいい。
これだけ書けばいい(当たり前っちゃ当たり前なんですが…)
これやるためにはviewをグローバル変数として持っていないといけないんだけど、そこはおいおい考えるとして、これでできます。
ちなみにviewがどう定義されているかというと(だいたいどこかをコピペしているだけですが)
view = new ol.View({ projection: "EPSG:3857", maxZoom: 17, minZoom: 6 });
さらにちなみに円を描画したいときには下記のような関数を持っておくと便利です(おそらく円でなくてもこの関数は便利)
function drawCircle(center){ var circle_layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ new ol.Feature( new ol.geom.Point( ol.proj.transform( [center.lon, center.lat], "EPSG:4326", "EPSG:3857" ) ) ) ] }), style: new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.8)' }), /*stroke: new ol.style.Stroke({ color: 'rgb(255,0,0)', width: 15 }),*/ radius: 120 }) }) }); return circle_layer; }
これを発展させて円をいっぱい描画したいので、それもできたら記事にします。
ちなみにlayerを消す機能を実装していないので永遠にlayerが増え続けます。ちゃんとここも修正します。