↧
D3.js（主に地図)の勉強会を行います。
↧
Google Maps APIで緯度経度を元にプロットしたマーカーの位置がずれる（測地系変換）
完全にズレテーラ。
物件データに記録されている緯度経度がおそらく「日本測地系」なんだろうなと思いつつ、日本測地系にもいろいろあるらしいので詳しいことを聞こうとサポートに連絡したところ「測地系、はぁ？ お前何言ってんの？」ぐらいのリアクションが返ってきたので、仕方がなく適当にいろいろ試して何とかすることに。
とりあえず「EPSG:4301」から「EPSG:4326」に変換すれば上手く行くのではないかと思ってやってみました。
測地系の変換には以下のライブラリを使用します。
Proj4js
サンプル
[javascript] //日本測地系の宣言 Proj4js.defs['EPSG:4301'] = "+proj=longlat +ellps=bessel +towgs84=-146.336,506.832,680.254,0,0,0,0 + no_defs"; //Proj4jsエラー発生時の動作を登録 Proj4js.reportError = function(msg) {console.log(msg);} //日本測地系から世界測地系への変換関数 function transformJ2W(lon,lat){ var source = new Proj4js.Proj('EPSG:4301'); var dest = new Proj4js.Proj('EPSG:4326'); var p = new Proj4js.Point( lon , lat); Proj4js.transform(source, dest, p); return p; } //日本測地系から世界測地系への変換 var j2w = transformJ2W(long, lat); //変換 console.log([j2w.y, j2w.x]) //変換した値を出力 [/javascript] とりあえず、1000件ほど試してみたところ、まぁ、許容範囲ではないかというところまでズレが直ったので良しとしました。
↧
↧
オープデータを公開している都市に色を塗ってみた。
↧
D3.js勉強会（地図入門）を開催しました。
example
D3.js勉強会（地図入門）が無事終了しました。
前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。
逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。
勉強会で使用したスライドとコードを置いておきます。
D3で地図を描こう！ 1
D3で地図を描こう！ 2
サンプルコード
(サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください)
スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。
まぁ、それでも多少参考になれば良いかなぁと。
ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足です。
次回は何をやるか、いつやるかは全く不明です。
もう一回くらい同じ内容(地図に関して)の勉強会をやってみても良いかなぁーなんてことも考えてます。
まぁ、需要があればですが。
ご参加いただいた皆さん、ありがとうございました！
↧
地理院地図の地図タイルを使ったD3.js&Cesiumサンプル
D3ラスタータイルサンプル
[html] <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> [/html] [javascript] (function(){ var width = Math.max(960, window.innerWidth); var height = Math.max(500, window.innerHeight); var tile = d3.geo.tile().size([width, height]); var minZoomLevel = 14; var maxZoomLevel = 20; var projection = d3.geo.mercator() .scale((1 << minZoomLevel) / 2 / Math.PI) .translate([width / 2, height / 2]); var center = projection([139.3555791,34.7500396]); var svg = d3.select("svg") .attr({ "width": width, "height": height }); var raster = svg.append("g"); var zoomed = function() { var tiles = tile .scale(zoom.scale()) .translate(zoom.translate()) (); var image = raster .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")") .selectAll("image").data(tiles, function(d) { return d; }); image.exit().remove(); image.enter().append("image") .attr("xlink:href", function(d) { return "http://cyberjapandata.gsi.go.jp/xyz/std/"+d[2]+"/"+d[0]+"/"+d[1]+".png"; }) .attr({ "width": 1, "height": 1, "x": function(d) { return d[0]; }, "y": function(d) { return d[1]; } }) } var zoom = d3.behavior.zoom() .scale(projection.scale() * 2 * Math.PI) .scaleExtent([1 << minZoomLevel, 1 << maxZoomLevel]) //スケールの最小値、最大値指定 .translate([width - center[0], height - center[1]]) .on("zoom", zoomed); projection .scale(1 / 2 / Math.PI) .translate([0, 0]); svg.call(zoom); zoomed(); })(); [/javascript] まぁ、ラスター地図を表示するなら素直にOpenLayersやLeaflet使った方が良いと思いますが。
cesium 3D地図サンプル
※WebGLに対応／有効にしたブラウザでないと見れません。 [javascript] var widget = new Cesium.CesiumWidget('cesiumContainer', { imageryProvider : new Cesium.OpenStreetMapImageryProvider({ url : 'http://cyberjapandata.gsi.go.jp/xyz/std/', //地理院地図を指定 credit : '地理院地図' }) }); [/javascript] ちょー簡単！ OpenLayersのサイトを見ていたら、OpenLayers 3.0にはCesiumライブラリも含まれるらしいので、今のうちに勉強しておいてもいいかもしれません。
↧
↧
D3.jsで読み込んだgeoJSONデータをthree.jsを使って3D表示する。
example
サンプル
d3-threeDというライブラリを使用しています。 [javascript] d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json) { var container; var camera, scene, renderer; var mesh; initScene(); function initScene() { container = document.createElement('div'); document.body.appendChild(container); //シーンの追加 scene = new THREE.Scene(); //カメラの設定 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(0, 0, 300); controls = new THREE.TrackballControls( camera ); scene.add(camera); //ライティングの設定 var light = new THREE.DirectionalLight(0xffffff, 2); light.position.set(1, 1, 1).normalize(); scene.add(light); //目印用のキューブを追加 var geometry = new THREE.CubeGeometry(20, 20, 20); var material = new THREE.MeshLambertMaterial({color:0x0000ff}) mesh = new THREE.Mesh(geometry, material); scene.add(mesh); //geojsonデータ読み込み var geodata = json.features; //投影法指定 var mercator = d3.geo.equirectangular(); //path変換関数生成 var path = d3.geo.path().projection(mercator); //表示位置調整 var translate = mercator.translate(); translate[0] = -2200; translate[1] = 550; mercator.translate(translate); //スケール指定 mercator.scale(900); //geoJSON→svg path→three.js mesh変換 var countries = []; for (i = 0 ; i < geodata.length ; i++) { var geoFeature = geodata[i]; var properties = geoFeature.properties; var feature = path(geoFeature); //svgパスをthree.jsのmeshに変換 var gmesh = transformSVGPathExposed(feature); for (j = 0 ; j < gmesh.length ; j++) { countries.push({"data": properties, "mesh": gmesh[j]}); } } //mesh追加 for (i = 0 ; i < countries.length ; i++) { var material = new THREE.MeshPhongMaterial({ color: Math.floor(Math.random() * 0xFFFFFF), opacity:1 }); var shape3d = countries[i].mesh.extrude({ amount: 20, bevelEnabled: false }); var toAdd = new THREE.Mesh(shape3d, material); toAdd.rotation.x = 60; scene.add(toAdd); } //レンダリング renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); renderer.render(scene, camera); animate(); } function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); controls.update(); } } [/javascript] 表示位置の調整とかが結構面倒でした。 amountで無理やり厚みを付けているので、あんまり綺麗に表示できてません。 ちゃんと使いこなすには、Three.jsを勉強しないとならないですね。
↧
【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた（3D地図）
example
昨日の記事の続きです。
各都道府県の人口データを元にMeshの厚みを変えてみました。
人口の多い県ほど高く表示されます。
サンプル
[javascript] d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json) { var container; var camera, scene, renderer; var mesh; initScene(); function initScene() { container = document.createElement('div'); document.body.appendChild(container); //シーンの追加 scene = new THREE.Scene(); //カメラの設定 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(0, 0, 200); controls = new THREE.TrackballControls( camera ); scene.add(camera); //ライティングの設定 var light = new THREE.DirectionalLight(0xffffff, 2); light.position.set(1, -4, 1).normalize(); scene.add(light); //geojsonデータ読み込み var geodata = json.features; //投影法指定 var mercator = d3.geo.equirectangular(); //path変換関数生成 var path = d3.geo.path().projection(mercator); //表示位置調整 var translate = mercator.translate(); translate[0] = -2200; translate[1] = 550; mercator.translate(translate); //スケール指定 mercator.scale(900); var max = d3.max(geodata, function(d){ return +d.properties['jinkou_人口']}) var colorScale = d3.scale.linear().domain([0, max]).range(["#00cc00", "#cc0000"]); var amountScale = d3.scale.linear().domain([0, max]).range([0, 60]); //geoJSON→svg path→three.js mesh変換 var countries = []; for (i = 0 ; i < geodata.length ; i++) { var geoFeature = geodata[i]; var properties = geoFeature.properties; var feature = path(geoFeature); //svgパスをthree.jsのmeshに変換 var gmesh = transformSVGPathExposed(feature); for (j = 0 ; j < gmesh.length ; j++) { countries.push({"data": properties, "mesh": gmesh[j]}); } } //mesh追加 for (i = 0 ; i < countries.length ; i++) { var color = colorScale(countries[i].data['jinkou_人口']); var material = new THREE.MeshPhongMaterial({ color: color, opacity:0.9 }); var amount = ~~(amountScale(countries[i].data['jinkou_人口'])); var shape3d = countries[i].mesh.extrude({ amount: amount, bevelEnabled: false }); var toAdd = new THREE.Mesh(shape3d, material); toAdd.rotation.x = 60; toAdd.position.z = - ~~(60 - amount); scene.add(toAdd); } //レンダリング renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); renderer.render(scene, camera); animate(); } function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); controls.update(); } } [/javascript]
↧
Google Earthを使ったストーリマップをブラウザ上で作成できるサービス「Tour Builder」
Tour Builder
以前の記事で、流山市のストーリーマップを作成しましたが、このような地図と物語を連動させて見せるコンテンツを誰でも手軽に作成できるストーリーテリングツールがGoogleから提供されています。
MNDRの北米ツアーのストーリーマップなどが公開されています。
MNDR / Chromeo / The Suzan North American Tour 2011
ストーリーマップを作成する操作画面はこんな感じ。
ロケーションを追加して、記事を書いていくだけでストーリーマップを作成することができます。
↧
【D3.js】SVGで作成した都道府県の地形を並べて表示する
example
見たまんまです。
D3.jsでGeoJSONデータを読み込み、svgのPathで地形を描画し並べて表示しています。
ポイントは各都道府県の中心座標を取得しtranslateで中心座標のxyを引くことで、一旦全ての地形の座標を0,0に初期化しているところです。
沖縄県だけ、中心点の座標が上手く取得できず変な場所に表示されています。
サンプル
[javascript highlight="26,27-32,33"] d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json){ var geodata = json.features; projection = d3.geo .mercator() //投影法の指定 .scale(1500) //スケール（ズーム）の指定 .translate([300,350]) .center([139.0032936, 36.3219088]); //中心の座標を指定 var path = d3.geo.path().projection(projection); //投影 var svg = d3.select("svg"); var map = svg.append("svg:g") .selectAll("path") .data(geodata) .enter() .append("g") .attr("transform", function(d, i){ var center = path.centroid(d); //中心点取得 var x = ~~center[0]; var y = ~~center[1]; var nx = Math.floor(i%10) * 150 + 100; //並び位置(x軸) var ny = Math.floor(i/10) * 120 + 100; //並び位置(y軸) //中心点分を引いて一度座標をx=0,y=0に戻す。その後nx,nyの位置に表示 return "translate(-"+x+",-"+y+"),translate("+nx+","+ny+")"; }) .append("svg:path") .attr({ "d": path, "fill": "green", "fill-opacity": 0.5, "stroke": "black" }) .append("title") .text(function(d){ return d.properties.PREF }) } [/javascript]↧
↧
ベクタータイルマップの紹介
正直なところ、ブログのタイトルに「GIS」と掲げながら、GISの勉強があまり進んでいない(D3ばっか弄っていた一年だった)ので、ネタが見つからなかったのですが、せっかくお誘いいただいた話なので、D3周辺で見つけたGISにかかわりがありそうな技術について紹介してみようと思います。 D3.jsを使ったベクタータイルマップです。
example
コードについては下記のサンプルそのままなので、そちらを参照してください。
OpenStreetMap Vector Tiles with D3
【ちょっとだけ解説】
Open Street MapのMapnik Vector Tiles API(β版)を使用することで、ラスタ地図のAPIでおなじみの{z}/{x}/{y}方式使ってベクター情報を取得することができます。
具体的には、下記のようなURLにリクエストを投げると、画像ではなくその位置のGeoJSONデータを返してきます。
http://tile.openstreetmap.us/vectiles-highroad/12/656/1582.json
取得したGeoJSONデータを、D3.jsを使ってフロントエンド側でsvg:PATH要素に変換して表示したものが上記のサンプルです。
デベロッパーツールでエレメントを確認すると、タイル毎に一つのSVG要素が追加され、そのなかに多数のPath要素が含まれているのが確認できます。
SVG要素なのでフロントエンド側でのカスタマイズが、ラスタ画像に比べて非常に柔軟に行えます。
カラーの変更やイベントの設置なども自在に行えるので、非常に面白いのですが残念ながら実用的な速度では動作しません。
特に、東京のような情報量の多い都市を表示すると非常に重くります。
当然、この上にさらに情報を重ねて表示すればますます遅くなるわけで、今のところは実用性はありませんが今後期待したい技術だと思い、紹介させていただきました。
↧
福岡市のオープンデータを使用して交通危険個所マップを作成しました。
最近のオープンデータ促進の流れを受けて、いくつかの自治体でデータの公開がおこなわれています。 その中の一つ、福岡市のオープンデータ(サンプル)にて公開されている交通危険個所データをGoogle Map上にヒートマップとして表示してみました。
example
SVGを使用しているので、IE9以上Chrome推奨です。
データの入手元は以下です。
福岡市サンプルデータサイト I02交通危険箇所、D01小学校
以前、福岡市のサンプルデータを使用して「防犯危険箇所ヒートマップ＆ボロノイ図」を作成したことがあるのですが、今回はもう少し実用的なものができないか試してみました。
使用用途としては、小学校までの通学路上の交通危険個所のチェックを想定してます。
Google Map上に、交通危険個所のヒートマップと現在の交通状況を表示しルート検索(徒歩)を行えるように、また、ヒートマップのポイントをクリックした際にその場所のストリートビューを表示することで、危険個所の景色を確認できるようにしてみました。
（一部、ストリートビューが対応していない場所があります）
Google Maps APIのヒートマップレイヤはクリックイベントが取得できないようなので、イベント取得のためだけにD3を使って地図上に透明なcircleを重ねてます。
通学路データなどがあれば地図上に重ねてみることで通学の際の注意しなくてはならない場所などを確認しやすくなるのではないかと思って探してみたのですが、残念ながら公開されてはいないようなので代わりにGoogle Mapのルート検索を付けました。
その他に国土数値情報から取得した小学校区ポリゴンをFusion Tablesを使ってオーバーレイしてみたりもしたのですが、地図が見づらくなっただけだったのでやめました。ソースコードにその痕跡が残っているので、興味ある方はご覧になってください。
こういった危険個所データはとても実用的なので、各自治体で本格的に提供されるようになると嬉しいですね。一緒に、道路照明灯の位置データとか公開してくれるといろいろ分析ができて面白いかもしれません。
その他の関連記事
D3.js/オープンデータ/可視化
↧
地理空間情報作成・編集・共有サイト「geojson.io」
geojson.ioは、地理空間情報(GeoJSON)の作成・編集・共有が行えるWebサービスです。
エディタを使ってマーカーの設置や、ライン(線)、ポリゴン(面)情報を作成し属性情報の編集などを行うことができます。地理情報の編集中は常にgeojsonhintを使ってエラーチェックが行われるので、テキストエディタなどでJSONを編集するのに比べて安全です。読み込めるデータ形式としては「GeoJSON, TopoJSON, KML, CSV, GPX, OSM XML」をサポートしています。
詳しい操作方法は、作者さんが書かれている記事を見てください。
geojson.io - macwright.org
動画チュートリアル
作成したGeoJSONデータは、iframeを使ってサイトに埋め込んだり、パーマリンクで共有することができます。
iframe埋め込み
パーマリンク
shimizu/eaccf7b433382561beef
(平成22年 群馬県 人口集中地区データをマッピングしたものです)
geojson.ioはオープンソースプロジェクトとしてソースコードが公開されています。
mapbox / geojson.io
↧
Google Map上に画像を配置する
example
群馬県警察で公開されている「犯罪発生マップ(画像)」をGoogle Map上に配置してみました。
高崎警察署管内の「住宅対象侵入窃盗(市街のマップ)」を表示しています。
画像の配置自体は簡単に行えるのですが、位置をぴったり合わせるのが難しいですね。
サンプル
[javascript] function initialize() { //Google Maps API初期化 geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15, center: new google.maps.LatLng(36.3219088, 139.0032936), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //マップ上の表示領域が変化した際の処理 google.maps.event.addListener(map, 'bounds_changed', function() { var latOutput = document.getElementById('lat'); var lngOutput = document.getElementById('lng'); var swlatOutput = document.getElementById('swlat'); var swlngOutput = document.getElementById('swlng'); //北東緯度経度表示エレメント var nelatOutput = document.getElementById('nelat'); var nelngOutput = document.getElementById('nelng'); var latlngBounds = map.getBounds(); //マップ中心の緯度経度取得 var centerLatlng = latlngBounds.getCenter(); var ceLat = centerLatlng.lat(); var ceLng = centerLatlng.lng(); latOutput.innerText = ceLat; lngOutput.innerText = ceLng; //マップ南西の緯度経度取得 var swLatlng = latlngBounds.getSouthWest(); var swlat = swLatlng.lat(); var swlng = swLatlng.lng(); swlatOutput.innerText = swlat; swlngOutput.innerText = swlng; //マップ北東の緯度経度取得 var neLatlng = latlngBounds.getNorthEast(); var nelat = neLatlng.lat(); var nelng = neLatlng.lng(); nelatOutput.innerText = nelat; nelngOutput.innerText = nelng; }); var bounds = new google.maps.LatLngBounds(); //画像の配置位置指定 bounds.extend(new google.maps.LatLng(36.3068070483715,138.95191292059326)); bounds.extend(new google.maps.LatLng(36.361153624185235,139.06435112249756)); //画像をグラウンドオーバーレイとして追加 var groundOverlay = new google.maps.GroundOverlay("http://www.police.pref.gunma.jp/seianbu/01seiki/hanzaimap/images/jyutaku/takasaki-s.jpg", bounds, { map : map, opacity : 0.3, clickable : true }); //地図を表示 map.fitBounds(bounds); //グラウンドオーバーレイがクリックされたら、透明度を変更 google.maps.event.addListener(groundOverlay, "click", toggle(show, hide)); function show(){ groundOverlay.setOpacity(1); } function hide(){ groundOverlay.setOpacity(0.5); } } google.maps.event.addDomListener(window, 'load', initialize); function toggle(){ var fn = arguments; var l = arguments.length; var i = 0; return function(){ if(l <= i) i=0; fn[i++](); } } [/javascript]
↧
↧
GISの参考書はどこにあるのか？
GIS、それもQGISの参考書を探しております。
ネットを検索して見つけたリソースで、少しづつ少しづつ勉強していっているのですが、どうにも知識が断片的・パッチワークになりがちなので、参考書を購入しようかなと思い立ったのですが、その過程でちょっと気づいたことがあるったので記事にしてみます。
専門の方からすると当たり前の事なのかもしれませんが、私のように専門外のエンジニアでGISを学ぼうと思っている方には驚きの事実なんじゃないかと思うので。
驚いたこと、それは……
GISの参考書は書店の「コンピュータ書籍」コーナーには置いてない！
（本屋によって違うかも）
そもそも入荷されていないケースが多いのですが、たとえ在庫があったとしてもオライリー本が並んでる棚の周辺を探し回っても、その周辺には置いてないんです。
では、いったいどのコーナーにあるのか？
これがよくわからないんですよねー。
書店で、書籍の分類がどのように行われているのか、各店で違うのか、その辺よくわからないのですが。
ものによっては、地理や地図などを扱っているコーナーにあったり、「GISを使って商圏分析をしよう！」みたいな本だとマーケティング本の棚に並んでたり、統計学の棚に潜んでいたり、いろんなところに分散していることが多いようなのです。
とりあえず地元の図書館サイトでGIS本を検索してみたところ、日本十進分類法でもGIS関連書籍は色んな項目に分かれているみたいで、結果一つにまとまって置かれていることがないんですよ。
つまりGISの参考書は「GIS」というジャンルではなくて「利用用途」を元に分類されているため、書店でも図書館でもてんでバラバラに置かれていて非常に見つけにくいのです。
空間スペースを用いた分類の限界…… orz
コンピュータ関連書籍として「CAD」本の隣あたりにまとめてボンと置いておいてくれた方が、絶対利用者にとって探しやすいと思うのですけどね。
そんなわけで、そうそうに現実<リアル>店舗で探すのをあきらめAmazonの検索窓に「GIS」と入力したところ、KDPで出版されている下記の書籍を発見し即ポチりました。
年末年始は下記の本を参考にQGISの勉強をしようと思います。
QGIS自習室 (GISデータと空間参照システム)
posted with amazlet at 13.12.26
(2013-11-06)
売り上げランキング: 3,191
売り上げランキング: 3,191
QGIS自習室 (個別値主題図とラベル主題図)
posted with amazlet at 13.12.26
(2013-11-24)
売り上げランキング: 3,404
売り上げランキング: 3,404
↧
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もある […]
↧
【D3.js】地図をデザインする
example 下記記事を参考に、ちょっとオシャレな感じの日本地図を作成してみました。 GeoExamples: D3 map Styling tutorial II: Giving style to the base […]
↧
ストーリーマップが簡単に作成できるサービス「StoryMapJS」
ストーリーマップ エディタ ストーリーマップを作成できるサービスがあったので紹介します。 今のところβ版で、利用するにはGoogle のアカウントが必要です。 StoryMapJS 住所等で検索し、画像や動画を登録して記 […]
↧
↧
前橋市には、男子より女子の方が多く住んでいる。
example 男子の人口を、女子の人口が上回る地域が多数。 概要 前橋市オープンデータライブラリーにて公開されている「町丁ごとの年齢別人口構成推移」を利用させていただきました。 地域ごとに男性の人口と女性の人口を比較し […]
↧
3Dコロプレスマップ(塗り分け地図)が簡単に作成できる「GeoCanvas」
「GeoCanvas」は、わずか数ステップで地理空間情報を読み込んで3Dのコロプレスマップを作成できるアプリケーションです。実際の動作については下記動画を。 使ってみた というわけで、とりあえずインストールして使ってみた […]
↧
【D3.js】隣接する区画を表示する
example こちらのサンプルを見て日本地図版を作ってみました。 マウスオーバーした市に隣接する市区町村がオレンジ色で表示されます。 サンプル ポリゴン数の少ないデータの方が内容を理解しやすいので、都道府県版のサンプル […]
↧