一味違う地図をサイトに載せよう – ABOUT ME – 朝日 孝輔

View Github Repository Open presentation in a new window

waigania13

See all presentation from waigania13

一味違う地図をサイトに載せよう – ABOUT ME – 朝日 孝輔

0 0

html5fun2015

2015/10/31 html5fun&OSGeo.JP資料

On Github waigania13 / html5fun2015

一味違う地図をサイトに載せよう

ABOUT ME

朝日 孝輔

地理空間情報を扱うオープンソースソフトウェアのコミュニティ OSGeo財団日本支部 運営委員

本日の内容

webで地図を公開する際のサービスやライブラリを幾つかご紹介

  • Mapbox
  • CartoDB
  • Cesium

Mapbox

CartoDB

CartoDB

Cesium

説明の前に、ちょっとだけ

Google Map?

Google Mapでも全然OKだよ
ただし…
  • ライセンス 利用規約は読もうね、違反しちゃだめよ
  • 選択肢をいくつか知っておこう、オープンなもので作ろう
  • 折角なのでカッコいいサイトを作ろう

Mapbox

Mapbox

地図を使ったアプリケーションを作成するためのプラットホーム
  • Mapboxのサイト上で地図のデザインを選択できます
  • カスタムツールを使ってオリジナルのデザインを作成できます
  • 作成した地図の上にデータを配置できます
  • 作成した地図を公開できます
  • JavaScript API,Android/iOS SDKから作成した地図を使用できます
ユーザ登録してプロジェクトを作成します 最初に背景地図のスタイルを選択します 背景地図のデータはOpenStreetMapが使われています
Marker,Line,Polygonをサイト上で配置できます geojson,kmlといったデータを予め用意してあれば それを読みこませることもできます
プロジェクトをSaveすると API/SDKのためのMap ID 地図をシェアするためのURL サイトに組み込むためのコードが発行されます
Turfとか注目されています

プログラマの方はMapboxのgithubは要チェック

https://github.com/mapbox
まずは無料プランで試してみましょう

CartoDB

CartoDB

地図を使ったアプリケーションを作成するためのプラットホーム
  • CartoDBにデータをアップロードして、さまざまな表現を付けられます
  • データの編集もCartoDB上で行えます
  • データをどのように表示・表現すべきか提案してくれたります
  • 作成した地図を公開できます
  • APIを通して作成したデータを使用できます
ユーザ登録してDATASETを作成します 手持ちのcsv、geojson、kmlなどがあればアップロードできます 位置情報を持っている必要はあります
MAPVIEWでデータを地図上に展開できます 用意されている背景地図を選択できます タイル地図ならURLを指定して背景に指定もできます Map Layer Wizardで簡単にDATASETの表現付もできます
MAPをPUBLISHすると 地図をシェアするためのURL サイトに組み込むためのコードが発行されます
Torqueとか注目されています

プログラマの方はCartoDBのgithubは要チェック

https://github.com/CartoDB
まずは無料プランで試してみましょう
Pacific Spatial Solutionsが、 CartoDBを日本語化してくれています こちらもお試し下さい

Cesium

Cesium

2D,3Dのバーチャル地球儀を作成するJavaScriptライブラリです WebGLを使用しています
cesiumをリンクして 

						viewerを作成、カメラ位置を移動します
						
						
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.camera.flyTo({
	destination : new Cesium.Cartesian3.fromDegrees(141.024902, 42.359777, 10000.0)
});
						

					

						データを読み込みましょう
						
var dataSource = new Cesium.GeoJsonDataSource();
dataSource.load('./aed.geojson');
viewer.dataSources.add(dataSource);
						

						DEMO
					

						国土地理院の地図に変更しよう
						
var viewer = new Cesium.Viewer('cesiumContainer', {
	imageryProvider: new Cesium.OpenStreetMapImageryProvider({
		url: 'http://cyberjapandata.gsi.go.jp/xyz/std/',
		credit: new Cesium.Credit('地理院タイル', '', 'http://maps.gsi.go.jp/development/ichiran.html')
	}),
	baseLayerPicker: false
});
						

						DEMO
					

						地形データを読み込もう
						
var terrainProvider = new Cesium.CesiumTerrainProvider({
	url : '//assets.agi.com/stk-terrain/world',
	requestVertexNormals: true
});
viewer.terrainProvider = terrainProvider;
viewer.scene.globe.enableLighting = true;
						

						DEMO
					

						3Dモデルを配置できます
						
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
	Cesium.Cartesian3.fromDegrees(141.024902, 42.359777, 0.0)
);
var model = scene.primitives.add(
	Cesium.Model.fromGltf({
		url : './CesiumMilkTruck.gltf',
		modelMatrix : modelMatrix,
		scale : 200.0
	})
);
						

						DEMO
					

						DEMOをチェックしてみてください
						http://cesiumjs.org/demos.html
						

					
OSGeo.JP

						

						OSGeo財団（The Open Source Geospatial Foundation）は、高品質のオープンソース地理空間ソフトウェアの支援と構築のために設立されました。
						この財団の目的は、コミュニティーが先導し て、オープンソースプロジェクトの利用と開発を促進することです。OSGeo財団の日本における公式の支部が「OSGeo財団日本支部 （OSGeo.JP）」です。
						

					
OSGeo.JPの活動

						

						大きな活動としては年3回カンファレンスを開催しています
						間近だと大阪で11/21(土)
						

						

						
  • FOSS4G Hokkaido 6-7月頃
    • 
						
  • FOSS4G Tokyo 11月頃
    • 
						
  • FOSS4G Osaka 11月頃
    • 
						

					

					地理空間情報面白そうと思った方は手にとってみてください
					今日扱わなかった、面倒くさいところのお話になります
					

				


		






















































































































1





					一味違う地図をサイトに載せよう