foss4g2012 mapguide hands-on
DESCRIPTION
FOSS4G Tokyo ハンズオンセッションMapGuide Opensource入門のスライドです。 データセットは https://360.autodesk.com/Public/Details?hash=2be0aa92a5814e0abf3566f6a2294815 からダウンロードできます。TRANSCRIPT
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
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 の座標系を取得2
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 (1)にコピー• 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 ファイルの内容を編集し、英語文字列を日本語文字列に置換える。