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,627 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,627
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×