Skip to content

Instantly share code, notes, and snippets.

@ponkore

ponkore/README.md

Last active August 18, 2020 09:05
Show Gist options
  • Save ponkore/5330426 to your computer and use it in GitHub Desktop.
Save ponkore/5330426 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers を使って、電車の路線図を書く試み
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  (駅の位置、名称情報)

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

  1. 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 でまともにプログラム書いたことがないので、見よう見まねな感じが辛い...。

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

Raw
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>
Raw
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 });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment