世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

The web is the totality of facts, not of things.

ウェブとは「思考しうること」の表現であり、すべて「思考しうること」は言語に支配される。ウェブとは言語がその限界を定めるもの、すなわち世界である。また、世界は事実の総体であり、ものの総体ではない。


よって、インターネットにモノがつながること（Internet of Things）が relevant なのではない。それを通じてウェブに事実が流れ込むこと（Web of Facts）が relevant なのである。


インターネットにモノがつながることの有用性は、モノがウェブに流し込む「事実」の奔流を通じてウェブが構成する「世界」が豊かになることにあると考えよ。


この検討結果が memex やハイパーテキストが既に考えてきた事柄と重なるのか、判断するつもりはない。ここに書いたことはとりたてて新しいわけではない。また、私が考えたことをほかの誰かがもうすでに考えていたかどうか、私にはどちらでもかまわないので典拠も記さない。


もしこの仕事が価値をもつとしたら、一つは、考えられたことがここに表現されたことで、考えがうまく表現されるほど、核心を衝くほど、この価値は大きくなる。第二の価値は、この問題の解決によっていかにわずかなことしかなされなかったかを、示す点にある。


ルートヴィヒ・ウィトゲンシュタイン、2014

Leaflet + Webix (thx shimz.me)

http://shimz.me/example/webix/map/maps.html のカバーで、
http://handygeospatial.github.io/mapsites/2014/08/15/ を作成しました。感謝。
f:id:hfu:20140815062044p:plain

コード

多少の単純化を施しています。Webix も Leaflet もスッキリ書かせてくれるスタイルなので、かなり楽に書けた感じです。

<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<meta charset='UTF-8'>
<title>Leaflet + Webix (thx shimz.me)</title>
<link rel='stylesheet' href='../../../js/webix.css'>
<link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css'>
<script src='../../../js/webix.js'></script>
<script src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js'></script>
</head>
<body>
<script>
webix.protoUI({
	name: 'leaflet',
	$init: function(){
		this.$view.innerHTML = "<div style='width:100%;height:100%'/>";
		this._contentobj = this.$view.firstChild;
		this.map = null;
		this.$ready.push(this.render);
	},
  render: function() {
	  var c = this.config;
    this.map = L.map(this._contentobj);
		var delayDraw = function(map){
			return function(){map.setView(c.center, c.zoom);}
		}		
		setTimeout(delayDraw(this.map), 500);
		L.tileLayer(c.layer, {
      attribution: c.attribution, center: c.center, zoom: c.zoom
    }).addTo(this.map);
  },
	center_setter: function(config){
		if(this.map) this.map.setCenter(config);
		return config;
	},
	mapType_setter: function(config){
		if(this.map) this.map.setType(config);
		return config;
	},
	zoom_setter: function(config){
		if(this.map) this.map.setZoom(config);
		return config;
	},
}, webix.ui.view);

webix.ui({
  view: 'window', id: 'leaflet', move: true, 
  top: 40, left: 40, width: 640, height: 480,
  head:{
    view: 'toolbar', elements: [
      {view: 'label', label: '日本へそ公園', align: 'left'},
      {view: 'button', label: '閉じる', width: 80, click:
        function() {$$('leaflet').close();}}
    ]
  },
  body:{
    view: 'leaflet', id: 'map', zoom: 16, center: [35.0, 135.0],
		layer: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
		attribution: '地理院タイル（標準地図）'
  }
}).show();
</script>
</body>
</html>

Cesium 1.0 で地理院タイル（地形モデルつき）

2014年8月1日に Cesium 1.0 がリリースされました（Cesium Version 1.0 Released）。それに先立ち、2014年4月29日には STK World Terrain という「terrain tileset for use with Cesium and other applications」という位置づけのものをリリースされています（STK World Terrain）。これらを使って、地理院タイル（標準地図）を表示してみるサンプルを作成してみました。

結果

Hello World!
f:id:hfu:20140812000518p:plain
日本付近で地球儀を拡大していくと、地形の起伏が反映されていることが分かります。また、右上のメニューから、2D、2.5D、球面の3つのモードが選択できる状態になっていることが分かります。

製作過程

Cesium のチュートリアルを二つほどたどったのみです。

Cesium Up and Running

Getting Started 的なものです。これで、地形データの話以外はカバーされます。やたらと内容のあるZIPファイルをサーバに置くことを迫られますが、今回は甘受してみました。また、HTTP Server に node.js を使うことを支持されますが、私は迷わず、python -m SimpleHTTPServer しました。

Cesium Terrain and Water Tutorial

地形データを重ねあわせる部分です。なお、Cesium から地形データには2種類あって、チュートリアルにあるものよりは、//cesiumjs.org/stk-terrain/tilesets/world/tiles のほうがレベルが高いようです。

コード

作成したコードとしては、30行程度となりました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
#cesiumContainer {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  margin: 0; overflow: hidden; padding: 0; font-family: sans-serif;
}
html {height: 100%;}
body {padding: 0; margin: 0; overflow: hidden; height: 100%;}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.OpenStreetMapImageryProvider({
    url: 'http://cyberjapandata.gsi.go.jp/xyz/std/', credit: '地理院タイル'}),
    baseLayerPicker: false});
viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'http://cesiumjs.org/stk-terrain/tilesets/world/tiles'});
</script>
</body>
</html>

技術的背景について

STK World Terrain はポリゴンメッシュデータのタイル配信であるようです。つまり、ポリゴンメッシュデータは（rest of us でも）タイル配信可能であるということが伺えます。

Leaflet.TileLayer.Filter の適用 Pt. 1

Leaflet.TileLayer.Filter (Home · humangeo/leaflet-tilefilter Wiki · GitHub) を地理院タイルに適用してみました。

結果

http://handygeospatial.github.io/mapsites/2014/08/09/
画像をinvertするサンプルです。Safari や Chrome で見る限り、Leaflet.TileLayer.Filter の狙うところは問題なく適用されています。ただし、上記のサンプルで使用しているフィルタは、Firefox が対応していないので、Firefox では普通の地図としてしか表示されません。

コード

L.tileLayer の第二引数に filter を加えるだけです。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/leaflet-hash.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.GeoJSON.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.Filter.min.js"></script>
    <style>
      body {padding: 0; margin: 0}
      html, body, #mapdiv {height: 100%; width: 100%;}
      .leaflet-container {background: #000;}
    </style>
  </head>
  <body>
    <div id="mapdiv">
    <script>
      var std = L.tileLayer(
        'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        {attribution: "地理院タイル（標準地図）",
         filter: function() {
           new L.CSSFilter(this, {filters: ['invert(100%)']}).render();
         }});

      var map = L.map('mapdiv', {
        center: [35.3622222, 138.7313889], zoom: 5,
        layers: [std]});

      var hash = L.hash(map);
      L.control.layers({'地理院タイル（標準地図）': std}).addTo(map);
    </script>
  </body>
</html>

CSSを使うアプローチとLeaflet.TileLayer.Filterを使うアプローチの比較

CSS指定をするアプローチのほうが、HTMLに余計なシュガーをつけていないという意味では優れているようにも感じますが、画像 filter への対応が、ブラウザによってバラバラしている（特に、IEではバージョン間のブレが見られている）状況では、CSSFilter と CanvasFilter を何となく統一的なアプローチで扱えるLeaflet.TileLayer.Filterを挟む価値はあるように思いました。

Candidate areas for photogrammetric image analysis with GSI tiles

Considering availability of data and how typical the landscape is, I chose some candidate areas for photogrammetric image analysis with GSI tiles:

Kiryu

http://handygeospatial.github.io/mapsites/2014/08/06/#17/36.41629/139.34524
Kiryū, Gunma - Wikipedia, the free encyclopedia
a kind of Japanese typical town facing mountain.

Ashikaga

http://handygeospatial.github.io/mapsites/2014/08/06/#17/36.33747/139.45449
Ashikaga, Tochigi - Wikipedia, the free encyclopedia
a traditional town with more rectangular city blocks.

Niigata

http://handygeospatial.github.io/mapsites/2014/08/06/#16/37.9165/139.0384
Niigata, Niigata - Wikipedia, the free encyclopedia
a traditional port city with more populations than other candidate cities.

OpenLayers 3 で地理院の道路中心線ベクトルタイルを読む

OpenLayers 3 で地理院の道路中心線ベクトルタイルを読むサイトを作成した。最小限のコードに加え、OpenLayers 3 の特徴である地図の回転に対応してある。

作成したサイト

Experimental GSI Vector Tiles via OpenLayers 3 (shift+drag to rotate)

技術的特徴

シフトキーを押しながらドラッグすると地図が回転する。また、fractionalZoom : true をセットしてあるので、Leaflet 界隈で言うオーバーズームを行う。

コード

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<style>
body {padding: 0; margin: 0}
#mapdiv {height: 100%; width: 100%;}
</style>
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<title>Experimental GSI Vector Tiles via OpenLayers 3 (shift+drag to rotate)</title>
</head>
<body>
<div id="mapdiv"></div>
<script>
var map = new ol.Map({target: 'mapdiv',
  interactions: ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()
  ]),
  fractionalZoom: true,
  layers: [
    new ol.layer.Tile({source: new ol.source.XYZ({url: 
      'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'})}),
    new ol.layer.Vector({
      source: new ol.source.TileVector({
        format: new ol.format.GeoJSON({defaultProjection: 'EPSG:4326'}),
        projection: 'EPSG:3857',
        tileGrid: new ol.tilegrid.XYZ({minZoom: 14, maxZoom: 16}),
        url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_rdcl/' +
          '{z}/{x}/{y}.geojson'}),
      style: function(feature, resolution) {
        return [new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#aaa', width: 6
          })
        })];
      }
    })
  ],
  view: new ol.View({
    center: ol.proj.transform([139.8977, 36.5594], 'EPSG:4326', 'EPSG:3857'),
    zoom: 18, rotation: 10.7975
  })
});
</script>
</body>
</html>

IETF GeoJSON

IETF での GeoJSON の検討が進んでいるようです：

仕様の検討・作成は、GitHub で進められているようです：

GeoJSON のもともとの仕様は、次の場所にあります：

日本語訳を作られている方もいらっしゃいます：

GeoJSON の背後にある信念は、次のスライドで語られていると思います：
http://sgillies.github.io/foss4gna-2013-geojson-is-spectacularly-wrong/#/

GeoJSON は simple features の JSON 実装ですが、いわば simple features の Protocol Buffer 実装として、geobuf という方式の検討が進められているようです：

ウェブネイティブかつジオスペーシャルなベクトルデータのフォーマットの検討が、いろいろなフェーズで進展していっているように見えます。