Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Open Street Map
安裝指引
Ubuntu 12.04 LTS
Marc Huang
marchuang41@gmail.com
OSM 元件概觀
http://wiki.openstreetmap.org/wiki/Component_overview
架設地圖
系統需求
• 作業系統
• Ubuntu 12.04 or 13.04
• 處理器
• min: dual-core processor
• max: quad-core processor
• 硬碟/儲存
• min:10-20GB
• ma...
使⽤用⼯工具
• Apache
• 前端伺服器,處理瀏覽器的請求跟傳送請求給mod_tile
• mod_tile
• 確認請求的tile是否已經產⽣生可使⽤用的檔案,沒有或是tile過期,就
要重新render
• Mapnik
• ⼀一個地...
軟體安裝
• OSM tile server有五個主要原件: mod_tile,
renderd, mapnik, osm2pgsql和⼀一個postgresql/
postgis 資料庫
• 在安裝這些元件前,有些相關的軟體要先裝好
$ su...
安裝postgresql/postgis
• 在ubuntu postgis跟postgresql都有安裝包
$ sudo apt-get install postgresql-9.1-postgis postgresql-contrib
po...
設⾄至PostGIS 到postgresql 資料庫
• 設定存取資料的權限給 PostGIS,記得把
<username> 替換成⾃自⼰己的使⽤用者名稱
$ psql -f /usr/share/postgresql/9.1/contrib/...
安裝 osm2pgsql
• 雖然資料夾裡可能會有osm2pgsql的安裝
包,單是我們還是下載新版的資料重新
編譯⽐比較好
$ mkdir ~/src
$ cd ~/src
$ git clone git://github.com/opens...
安裝 Mapnik library
• Mapnik負責把OpenStreetMap資料render
成tile來提供給web map使⽤用
$ cd ~/src
$ git clone git://github.com/mapnik/mapn...
安裝 mod_tile跟renderd
• 編譯mod_tile
$ cd ~/src
$ git clone git://github.com/openstreetmap/mod_tile.git
$ cd mod_tile
$ ./auto...
安裝 Mapnik style-sheet
• 接下來要安裝OpenStreetMap Mapnik ⼯工具,裡⾯面
有預設的style-sheet跟讓Mapnik正確render的⼯工具
• 在0-9的地圖等級Mapnik會直接存取電腦中的的...
軟體設置
• 現在軟體都安裝完成了,接下來要做⼀一
些設定tile server才能正常運作
設置 mapnik style-sheet
• 為了讓 mapnik 跟 postGIS 資料庫和前⾯面提到
的實體檔案能正確執⾏行,要修改⼀一些style-
sheet
• 在style-sheet 資料夾中有個inc資料夾,有幾
個檔案要做...
settings.xml.inc
<!ENTITY symbols "%(symbols)s">
<!ENTITY osm2pgsql_projection "&srs%(epsg)s;">
<!ENTITY dwithin_node_way ...
datasource-settings.xml.inc
• 這個檔案記錄資料庫的基本資訊
• 如果rendering跟資料庫在同⼀一台機器上,可
以直接把 “password”,“host” and “port” 註解
掉(HTML的註解⽅方法...
• 設定“dbname”,把 “%(dbname)s” 改
成“gis”,“estimate_extent”設
為“false”,“extent”設為
“-20037508,-19929239,20037508,19929239”
<Param...
fontset-settings.xml.inc
• 這個檔案設定預設的⽂文字字型資訊
• 強烈建議把預設字體設為unifont,不然
中⽂文、⽇日⽂文等語⾔言的⽂文字會顯⽰示不了
<FontSet name=”book-fonts”>
<!-...
設置 renderd
• 編輯 /usr/local/etc/renderd.conf 來設置
renderd(記得<username> 要改成⾃自⼰己的)
socketname=/var/run/renderd/renderd.sock
pl...
設置 mod_tile
• 接下來要建⽴立⼀一個⽂文件來告訴Apache
mod_tile的設置
• 新建的⽂文件是空⽩白的,在裡⾯面加上這⾏行即可
LoadModule tile_module /usr/lib/apache2/modules...
Apache基本設置
• Apache的基本設置⽂文件中要加⼊入mod_tile的相關設置資
訊
• 把以下幾⾏行加在admin e-mail address這⾏行之後
• (這⾏行看起來像:ServerAdmin webmaster@loca...
調整 postgresql
• 編輯 /etc/postgresql/9.1/main/
postgresql.conf
shared_buffers = 128MB
checkpoint_segments = 20
maintenance_w...
下載地圖資料
• 下載最新的OpenStreetMap資料
• 整個地球的資料 planet.openstreetmap.org
• 國家/省 download.geofabrik.de
• 城市 metro.teczno.com
$ mkdi...
匯⼊入資料庫
• 轉換⼯工具跟資料庫都準備好以後,接下來要
把剛剛下載的OpenStreetMap資料存⼊入資料庫
中
• 這個步驟會⽤用到⼤大量的I/O存取,所以有可能
會花上⼀一段時間甚⾄至⼀一個禮拜,要看匯⼊入資
料量(完整地圖或某個國家...
啓動 tileserver
• 現在所有安裝跟設定都完成,可以啓動
tileserver了
• 我們先在terminal的互動模式確認是否設置都正
常
$ sudo mkdir /var/run/renderd
$ sudo chown use...
• 如果有 FATAL errors出現,你可能要再去確認前⾯面的安裝跟設
定步驟
• 如果都沒有錯誤出現,開啓瀏覽器前往 http://yourserveraddress/
osm_tiles/0/0/0.png 應該會看到⼀一張⼩小的世界地...
• 接下來就能⽤用以下指令啓動mapnik
• 停⽌止mapnik
• ⽇日誌記錄現在都寫在 /var/log/syslog裡
• 接下來把renderd設定成開機啓動
sudo /etc/init.d/renderd start
sudo /...
Pre-render tiles
• 你可以使⽤用render_list預先render tiles
Usage: render_list [OPTION] ...
-a, --all render all tiles in given zoo...
Pre-render 範例
• 如果我要預先render地圖等級0-5的tiles
• 注意socket要設置為: --socket=/var/run/
renderd/renderd.sock
$ sudo render_list -a -f...
更新 OSM 資料跟Tiles
• ⾸首先從前⾯面提到的網址下載最新的OSM資料
• 接下來⽤用osm2pgsql的append mode把資料轉⼊入資料庫
• 最後移除過期tiles並重新啓動renderd
$ cd ~/planet
$ w...
客制化的地圖
• 你可以修改osm.xml來客制化地圖,例如增加當
地的特徵坐標,修改道路、⽂文字顏⾊色等等
• 找不到osm.xml檔案,可以到 /usr/local/etc/
renderd.conf看路徑位置
• 在範例中我修改 back...
使⽤用 tile
• 我使⽤用Leaflet作為範例
• 先在/var/www/底下建⽴立網⾴頁資料夾(我命名為osm)
• 然後在http://leafletjs.com下載Leaflet的檔案
• 接下來編輯index.html (你可以複製下⼀...
使⽤用Tile:範例碼
<html>
<head>
<title>My first osm</title>
<link rel=”stylesheet” type=”text/css” href=”leaflet.css”/>
<script ...
參考
• switch2osm.org
• wiki.openstreetmap.org
• leafletjs.com
感謝您
<Marc Huang> marchuang41@gmail.com
Upcoming SlideShare
Loading in …5
×

Open Street Map安裝指引 (Ubuntu 12.04)

1,916 views

Published on

參考:
switch2osm.org
wiki.openstreetmap.org
leafletjs.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Open Street Map安裝指引 (Ubuntu 12.04)

  1. 1. Open Street Map 安裝指引 Ubuntu 12.04 LTS Marc Huang marchuang41@gmail.com
  2. 2. OSM 元件概觀 http://wiki.openstreetmap.org/wiki/Component_overview
  3. 3. 架設地圖
  4. 4. 系統需求 • 作業系統 • Ubuntu 12.04 or 13.04 • 處理器 • min: dual-core processor • max: quad-core processor • 硬碟/儲存 • min:10-20GB • max: 300GB+ • 記憶體 • min: 4GB • max:24GB
  5. 5. 使⽤用⼯工具 • Apache • 前端伺服器,處理瀏覽器的請求跟傳送請求給mod_tile • mod_tile • 確認請求的tile是否已經產⽣生可使⽤用的檔案,沒有或是tile過期,就 要重新render • Mapnik • ⼀一個地圖rendering的開源⼯工具,⽤用來產⽣生Slippy Map • PostgreSQL/postGIS • ⽤用來儲存OpenStreetMap資料得資料庫 • osm2pgsql • 把OpenStreetMap資料轉換⾄至PostgreSQL資料庫的⼯工具
  6. 6. 軟體安裝 • OSM tile server有五個主要原件: mod_tile, renderd, mapnik, osm2pgsql和⼀一個postgresql/ postgis 資料庫 • 在安裝這些元件前,有些相關的軟體要先裝好 $ sudo apt-get install subversion git-core tar unzip wget bzip2 build-essential autoconf libtool libxml2-dev libgeos-dev libpq- dev libbz2-dev proj munin-node munin libprotobuf-c0-dev protobuf-c-compiler libfreetype6-dev libpng12-dev libtiff4-dev libicu-dev libboost-all-dev libgdal-dev libcairo-dev libcairomm-1.0-dev apache2 apache2-dev libagg-dev liblua5.2-dev ttf-unifont
  7. 7. 安裝postgresql/postgis • 在ubuntu postgis跟postgresql都有安裝包 $ sudo apt-get install postgresql-9.1-postgis postgresql-contrib postgresql-server-dev-9.1 • 建⽴立⼀一個 postgis 資料庫 • 把 <username>替換成⾃自⼰己的使⽤用者名稱, 如:$ createuser marc $ sudo -u postgres -i $ createuser <username> # answer yes for superuser (although this isn't strictly necessary) $ createdb -E UTF8 -O <username> gis $ exit
  8. 8. 設⾄至PostGIS 到postgresql 資料庫 • 設定存取資料的權限給 PostGIS,記得把 <username> 替換成⾃自⼰己的使⽤用者名稱 $ psql -f /usr/share/postgresql/9.1/contrib/postgis-1.5/ postgis.sql -d gis 在這步驟會看到類似以下的結果: ... CREATE FUNCTION COMMIT ... DROP FUNCTION $ psql -d gis -c "ALTER TABLE geometry_columns OWNER TO <username>; ALTER TABLE spatial_ref_sys OWNER TO <username>;"
  9. 9. 安裝 osm2pgsql • 雖然資料夾裡可能會有osm2pgsql的安裝 包,單是我們還是下載新版的資料重新 編譯⽐比較好 $ mkdir ~/src $ cd ~/src $ git clone git://github.com/openstreetmap/osm2pgsql.git $ cd osm2pgsql $ ./autogen.sh $ ./configure $ make $ sudo make install $ psql -f /usr/local/share/osm2pgsql/900913.sql -d gis
  10. 10. 安裝 Mapnik library • Mapnik負責把OpenStreetMap資料render 成tile來提供給web map使⽤用 $ cd ~/src $ git clone git://github.com/mapnik/mapnik $ cd mapnik $ git branch 2.0 origin/2.0.x $ git checkout 2.0 $ python scons/scons.py configure INPUT_PLUGINS=all OPTIMIZATION=3 SYSTEM_FONTS=/usr/share/fonts/truetype/ $ python scons/scons.py #takes time $ sudo python scons/scons.py install $ sudo ldconfig • 檢查Mapnik是否安裝成功 $ python $ >>> import mapnik $ >>>
  11. 11. 安裝 mod_tile跟renderd • 編譯mod_tile $ cd ~/src $ git clone git://github.com/openstreetmap/mod_tile.git $ cd mod_tile $ ./autogen.sh $ ./configure $ make $ sudo make install $ sudo make install-mod_tile $ sudo ldconfig
  12. 12. 安裝 Mapnik style-sheet • 接下來要安裝OpenStreetMap Mapnik ⼯工具,裡⾯面 有預設的style-sheet跟讓Mapnik正確render的⼯工具 • 在0-9的地圖等級Mapnik會直接存取電腦中的的 檔案,⽽而10-18則會從資料庫取出後再做render • 下載這些檔案⼤大約需要400MB的空間 $ cd ~/src $ svn co http://svn.openstreetmap.org/applications/ rendering/mapnik mapnik-style $ cd ~/src/mapnik-style $ sudo ./get-coastlines.sh /usr/local/share
  13. 13. 軟體設置 • 現在軟體都安裝完成了,接下來要做⼀一 些設定tile server才能正常運作
  14. 14. 設置 mapnik style-sheet • 為了讓 mapnik 跟 postGIS 資料庫和前⾯面提到 的實體檔案能正確執⾏行,要修改⼀一些style- sheet • 在style-sheet 資料夾中有個inc資料夾,有幾 個檔案要做些調整 $ cd ~/src/mapnik-style/inc $ cp fontset-settings.xml.inc.template fontset- settings.xml.inc $ cp datasource-settings.xml.inc.template datasource- settings.xml.inc $ cp settings.xml.inc.template settings.xml.inc • 接下來要對這些inc檔案做些修改 • 選擇⼀一個編輯器 (vi, vim, and nano) 來修改
  15. 15. settings.xml.inc <!ENTITY symbols "%(symbols)s"> <!ENTITY osm2pgsql_projection "&srs%(epsg)s;"> <!ENTITY dwithin_node_way "&dwithin_%(epsg)s;"> <!ENTITY world_boundaries "%(world_boundaries)s"> <!ENTITY prefix "%(prefix)s"> <!ENTITY symbols "symbols"> <!ENTITY osm2pgsql_projection "&srs900913;"> <!ENTITY dwithin_node_way "&dwithin_900913;"> <!ENTITY world_boundaries "/usr/local/share/world_boundaries"> <!ENTITY prefix "planet_osm"> 把以下幾⾏行 取代成
  16. 16. datasource-settings.xml.inc • 這個檔案記錄資料庫的基本資訊 • 如果rendering跟資料庫在同⼀一台機器上,可 以直接把 “password”,“host” and “port” 註解 掉(HTML的註解⽅方法) • 這樣mapnik就會默認主機的使⽤用者帳號為管 理者帳號 <!-- Settings for your postgres setup. Note: feel free to leave password, host, port, or use blank --> <Parameter name="type">postgis</Parameter> <!-- <Parameter name="password">%(password)s</Parameter> --> <!-- <Parameter name="host">%(host)s</Parameter> --> <!-- <Parameter name="port">%(port)s</Parameter> --> <!-- <Parameter name="user">%(user)s</Parameter> -->
  17. 17. • 設定“dbname”,把 “%(dbname)s” 改 成“gis”,“estimate_extent”設 為“false”,“extent”設為 “-20037508,-19929239,20037508,19929239” <Parameter name="dbname">gis</Parameter> <!-- this should be 'false' if you are manually providing the 'extent' --> <Parameter name="estimate_extent">false</Parameter> <!-- manually provided extent in epsg 900913 for whole globe --> <!-- providing this speeds up Mapnik database queries --> <Parameter name="extent">-20037508,-19929239,20037508,19929239</ Parameter>
  18. 18. fontset-settings.xml.inc • 這個檔案設定預設的⽂文字字型資訊 • 強烈建議把預設字體設為unifont,不然 中⽂文、⽇日⽂文等語⾔言的⽂文字會顯⽰示不了 <FontSet name=”book-fonts”> <!-- <Font face-name=”DejaVu Sans Book” /> --> <Font face-name=”unifont Medium” /> </FontSet> <FontSet name=”bold-fonts”> <!-- <Font face-name=”DejaVu Sans Book” /> --> <Font face-name=”unifont Medium” /> </FontSet> <FontSet name=”oblique-fonts”> <!-- <Font face-name=”DejaVu Sans Book” /> --> <Font face-name=”unifont Medium” /> </FontSet>
  19. 19. 設置 renderd • 編輯 /usr/local/etc/renderd.conf 來設置 renderd(記得<username> 要改成⾃自⼰己的) socketname=/var/run/renderd/renderd.sock plugins_dir=/usr/local/lib/mapnik/input font_dir=/usr/share/fonts/truetype/unifont XML=/home/<username>/src/mapnik-style/osm.xml HOST=localhost • 建⽴立mod_tile執⾏行時需要的檔案資料夾(記得 <username> 要改成⾃自⼰己的) sudo mkdir /var/run/renderd sudo chown <username> /var/run/renderd sudo mkdir /var/lib/mod_tile sudo chown <username> /var/lib/mod_tile
  20. 20. 設置 mod_tile • 接下來要建⽴立⼀一個⽂文件來告訴Apache mod_tile的設置 • 新建的⽂文件是空⽩白的,在裡⾯面加上這⾏行即可 LoadModule tile_module /usr/lib/apache2/modules/mod_tile.so $ sudo touch /etc/apache2/conf.d/mod_tile $ sudo vim /etc/apache2/conf.d/mod_tile #I use vim
  21. 21. Apache基本設置 • Apache的基本設置⽂文件中要加⼊入mod_tile的相關設置資 訊 • 把以下幾⾏行加在admin e-mail address這⾏行之後 • (這⾏行看起來像:ServerAdmin webmaster@localhost) LoadTileConfigFile /usr/local/etc/renderd.conf ModTileRenderdSocketName /var/run/renderd/renderd.sock # Timeout before giving up for a tile to be rendered ModTileRequestTimeout 0 # Timeout before giving up for a tile to be rendered that is otherwise missing ModTileMissingRequestTimeout 30 $ sudo vim /etc/apache2/sites-available/default
  22. 22. 調整 postgresql • 編輯 /etc/postgresql/9.1/main/ postgresql.conf shared_buffers = 128MB checkpoint_segments = 20 maintenance_work_mem = 256MB autovacuum = off • 這些設定需要修改kernel設定,在每次啓 動後才能正常執⾏行 • 編輯 /etc/sysctl.conf 然後加⼊入以下幾⾏行, 最後把電腦重開 # Increase kernel shared memory segments - needed for large databases kernel.shmmax=268435456
  23. 23. 下載地圖資料 • 下載最新的OpenStreetMap資料 • 整個地球的資料 planet.openstreetmap.org • 國家/省 download.geofabrik.de • 城市 metro.teczno.com $ mkdir ~/planet $ cd ~/planet $ wget http://planet.openstreetmap.org/pbf/planet- latest.osm.pbf
  24. 24. 匯⼊入資料庫 • 轉換⼯工具跟資料庫都準備好以後,接下來要 把剛剛下載的OpenStreetMap資料存⼊入資料庫 中 • 這個步驟會⽤用到⼤大量的I/O存取,所以有可能 會花上⼀一段時間甚⾄至⼀一個禮拜,要看匯⼊入資 料量(完整地圖或某個國家)跟電腦的配置 • 依照不同的記憶體⼤大⼩小和匯⼊入資料量,你可 以修改 -C 的值單位是mb $ osm2pgsql --slim -d gis -C 16000 --number-processes 3 ~/ planet/planet-latest.osm.pbf
  25. 25. 啓動 tileserver • 現在所有安裝跟設定都完成,可以啓動 tileserver了 • 我們先在terminal的互動模式確認是否設置都正 常 $ sudo mkdir /var/run/renderd $ sudo chown username /var/run/renderd $ renderd -f -c /usr/local/etc/renderd.conf • 然後在另外⼀一個terminal視窗輸⼊入 $ sudo /etc/init.d/apache2 restart
  26. 26. • 如果有 FATAL errors出現,你可能要再去確認前⾯面的安裝跟設 定步驟 • 如果都沒有錯誤出現,開啓瀏覽器前往 http://yourserveraddress/ osm_tiles/0/0/0.png 應該會看到⼀一張⼩小的世界地圖 • 這個map tile是⼀一個儲存在 /var/lib/mod_tile/default/ 裡的 metatiles檔案 • 如果沒有問題,可以停⽌止(ctrl+c)互動模式 ,接下來要設定成⾃自動rendering,還有開機就啓動 $ sudo cp  ~/src/mod_tile/debian/renderd.init /etc/init.d/ renderd $ sudo chmod u+x /etc/init.d/renderd • ⽤用root權限編輯 /etc/init.d/renderd 並修改 DAEMON 跟 DAEMON_ARGS 這幾⾏行 DAEMON=/usr/local/bin/$NAME DAEMON_ARGS="-c /usr/local/etc/renderd.conf" RUNASUSER=www-data #replace www-data to your user’s name
  27. 27. • 接下來就能⽤用以下指令啓動mapnik • 停⽌止mapnik • ⽇日誌記錄現在都寫在 /var/log/syslog裡 • 接下來把renderd設定成開機啓動 sudo /etc/init.d/renderd start sudo /etc/init.d/renderd stop sudo ln -s /etc/init.d/renderd /etc/rc2.d/S20renderd • 然後重開電腦,瀏覽 http:// yourserveraddress/osm_tiles/0/0/0.png 應該 所有設定都完成了,tile server架設完成
  28. 28. Pre-render tiles • 你可以使⽤用render_list預先render tiles Usage: render_list [OPTION] ... -a, --all render all tiles in given zoom level range instead of reading from STDIN -f, --force render tiles even if they seem current -m, --map=MAP render tiles in this map (defaults to 'default') -l, --max-load=LOAD sleep if load is this high (defaults to 5) -s, --socket=SOCKET unix domain socket name for contacting renderd -n, --num-threads=N the number of parallel request threads (default 1) -t, --tile-dir tile cache directory (defaults to '/var/lib/mod_tile') -z, --min-zoom=ZOOM filter input to only render tiles greater or equal to this zoom level (default is 0)  -Z, --max-zoom=ZOOM filter input to only render tiles less than or equal to this zoom level (default is 18) • 如果⽤用-a後⾯面可以指定範圍 • 在http://tools.geofabrik.de/map/可以查詢地圖對應的坐標 範圍 -x, --min-x=X minimum X tile coordinate -X, --max-x=X maximum X tile coordinate -y, --min-y=Y minimum Y tile coordinate -Y, --max-y=Y maximum Y tile coordinate
  29. 29. Pre-render 範例 • 如果我要預先render地圖等級0-5的tiles • 注意socket要設置為: --socket=/var/run/ renderd/renderd.sock $ sudo render_list -a -f -z 0 -Z 5 --socket=/var/run/ renderd/renderd.sock • 或是我想render地圖等級7的台灣地圖 $ sudo render_list -a -f -z 7 -Z 7 x 106 X 107 y 54 Y 56 --socket=/var/run/renderd/renderd.sock
  30. 30. 更新 OSM 資料跟Tiles • ⾸首先從前⾯面提到的網址下載最新的OSM資料 • 接下來⽤用osm2pgsql的append mode把資料轉⼊入資料庫 • 最後移除過期tiles並重新啓動renderd $ cd ~/planet $ wget http://planet.openstreetmap.org/pbf/planet- latest.osm.pbf #make sure you have deleted the old one $ osm2pgsql --slim -a -d gis -C 16000 --number- processes 3 ~/planet/planet-latest.osm.pbf $ sudo rm -R /var/lib/mod_tile/default/ $ sudo /etc/init.d/renderd restart
  31. 31. 客制化的地圖 • 你可以修改osm.xml來客制化地圖,例如增加當 地的特徵坐標,修改道路、⽂文字顏⾊色等等 • 找不到osm.xml檔案,可以到 /usr/local/etc/ renderd.conf看路徑位置 • 在範例中我修改 background-color,原本 是“#b5d0d0” 我改成 “#ff0000” (紅⾊色) $ sudo vim ~/src/mapnik-style/osm.xml # in editor ... <Map background-color=”#ff0000” src... ... $ sudo /etc/init.d/renderd restart $ sudo render_list -a -z 0 -Z 0 --socket=/var/run/ renderd/renderd.sock • 現在瀏覽 http://yourserveraddress/osm_tiles/0/0/0.png 海 洋應該會變成紅⾊色的
  32. 32. 使⽤用 tile • 我使⽤用Leaflet作為範例 • 先在/var/www/底下建⽴立網⾴頁資料夾(我命名為osm) • 然後在http://leafletjs.com下載Leaflet的檔案 • 接下來編輯index.html (你可以複製下⼀一⾴頁的範例碼) • 最後瀏覽 http://yourserveraddress/osm/ $ sudo mkdir /var/www/osm $ cd /var/www/osm $ sudo wget http://leaflet-cdn.s3.amazonaws.com/build/ leaflet-0.6.4.zip $ sudo unzip leaflet-0.6.4.zip $ sudo touch index.html $ sudo vim index.html #see sample code in next slide
  33. 33. 使⽤用Tile:範例碼 <html> <head> <title>My first osm</title> <link rel=”stylesheet” type=”text/css” href=”leaflet.css”/> <script type=”text/javascript” src=”leaflet.js”></script> <style> #map{width:100%;height:100%} </style> </head> <body> <div id=”map”></div> <script> var map = L.map(‘map’).setView([25.555,121.899],7); L.tileLayer(‘http://yourserveraddress/osm_tiles/{z}/{x}/{y}.png’, {maxZoom:18}).addTo(map); </script> </body> </html>
  34. 34. 參考 • switch2osm.org • wiki.openstreetmap.org • leafletjs.com
  35. 35. 感謝您 <Marc Huang> marchuang41@gmail.com

×