タグ : openlayers

XバンドMPレーダ雨量をGoogleMap上に表示

先日、爆弾低気圧の影響で物凄い雨が降ったので久々にXバンドMPレーダ雨量情報サイトを訪問。

1分おきの雨量が見れるのは便利だが、拡大縮小や移動などマップのUIが使いにくい。

そこで、最近勉強中のOpenLayersを使って雨量情報を表示できないか試してみた。

マップはGoogleMapを表示し、レイヤーを使うことで雨量情報を表示することができた。

なかなか便利なので公開できればと思っていたが、利用上の注意として

このサイトは、通常の方法で閲覧することを前提に情報を掲載しております。ツール等による、自動的なデータ収集等はサーバに負荷がかかり、情報提供できなくなる恐れがありますのでご遠慮頂くよう、ご理解・ご協力お願いいたします。

との記載が。

ちょっと残念。

openlayers 複数ポイントを繋いで線(ライン)を表示

openlayersのexamplesフォルダにサンプルがあり。

ライン表示サンプル
OpenLayers-XXX\examples\resize-features.html

緯度経度を指定したポイントを作成し、配列に格納。
OpenLayers.Geometry.LineStringを使用して作成し、レイヤー追加。

var style_green = {
  strokeColor: “#339933″,
  strokeOpacity: 1,
  strokeWidth: 3,
  pointRadius: 6,
  pointerEvents: “visiblePainted”
};

var pointList = [];
var newPoint = point;
for(var p=0; p<5; ++p) {
  newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
                                newPoint.y + Math.random(1));
  pointList.push(newPoint);
}
lineFeature = new OpenLayers.Feature.Vector(
               new OpenLayers.Geometry.LineString(pointList),null,style_green);

vectorLayer = new OpenLayers.Layer.Vector(“Simple Geometry”);
vectorLayer.addFeatures(lineFeature);
map.addLayer(vectorLayer);

無料地図 openlayersでopenstreetmap(OSM)表示方法

Google Maps APIの有料化はGoogleにとって凶と出るだろう
という記事を見て、代わりとなる無料地図API「openlayers」でと無料地図「openstreetmap」を試してみた。

openlayersのダウンロード先 本家サイト
OpenLayers: Free Maps for the Web

ファイルを解凍すると多くの地図表示サンプルがあり、「openstreetmap」を表示するサンプルもある。

「openstreetmap」表示サンプル
OpenLayers-XXX\examples\osm.html

緯度経度を修正して東京ディズニーランドを表示
サンプル

var map, layer;
function init(){
  map = new OpenLayers.Map( ‘map’);
  layer = new OpenLayers.Layer.OSM( “Simple OSM Map”);
  map.addLayer(layer);
  map.setCenter(
    new OpenLayers.LonLat(139.885483, 35.630512).transform(
      new OpenLayers.Projection(“EPSG:4326″),
      map.getProjectionObject()
    ),12
  );  
}

 
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera