カテゴリー : 地図GIS

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