ponkore/README.md

## README.md

      
    Raw
  

              README.md
            
          
    OpenLayers を使って鉄道路線図を書いてみる

データを入手

まずは国土数値情報ダウンロードサービスより、「JPGIS2.1(GML)準拠及びSHAPE形式データのダウンロード」をクリックし、そのページの下の方の「国土骨格」のカテゴリにある「鉄道時系列（線、点）」をクリック。(要するにここ )。
下の方にデータ選択ボタンがあるので選んで先に進む。用途とかのアンケートにちゃんと答えてからダウンロードする。
必要なデータのみに絞る

ダウンロードしたデータは、ZIP 形式なので解凍する。解凍したデータ(SHAPE形式)を QGIS(http://www.qgis.org/) を使って必要なデータのみに絞ってしまう。
(※手順は別途まじめに書こうと思う。自分は JR西日本の「現在生きているデータ(有効期間のend が 99999999 なもの)」に絞り込んだ)
GeoJSON 形式に変換

OpenLayers に生のベクトルデータとして取り扱いをさせたいので、SHAPE 形式のデータを GeoJSON 形式に変換（といってもただ形式を選択して保存するだけ）した。
できあがった GeoJSON 形式のファイルを、
JRW-railroad.geojson  (路線の線形のベクトルデータ)
JRW-stations.geojson  (駅の位置、名称情報)

というファイル名で保存した。

Web サーバの準備

ディレクトリ構成は以下の様な感じ。
/maptest/
   example.html
   example.js
   json/
       JRW-railroad.geojson
       JRW-stations.geojson

とりあえず、自分のマシン環境で、以下の URL でアクセスできるような形にしてみた。
http://localhost/maptest/example.html
感想とか


JR西日本の全駅全路線のデータをいっぺんにハンドリングするので、結構重い(自分のMac: Core2Duo 2.33GHz, OSX10.7, Firefox20.0)。
Firefox でテストをしていたが、Chrome だと少しレスポンスが改善される。iPhone5 だと自分の Mac とあまり変わらないくらい。
レイヤーで線の情報、駅の情報をチェックボックスで off できるようにしているが、どちらか一方を off にするだけでも、ずいぶん軽くなる(ということで、やはりデータ量の多さがネックかと)
プログラム(JavaScript)自体チューニングはしていないが、この重さから考えると抜本的な見直しが必要と思われる(線形だけでも MapServer を経由してラスタ化してしまう、とか)
OpenLayers わからんことが多い。今のところ駅のシンボル（ただの○）が線の裏側に表示されていてダサい。
あと路線の描画で QGIS だとそれなりに格好の良いスタイル（電車の路線を表す点線みたいなやつ）を表現できるのだが、OpenLayers でできるのか???
線名、駅名を、路線のポリゴンと重ならないように表示させる、なんていう芸当は、OpenLayers では多分無理。
JavaScript でまともにプログラム書いたことがないので、見よう見まねな感じが辛い...。

こんどまじめに記事にしよう...

  
## example.html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>OpenLayers example</title>
  <!--
    https://scraperwiki.com/views/openlayers_geojson_example/edit/
  -->
  <script type="text/javascript" src="http://media.scraperwiki.com/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript" src="http://localhost/maptest/example.js"></script>
</script>
</head>
<body>
<h1>OpenLayers GeoJSON example</h1>
<div id="map" style="width: 1024px; height: 600px; border: 1px solid black;"></div>
</body>
</html>

## example.js
// Start position for the map (hardcoded here for simplicity)
var lat=34.73368;
var lon=135.500035;
var zoom=12;

var map; //complex object of type OpenLayers.Map

//Initialise the 'map' object
$(function() {
  map = new OpenLayers.Map('map', {
    layers: [
      new OpenLayers.Layer.OSM.Mapnik("Mapnik")
    ],
    controls: [
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.PanZoomBar(),
      new OpenLayers.Control.LayerSwitcher(),
      new OpenLayers.Control.Attribution()],
    maxResolution: 'auto'
  });
  var lonLat = new OpenLayers.LonLat(lon, lat).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
  );
  map.setCenter(lonLat, zoom);

  // see http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style
  var railroadDrawStyle = new OpenLayers.StyleMap({
      'default':{
          strokeColor: "#000000",
          strokeOpacity: 1,
          strokeWidth: 4.5,
          strokeDashstyle: "solid", // "dash",
          strokeLinecap: "square",
          label : "${name}",
          fontColor: "red",
          fontSize: "12px",
          fontFamily: "Courier New, monospace",
          fontWeight: "bold",
          labelOutlineColor: "white",
          labelOutlineWidth: 3
  }});
  var stationDrawStyle = new OpenLayers.StyleMap({
      'default':{
          pointRadius: 6,
          strokeColor: "#FF0000",
          strokeOpacity: 1,
          strokeWidth: 2.0,
          strokeDashstyle: "solid",
          strokeLinecap: "square",
          fillColor: "#0000ff",
          fillOpacity: 1.0,
          label : "${name}",
          fontColor: "black",
          fontSize: "10px",
          fontFamily: "Courier New, monospace",
          fontWeight: "bold",
          labelOutlineColor: "white",
          labelOutlineWidth: 2
  }});

  function create_features(url, layer_name, create_feature_fn, layer_stylemap) {
    var geojson_format = new OpenLayers.Format.GeoJSON();
    $.getJSON(url, "",
      function(data, textStatus, jqXHR) {
        var layer = new OpenLayers.Layer.Vector(layer_name, layer_stylemap);
        $.each(data["features"], function(i, val) {
          var geometry = geojson_format.parseGeometry(val["geometry"]);
          geometry.transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
          );
          layer.addFeatures([create_feature_fn(val, geometry)]);
        });
        map.addLayer(layer);
     });
  }

  function feature_railroad_fn(val, geometry) {
    var feature = new OpenLayers.Feature.Vector(geometry, {
      id: val["id"],
      name: val["properties"]["N05_002"] // 線名
    });
    return feature;
  }

  function feature_station_fn(val, geometry) {
    var feature = new OpenLayers.Feature.Vector(geometry, {
      id: val["id"],
      name: val["properties"]["N05_011"] // 駅名
    });
    return feature;
  }

  //var url1 = "http://localhost/maptest/json/sanyo-shinkansen-lines.geojson";
  //var url2 = "http://localhost/maptest/json/sanyo-shinkansen-stations.geojson";
  var url1 = "http://localhost/maptest/json/JRW-railroad.geojson";
  var url2 = "http://localhost/maptest/json/JRW-stations.geojson";

  create_features(url1, "Line", feature_railroad_fn, { styleMap: railroadDrawStyle });
  create_features(url2, "Station", feature_station_fn, { styleMap: stationDrawStyle });
});
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>OpenLayers example</title>
	<!--
	https://scraperwiki.com/views/openlayers_geojson_example/edit/
	-->
	<script type="text/javascript" src="http://media.scraperwiki.com/js/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<script type="text/javascript" src="http://localhost/maptest/example.js"></script>
	</script>
	</head>
	<body>
	<h1>OpenLayers GeoJSON example</h1>
	<div id="map" style="width: 1024px; height: 600px; border: 1px solid black;"></div>
	</body>
	</html>
	// Start position for the map (hardcoded here for simplicity)
	var lat=34.73368;
	var lon=135.500035;
	var zoom=12;

	var map; //complex object of type OpenLayers.Map

	//Initialise the 'map' object
	$(function() {
	map = new OpenLayers.Map('map', {
	layers: [
	new OpenLayers.Layer.OSM.Mapnik("Mapnik")
	],
	controls: [
	new OpenLayers.Control.Navigation(),
	new OpenLayers.Control.PanZoomBar(),
	new OpenLayers.Control.LayerSwitcher(),
	new OpenLayers.Control.Attribution()],
	maxResolution: 'auto'
	});
	var lonLat = new OpenLayers.LonLat(lon, lat).transform(
	new OpenLayers.Projection("EPSG:4326"),
	map.getProjectionObject()
	);
	map.setCenter(lonLat, zoom);

	// see http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style
	var railroadDrawStyle = new OpenLayers.StyleMap({
	'default':{
	strokeColor: "#000000",
	strokeOpacity: 1,
	strokeWidth: 4.5,
	strokeDashstyle: "solid", // "dash",
	strokeLinecap: "square",
	label : "${name}",
	fontColor: "red",
	fontSize: "12px",
	fontFamily: "Courier New, monospace",
	fontWeight: "bold",
	labelOutlineColor: "white",
	labelOutlineWidth: 3
	}});
	var stationDrawStyle = new OpenLayers.StyleMap({
	'default':{
	pointRadius: 6,
	strokeColor: "#FF0000",
	strokeOpacity: 1,
	strokeWidth: 2.0,
	strokeDashstyle: "solid",
	strokeLinecap: "square",
	fillColor: "#0000ff",
	fillOpacity: 1.0,
	label : "${name}",
	fontColor: "black",
	fontSize: "10px",
	fontFamily: "Courier New, monospace",
	fontWeight: "bold",
	labelOutlineColor: "white",
	labelOutlineWidth: 2
	}});

	function create_features(url, layer_name, create_feature_fn, layer_stylemap) {
	var geojson_format = new OpenLayers.Format.GeoJSON();
	$.getJSON(url, "",
	function(data, textStatus, jqXHR) {
	var layer = new OpenLayers.Layer.Vector(layer_name, layer_stylemap);
	$.each(data["features"], function(i, val) {
	var geometry = geojson_format.parseGeometry(val["geometry"]);
	geometry.transform(
	new OpenLayers.Projection("EPSG:4326"),
	map.getProjectionObject()
	);
	layer.addFeatures([create_feature_fn(val, geometry)]);
	});
	map.addLayer(layer);
	});
	}

	function feature_railroad_fn(val, geometry) {
	var feature = new OpenLayers.Feature.Vector(geometry, {
	id: val["id"],
	name: val["properties"]["N05_002"] // 線名
	});
	return feature;
	}

	function feature_station_fn(val, geometry) {
	var feature = new OpenLayers.Feature.Vector(geometry, {
	id: val["id"],
	name: val["properties"]["N05_011"] // 駅名
	});
	return feature;
	}

	//var url1 = "http://localhost/maptest/json/sanyo-shinkansen-lines.geojson";
	//var url2 = "http://localhost/maptest/json/sanyo-shinkansen-stations.geojson";
	var url1 = "http://localhost/maptest/json/JRW-railroad.geojson";
	var url2 = "http://localhost/maptest/json/JRW-stations.geojson";

	create_features(url1, "Line", feature_railroad_fn, { styleMap: railroadDrawStyle });
	create_features(url2, "Station", feature_station_fn, { styleMap: stationDrawStyle });
	});