foss4g2012 mapguide hands-on

Hands-on Introduction to MapGuide Open Source

原案： Gordon Luckett翻訳：井上　修

日本版編集：林　博文

MapGuide の歴史• 1995 Argus Technologies

– Calgary, Alberta, Canada• 1996 Autodesk, Inc.

–Calgary にて引き続き開発 • 2002 MapGuide 6.5 reaches ActiveX/Java/Plug-in によるカスタマイズの

限界に達する• 2004 Autodesk, Inc. が MapGuide Open Source 開発をスタート• 2004 Autodesk AutoCAD Map に、 FDO （ Feature Data Objects)for

Oracle, SDF, ArcSDE を搭載• 2006 MapGuide のソースコードを OSGeo に提供 (GNU LGPL)• 2006 FDO Open Source を同時に提供

Note: Autodesk の Map 3D, Autodesk Infrastructure Map Server, MapGuide Enterprise, Studio, Topobase は、すべて FDO Open Source Platform をベースに開発

Web 2.0 web mapping

• Web 1.0 – first-generation web mapping– Web 1.0 ＝配信（ publishing 　）– MapGuide6.x, MapServer, ArcIMS, …

• Web 2.0 – next-generation web mapping– Web 2.0 ＝　協調（ participation 　）– コラボレーションの例 : Google Maps, OpenLayers– MapGuide Open Source/FDO 　には、

• Web ベースの空間編集 API• 協調するためのツールとして設計

幅広いプラットフォームサポート

Microsoft Windows

Linux

Apache Web

ServerMicrosoft

IIS

対応 OS

対応 Web サーバ

開発環境

対応ブラウザ

Internet Explorer

Mozilla Firefox

Apple Safari

GoogleChrome

MapGuide システム構成

ServicesRendering KML Mapping

Tile Feature Drawing

Resource FDO Site

Databaseサーバ

MapGuideServer

データファイル

データソース

WMS / WFS Web Server + MapGuide Web Server Extensions MapGuide

AJAX Viewer

GoogleEarth

Internet

PHP.NETJava

SERVER TIER WEB TIER CLIENT TIER

システムのコアコンポーネント

Web アプリケーション

シン・クライアント ( ブラウザのみ )

シック・クライアント (PC へインストール )

MapGuideAJAX ViewerMaestro

MapGuide Web Server Extensions についてWeb Server Extensions の種類

• Java (JSP)

• Microsoft ASP.NET

• PHP

MapGuide Web Server Extensions についてJAVA• Linux or Windows• Apache Tomcat が必要

MapGuide Web Server Extensions についてMicrosoft ASP.NET• Microsoft Windows と IIS• C# または VB.NET

MapGuide Web Server Extensions についてPHP• MapGuide Site Administrator 　は、 PHP を利用• Open Source, 構文は Java, Perl, C 言語のミック

ス• 動作環境

– Linux または Windows– IIS または Apache

MapGuide Web Server Extensions について

Install MapGuide Open Source 2.4

MapGuide Server and Web Extensions インストール

• mapguide.osgeo.org よりダウンロード• ハンズオンセットアップ :

• Windows 7 ( ハンズオンは x64 版 )• PHP• Apache Web Server• Port 8008

• Web Extensions と Server service は同一マシンで実行

• Mapguide.osgeo.org よりダウンロード

MapGuide Server and Web Extensions インストール

http://mapguide.osgeo.org/home

• インストールMapGuideOpenSource-2.4.0.7096-Final-x64.exe

MapGuide Server and Web Extensions インストール

MapGuide Server and Web Extensions インストール

• インストール– Bundled Confituration– connection ports:2810-2812– Port Nuumber ： 8008– Servicename:mapguide– Develop Environment:PHP

• インストール– Server IP addresses 127.0.1~ localhost– Destination Folder:

c:\program files\OSGeo\MapGuide\

MapGuide Server and Web Extensions インストール

• インストール– Windows セキュリティで「ブロックを解除す

る」★– マシンの再起動（必要に応じて）

MapGuide Server and Web Extensions インストール

• サービスの起動確認

MapGuide Server and Web Extensions インストール

インストール設定まとめ設定項目 設定値 備考Admin Connection Port 2810 管理ツールのアクセス用

Client Connection Port 2811 ユーザ処理のアクセス用

Site Connection Port 2812

Web Server Port Number 8008

Virtual Directory Name mapguide

Development Environment PHP PHP Version 5.3.2

MapGuide Server IP Address 127.0.0.1

Install Directory C:\Program Files\OSGeo\MapGuide\

ファイアウォールブロック解除 Apache HTTP 　Server

許可のタイプは使用状況に応じて後で変更可能です。

Feature Data Objects - FDOAbout Feature Data Objects - FDO• OSGeo FDO Provider for PostGIS/PostgreSQL• OSGeo FDO Provider for SDF• OSGeo FDO Provider for SHP• OSGeo FDO Provider for WFS• OSGeo FDO Provider for WMS• OSGeo FDO Provider for ODBC• OSGeo FDO Provider for GDAL• OSGeo FDO Provider for OGR• OSGeo FDO Provider for SQL Server Spatial • OSGeo FDO Provider for SQLite• OSGeo FDO Provider for ArcSDE• OSGeo FDO Provider for MySQL

With Autodesk Infrastructure Map Server・ Autodesk FDO Provider for Oracle• Autodesk FDO provider for Raster• Autodesk FDO Provuder for Design

Service(DWG)Third Party• Safe Software FME FDO Providers• Smallworld• SuperMap…

SDF

SHP

ODBC Raster

WMS

WFS

Providers from 3rd Party & Open Source

OGR

Oracle and SQL-Server

MS Access, Excel and

Oracle

25+ vector formats

25+ raster formats

200+ vector and raster formats

15+ raster formats

Pro

vid

ers

su

pp

ort

ing

m

ult

iple

fo

rmats

Pro

vid

ers

su

pport

ing

sin

gle

form

at

AutodeskProducts

3rd Party Solutions

Autodesk Certified Providers

GE EnergySmallworld

SuperMap Informix Dynamic Server KML

Read onlyRead / Write

SQLite MapInfo

ArcGISGeodatabases

Server Configuration• Username: Administrator• Password: admin• http://localhost:8008/mapguide/mapadmin/login.php

Server Configuration• 各種管理メニューの確認

MapGuide Maestro

MapGuide Authoring – Fat ClientAutodesk Infrastructure Studio

• Autodesk, Inc. (Bundle with Autodesk Infrastrucure Map Server)

• Load SDF, SHP, DWF, DWG, DXF, and Raster (georeferenced aka SID,TIF,ECW)

• Create Data Connections(oracle, SQLite, SQL Server, etc)

• Create Layers• Create Maps• Create Basic Web Layouts• Create FUSION Web Layouts

(Flexible) • Google/Yahoo/Bing/OpenStreetMap

maps built-in

MapGuide Maestro

• Open Source• Load SDF and SHP• Create Data Connections

(oracle, SQLite, SQL Server, etc)

• Create Layers• Create Maps• Create Basic Web Layouts• Create FUSION Web Layouts

(Flexible)• Built-In XML Editor• Google/Yahoo/Bing maps built-in

MapGuide Maestro インストール

• MapGuide Maestro のダウンロードとインストール– http://trac.osgeo.org/mapguide/wiki/maestro

MapGuide Maestro インストール

• MapGuide Maestro のダウンロードとインストール– .net Framework4.0 をインストールしてあること– Linux/Mac OS 上では Mono 、 Winforms がインストールさ

れていること。

MapGuide でのデータ公開までの手順

1. データのロードまたはデータ接続2. レイヤ作成3. Map(s) 作成4. レイアウト作成 ( ベーシックまた

は、 FUSION)5. HML 内でレイアウトをラップ

(i.e. シンプルな iFrame で、長い URL を隠蔽 )

MapGuide Maestro SHP ファイル利用SHP ファイル – MapGuide では 2 つの方法で利用1. サーバにファイルをロード

– Desktop から Maestro を使ってファイルをコピー2. データ接続を使ってダイレクトに接続

– MapGuide Administrator を使って Alias( 別名）フォルダ作成– 作成した Alias( 別名）を Maestro で選択

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへの

ロード( レイヤは自動生成 )– MapGuide Server にログオン– Server:

http://localhost:8008/mapguide/mapagent/mapagent.fcgi

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへの

ロード( レイヤは自動生成 )– フォルダの作成　（ Windows の Explore と同

じ）

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへのロード

( レイヤは自動生成 )– SHP ファイルのサーバへのロード– 座標系は Lat/Long カテゴリの

WGS84Datum(LL84)

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへのロード

( レイヤは自動生成 )– ロードされたデータの確認

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへのロード

( レイヤは自動生成 )– ロードされたレイヤの設定と確認（ buildings)

MapGuide Maestro SHP ファイルの利用• フォルダの作成と、 SHP ファイルのサーバへのロード

( レイヤは自動生成 )– ロードされたレイヤの設定と確認（ railways)

MapGuide Maestro Layers

データセットのカラムの値でフィルタ

それぞれのフィーチャにURL リンク

ユーザがオブジェクト上にマウスを移動したときに表示するツール

チップ

MapGuide Maestro Layersスタイル

(Point/Line/Polygon)

主題設定のためのルール縮尺に応じた表示設定

項目や計算式に応じたラベ

ル表示

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング• spain

– 薄い肌色に設定 (RGB, (250, 228, 214))• roads

– 選択時にプロパティを表示

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング– 縮尺による設定と条件による主題設定– Places => Large_Cities 　という名前で保存

• population >=500000 and Population < 1000000

– Symbol Size 5 Black Circle– Labelstyle “name” Size 8

• Population >= 1000000– Symbol Size 10 Red Circle– Labelstyle “name” size 10

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング• Large Cities

MapGuide Maestro Layers

MapGuide Maestro Layers

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング• natural

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング– 主題設定– natural

• Type = forest ：緑• Type = park : 薄緑• Type 　＝　 riverbank ：青• Type = 　 water ：水色

MapGuide Maestro Layers

• MapGuide Maestro でのレイヤオーサリング• waterways

MapGuide Maestro Mapsマップ に含まれるもの • 座標系

( レイヤはマップの座標系に投影）

• 地図の背景色• レイヤへの参照• 凡例へのレイヤの表示有無• レイヤの描画順

MapGuide Maestro Maps

• MapGuide Maestro でマップのオーサリング– マップへのレイヤの追加

MapGuide Maestro Maps

• MapGuide Maestro でマップのオーサリング– レイヤの描画順の変更

MapGuide Maestro Maps

• MapGuide Maestro でマップのオーサリング– レイヤの初期設定

• Large_Cities 、 Spain 以外 => 　 Invisible• roads ＝＞ Selectable

MapGuide Maestro Maps

• MapGuide Maestro でマップのオーサリング• 座標系の設定

– 初期表示の座標と、座標系のセット

MapGuide Maestro Maps

• MapGuide Maestro でマップのオーサリング• マップの保存とプレビュー

– SPAIN_MAP で 4_MAPS に保存し、プレビュー

MapGuide Maestro Basic/Simple Layout

AJAX Viewer を利用したレイアウトの確認

MapGuide Maestro Basic/Simple Layout

• ベーシック Web レイアウトの作成– Web ブラウザのバーに表示する文字列を Spain

Map Layout に、 Map Resource を Spain_Mapを選択し、名前を BACIC_SPAIN_LAYOUT で保存• プレビューで表示

MapGuide Maestro FUSION/Flexible Layout

MapGuide Maestro FUSION/Flexible Layout• FUSION レイアウトの作成

• Map Resource を Spain_Map を選択• テンプレート URL ＝＞Maroon• タイトルを SPAIN 　 FLEXIBLE 　 LAYOUT• 名前を FLEXIBLE_SPAIN_LAYOUT で保存• 一度閉じて開き、プレビューで表示

PHP Development

• MapGuide Server API

パスワードのバイパスを作成する

• MapGuide Requires Username and Password –• User: Anonymous• Password: <nothing>

パスワードのバイパスを作成するBasic Web Layout –URL に追加のみ• http://localhost/mapguide/mapviewerajax/?

WEBLAYOUT=Library%3a%2f%2fSPAIN%2f5_LAYOUTS%2fBASIC_SPAIN_LAYOUT.WebLayout&USERNAME=Anonymous&PASSWORD=

FUSION Web Layout – API でログオンし、 SESSION ID を取得 $configFilePath = "C:\Program Files\OSGeo\MapGuide\Web\www\webconfig.ini"; MgInitializeWebTier ($configFilePath);

$userInfo = new MgUserInformation('Anonymous',''); $siteConnection = new MgSiteConnection(); $siteConnection->Open($userInfo);

$session = $siteConnection->GetSite()->CreateSession();

パスワードのバイパスを作成する• FUSION パスワードのバイパスを作成する

– Hands-On\FOSS4G2010_MAPGUIDEos_DATA\FOSS4G2010_MAPGUIDEos_WEBPAGES\Program Files\OSGeo\MapGuide\Web\www\fusion_viewer.php 　を

– C:\Program Files\OSGeo\MapGuide\Web\wwwにコピー

– http://localhost/mapguide/fusion_viewer.php?APPDEF=Library%3a%2f%2fSPAIN%2f5_LAYOUTS%2fFLEXIBLE_SPAIN_LAYOUT.ApplicationDefinition&TEMPLATE=Maroon にアクセス

Embed URL In iFrame

IFRAME で長い URL を隠蔽

<iframe id=iFrameMap name=iFrameMap src="/mapguide/fusion_viewer.php?APPDEF=Library://SPAIN/5_LAYOUTS/SPAIN_FLEXIBLE_LAYOUT.ApplicationDefinition&TEMPLATE=Maroon"

width="100%" height="100%">

Embed URL In iFrame

IFRAMEHands-On\FOSS4G2010_MAPGUIDEos_DATA\

FOSS4G2010_MAPGUIDEos_WEBPAGES\Program Files\OSGeo\MapGuide\Web\Apache2\htdocs\index.html を

C:\Program Files\OSGeo\MapGuide\Web\Apache2\htdocs にコピー

Embed URL In iFrame

IFRAMEIndex.html の赤字部分は Maestro のプレビューボタンの

となりにあるの URL をコピー<iframe id=iFrameMap name=iFrameMap

src="/mapguide/fusion_viewer.php?APPDEF=Library%3a%2f%2fSPAIN%2f5_LAYOUTS%

2fFLEXIBLE_SPAIN_LAYOUT.ApplicationDefinition&TEMPLATE=Maroon"

width="100%" height="100%">

Attach LAYER TO PHP Report• ハイパーリンクとして PHP レポートにリンク• SHP の ID を Road レイヤから取り出し、ハイパーリンク• それを ACCESS 　 DB の項目と一致しているものを表示• PHP Report example は ODBC を利用してる。

<?php$conn=odbc_connect('spain_roads_odbc','','');

if (!$conn) {exit("Connection Failed: " . $conn);}

$sql="SELECT * FROM Roads where osm_id in(" . stripslashes($_REQUEST["OBJ_KEYS"]) .“) order by NAME ";

$rs=odbc_exec($conn,$sql);

今回は実施しません。

Attach LAYER TO PHP Report• PHP Report

– road_report.php ファイルを C:\Program Files\OSGeo\MapGuide\Web\Apache2\htdocs にコピー

– Maestro で Road レイヤのリンク部分を下記に設定• Concat('/road_report.php?OBJ_KEYS=',

osm_id)– ODBC 設定

• データソース spain_roads_odbc• Sphanish_roads.mdb を選択

今回は実施しません。

Using OpenLayers to put Google Maps behind MapGuide

今回は Maestro を使用します。

Using OpenLayers to put Google Maps behind MapGuideMapGuide の背景として OpenLayer を重ね合わせる手順1. FUSION レイアウトを使用2. GoogleMercator の座標系を取得 3. FUSION テンプレートの Index.htmlページを編集4. 「 openlayers.js 」と「 maps.google.com JavaScript libraries 」を組み込む .(NOTE: Google Maps API KEY が必要 )

5. MAP_LOADED FUSION event を作り、 addGoogleStuff ファンクションを呼ぶ

6. 最後に – FUSION API を使い , Google Streets とベースレイヤとしてG_NORMAL_MAP を追加する。

今回は Maestro を使用します。

Using OpenLayers to put Google Maps behind MapGuideMapGuide の背景として OpenLayer を重ね合わせる手順1. GoogleMercator の座標系を取得１

1. WKT version の 座標系を以下から取得： http://www.spatialreference.org ）

1. Spherical merctor で検索2. SR-ORG4705 Populor Visualisation CRS/Mercaor を選択3. OGC-WKT を取得し、コピーする。

今回は Maestro を使用します。

Using OpenLayers to put Google Maps behind MapGuide

MapGuide の背景として OpenLayer を重ね合わせる手順1. GoogleMercator の座標系を取得２

1. Maestro の Spain_Map から XMLEditor を起動。以下の文字列を置換する。

GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]

PROJCS["Popular Visualisation CRS / Mercator",GEOGCS["Popular Visualisation CRS",DATUM["Popular Visualisation Datum",SPHEROID["Popular Visualisation Sphere",6378137,0,AUTHORITY["EPSG","7059"]],TOWGS84[0,0,0,0,0,0,0],AUTHORITY["EPSG","6055"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9102"]],AXIS[E,EAST],AXIS["N",NORTH],AUTHORITY["EPSG","4055"]],PROJECTION["Mercator_1SP"],PARAMETER["False_Easting",0],PARAMETER["False_Northing",0],PARAMETER["Central_Meridian",0],PARAMETER["Latitude_of_origin",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["East",EAST],AXIS["North",NORTH],AUTHORITY["EPSG","3785"]]

今回は Maestro を使用します。

Using OpenLayers to put Google Maps behind MapGuideMapGuide の背景として OpenLayer を重ね合わせる手順1. FUSION テンプレートの Index.htmlページを編集

1. Hands-On\FOSS4G2010_MAPGUIDEos_DATA\FOSS4G2010_MAPGUIDEos_WEBPAGES\Program Files\OSGeo\MapGuide\Web\www\fusion\templates\mapguide\maroon 　のIndex.html

2. C:\Program Files\OSGeo\MapGuide\Web\www\fusion\templates\mapguide\maroon にコピー

今回は Maestro を使用します。

Using OpenLayers to put Google Maps behind MapGuide• SPAIN_MAP を SPAIN_MAP(1) にコピーする。• SPAIN_MAP(1) の投影系を変更する。　　 WGS84 PseudoMercator を指定する。

Using OpenLayers to put Google Maps behind MapGuide• FLEXIBLE_SPAIN_LAYOUT 　を

FLEXIBLE_SPAIN_LAYOUT （１）にコピー• Map Definition を SPAIN_MAP(1) に変更• GoogleMapsV3 　の Streets等に を入れる。☑

• レイアウトを保存する

Using OpenLayers to put Google Maps behind MapGuide

AJAX VIEWER の日本語化• www/localized/ 　の　「 en 」ファイルを「 ja 」という名前で

コピーする。• 「 ja 」の内容を編集し、英語文字列を日本語文字列に置換える。• license_en.htm を license_ja.htm にコピーする。• PoweredBy_en.gif 　を PoweredBy_ja.gif にコピーする• help/en/* を help/ja/* にコピーする。• help/ja/ の html ファイルを編集し、英語文字列を日本語文字列

に置換える。• www/mapagent/Resources/mapguide_en.res を

mapguide_ja.res にコピーする。• mapguide_ja.res 　の内容を編集し、英語文字列を日本語文字列に置換える。

AJAX VIEWER の日本語化

Fusion の日本語化• www/fusion/text/en を　 ja にコピー

ja の内容を編集し、英語文字列を日本語文字列に置換える。• www/fusion/text/en.json を　 ja.json にコピー。　

ja.json の内容を編集し、英語文字列を日本語文字列に置換える。

• www/fusion/lib/fusionSF.js を編集し、 Fusion.Strings.en = { } の後に ja.json の中身をペーストする。

• fusionSF.js を 「 YUI Compressor 」　で圧縮し、 fusionSF-compressed.js に上書きコピーする。

• www/fusion/widgets/widgetinfo/ の各 xml ファイルの内容を編集し、英語文字列を日本語文字列に置換える。