Your SlideShare is downloading. ×
0
用用 Drupal 打造打造 GIS 網站網站
Presented by Pomin Wu, 台灣環境資訊協會.
經驗分享與主題經驗分享與主題
1. 其實我不是 GIS 專家。
2. 但是用 Drupal 做個網站還可以。
3. 所以有天某人(我老闆)就跟我說
02
“Make it so.”
台灣海岸守護網台灣海岸守護網
04
實地踏查的監測資訊中心實地踏查的監測資訊中心
05
To explore strange new worlds
06
“Elementary, Dear Data”, TNG 2x03
Geofield is a module for storing geographic data in Drupal 7. It supports
all geo-types ...
關於格式關於格式
• Well-known Text (WKT).
• POINT (121.52861583171 25.043122959287)
• GeoJSON.
•
{"type":"Point","coordinates":[12...
“Put it on the view screen.”
OpenLayers integartes the OpenLayers JavaScript mapping library and is
full of features: maps...
GIS CMS stacks using Drupal
10
“A Matter of Perspective”, TNG 3x14
不論做什麼都要用到 Views。
11
(以下會有一點枯燥。)
“Proceed.”
Geofield
Geofield
安裝
$ drush dl geofield
$ drush en -y geofield_map # dl & en geofield, geoPHP
01.
02.
14
Geofield: Latitude Longitude widget
15
Geofield
Latitude and Longitude widget
• Decimal Degrees (122.340932)
• Degrees-Minutes-Seconds (-123° 49’ 55.2” W)
• 可以配合...
Geofield: HTML5 Geofield widget
17
Geofield
HTML5 Geolocation widget
• 從瀏覽器取得使用者的地理位置。
• ask Google for non-supportive browsers.
18
Geofield
再選個 display… 不過先等一下。
19
OpenLayers
安裝
$ drush dl openlayers views
# dl & en views, ctools, proj4js, libraries, too.
$ drush en -y openlayers_views...
Geofield: OpenLayers Map widget
21
Geofield
Draw on an OpenLayers Map widget
• 直接在地圖上點出位置。
• 可以描點、線、面。
• 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方)
22
Geofield
23
Geofield: OpenLayers Map display
24
Geofield
OpenLayers Map display
• 用地圖呈現這個 node 的位置。
• 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方)
25
Geofield
26
OpenLayers Map
27
OpenLayers Map
28
OpenLayers Map
29
Geofield: set OpenLayers Map center
30
Geofield: OpenLayers Map display
31
Geofield: OpenLayers Map widget
32
OpenLayers
OpenLayers
• 但是我們得從 Views 開始。
34
OpenLayers: add a view.
35
OpenLayers: add location field.
36
OpenLayers: choose WKT format.
37
OpenLayers: check result.
38
OpenLayers: OpenLayers Data Overlay.
39
OpenLayers: change format.
40
OpenLayers: choose the only format.
41
OpenLayers: fill in options.
42
OpenLayers: check result.
43
(記得把剛才的 view 存起來。)
喘口氣喘口氣
OpenLayers
45
OpenLayers Layers
46
OpenLayers Layers: check result
47
OpenLayers Layers: goto map
48
OpenLayers Layers: edit the default map
49
OpenLayers Layers: edit layers and styles
50
OpenLayers Layers: add our layer
51
OpenLayers Layers: check result
52
OpenLayers Layers: check result
53
OpenLayers Layers: edit behaviors
54
OpenLayers Layers: add pop up
55
OpenLayers Layers: check result
56
OpenLayers Layers: set map center
57
(記得把剛才的 openlayer map 存起來。)
喘口氣喘口氣
OpenLayers: show the map in a page
• 可以用 Panels.
• 也可以用 Views.
59
OpenLayers: show with a view
60
OpenLayers: show with a view
61
相當麻煩相當麻煩
Why?
1. Defaults do not work very well.
2. The whole Views -> OpenLayers -> Views process is confusing.
3. OpenLayers adds...
Leaflet
Leaflet
安裝
$ drush dl leaflet
$ drush en -y leaflet_views # dl & en leaflet, entity
Download Leaflet library, extract and ...
Geofield: Leaflet display
66
Geofield: Leaflet display
67
Leaflet Map
• 仍然要從 Views 開始。
68
Leaflet: create a view page
69
Leaflet: choose Leaflet Map format
70
Leaflet: add location field
71
Leaflet: choose WKT format
72
Leaflet: set page style
73
Leaflet: check result
74
Leaflet: check result
75
Why?
1. Leaflet has nice defaults.
2. Just render a view (a list of query result) as a map.
• Intuitive (at least for Drup...
那就自己做一那就自己做一
個個 Drupical 吧吧
Search and filter
• Leaflet Map 只是一個 view page。
• 所以 Views 的功能都可以用。
• 可以加 filter,可以 expose form。
• 可以對文字欄位搜尋,可以開 Ajax。
79
Search and filter
80
Search and filter
81
Search and filter
82
Search and filter
83
Search and filter
84
Search and filter
85
Search and filter
• 這比 OpenLayers 的圖層好用!
• 而且可以對文字欄位搜尋。
86
修改修改 OpenLayers
• OpenLayers Javascript Library 其實還有很多功能沒有整合進 Drupal。
• http://openlayers.org/dev/examples/ 有一大堆範例程式,in Ja...
修改修改 OpenLayers
88
修改修改 OpenLayers
89
修改修改 OpenLayers
90
PostGIS
Cartaro, Geospatial CMS based on Drupal
92
Architecture
93
以上以上
參考資源參考資源
• Geofield、PostGIS、OpenLayers、Leaflet、GeoServer 等等 Drupal 模組
都在 Drupal.org。
• Drupical http://drupical.org/
• Car...
聯絡方式聯絡方式
• Pomin Wu http://twitter.com/pm5
• 台灣環境資訊協會 http://www.e-info.org.tw/
96
用 Drupal 打造 GIS 網站
Upcoming SlideShare
Loading in...5
×

用 Drupal 打造 GIS 網站

2,043

Published on

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

No Downloads
Views
Total Views
2,043
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "用 Drupal 打造 GIS 網站"

  1. 1. 用用 Drupal 打造打造 GIS 網站網站 Presented by Pomin Wu, 台灣環境資訊協會.
  2. 2. 經驗分享與主題經驗分享與主題 1. 其實我不是 GIS 專家。 2. 但是用 Drupal 做個網站還可以。 3. 所以有天某人(我老闆)就跟我說 02
  3. 3. “Make it so.”
  4. 4. 台灣海岸守護網台灣海岸守護網 04
  5. 5. 實地踏查的監測資訊中心實地踏查的監測資訊中心 05
  6. 6. To explore strange new worlds 06
  7. 7. “Elementary, Dear Data”, TNG 2x03 Geofield is a module for storing geographic data in Drupal 7. It supports all geo-types (points, lines, polygons, multitypes etc.) PostGIS provides a field for geospatial data that can be added to entities. To the end user this module is similar to the Geofield module, but spatial operations and data storage rely on PostGIS. 07
  8. 8. 關於格式關於格式 • Well-known Text (WKT). • POINT (121.52861583171 25.043122959287) • GeoJSON. • {"type":"Point","coordinates":[121.52861583171,25.0431229 • Latitude and Longitude (經緯度) • 25.043123 121.528616 08
  9. 9. “Put it on the view screen.” OpenLayers integartes the OpenLayers JavaScript mapping library and is full of features: maps, styles, layers, behaviors, and projections. Leaflet integrates the Leaflet JavaScript mapping library. 09
  10. 10. GIS CMS stacks using Drupal 10
  11. 11. “A Matter of Perspective”, TNG 3x14 不論做什麼都要用到 Views。 11
  12. 12. (以下會有一點枯燥。) “Proceed.”
  13. 13. Geofield
  14. 14. Geofield 安裝 $ drush dl geofield $ drush en -y geofield_map # dl & en geofield, geoPHP 01. 02. 14
  15. 15. Geofield: Latitude Longitude widget 15
  16. 16. Geofield Latitude and Longitude widget • Decimal Degrees (122.340932) • Degrees-Minutes-Seconds (-123° 49’ 55.2” W) • 可以配合 Feeds 批次匯入經緯度資料。 16
  17. 17. Geofield: HTML5 Geofield widget 17
  18. 18. Geofield HTML5 Geolocation widget • 從瀏覽器取得使用者的地理位置。 • ask Google for non-supportive browsers. 18
  19. 19. Geofield 再選個 display… 不過先等一下。 19
  20. 20. OpenLayers 安裝 $ drush dl openlayers views # dl & en views, ctools, proj4js, libraries, too. $ drush en -y openlayers_views openlayers_ui views_ui 01. 02. 03. 20
  21. 21. Geofield: OpenLayers Map widget 21
  22. 22. Geofield Draw on an OpenLayers Map widget • 直接在地圖上點出位置。 • 可以描點、線、面。 • 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方) 22
  23. 23. Geofield 23
  24. 24. Geofield: OpenLayers Map display 24
  25. 25. Geofield OpenLayers Map display • 用地圖呈現這個 node 的位置。 • 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方) 25
  26. 26. Geofield 26
  27. 27. OpenLayers Map 27
  28. 28. OpenLayers Map 28
  29. 29. OpenLayers Map 29
  30. 30. Geofield: set OpenLayers Map center 30
  31. 31. Geofield: OpenLayers Map display 31
  32. 32. Geofield: OpenLayers Map widget 32
  33. 33. OpenLayers
  34. 34. OpenLayers • 但是我們得從 Views 開始。 34
  35. 35. OpenLayers: add a view. 35
  36. 36. OpenLayers: add location field. 36
  37. 37. OpenLayers: choose WKT format. 37
  38. 38. OpenLayers: check result. 38
  39. 39. OpenLayers: OpenLayers Data Overlay. 39
  40. 40. OpenLayers: change format. 40
  41. 41. OpenLayers: choose the only format. 41
  42. 42. OpenLayers: fill in options. 42
  43. 43. OpenLayers: check result. 43
  44. 44. (記得把剛才的 view 存起來。) 喘口氣喘口氣
  45. 45. OpenLayers 45
  46. 46. OpenLayers Layers 46
  47. 47. OpenLayers Layers: check result 47
  48. 48. OpenLayers Layers: goto map 48
  49. 49. OpenLayers Layers: edit the default map 49
  50. 50. OpenLayers Layers: edit layers and styles 50
  51. 51. OpenLayers Layers: add our layer 51
  52. 52. OpenLayers Layers: check result 52
  53. 53. OpenLayers Layers: check result 53
  54. 54. OpenLayers Layers: edit behaviors 54
  55. 55. OpenLayers Layers: add pop up 55
  56. 56. OpenLayers Layers: check result 56
  57. 57. OpenLayers Layers: set map center 57
  58. 58. (記得把剛才的 openlayer map 存起來。) 喘口氣喘口氣
  59. 59. OpenLayers: show the map in a page • 可以用 Panels. • 也可以用 Views. 59
  60. 60. OpenLayers: show with a view 60
  61. 61. OpenLayers: show with a view 61
  62. 62. 相當麻煩相當麻煩
  63. 63. Why? 1. Defaults do not work very well. 2. The whole Views -> OpenLayers -> Views process is confusing. 3. OpenLayers adds another level of abstraction. • Does not fit into the Views-centric workflow of Drupal very well. 63
  64. 64. Leaflet
  65. 65. Leaflet 安裝 $ drush dl leaflet $ drush en -y leaflet_views # dl & en leaflet, entity Download Leaflet library, extract and put the files in sites/all/ libraries/leaflet . 01. 02. 65
  66. 66. Geofield: Leaflet display 66
  67. 67. Geofield: Leaflet display 67
  68. 68. Leaflet Map • 仍然要從 Views 開始。 68
  69. 69. Leaflet: create a view page 69
  70. 70. Leaflet: choose Leaflet Map format 70
  71. 71. Leaflet: add location field 71
  72. 72. Leaflet: choose WKT format 72
  73. 73. Leaflet: set page style 73
  74. 74. Leaflet: check result 74
  75. 75. Leaflet: check result 75
  76. 76. Why? 1. Leaflet has nice defaults. 2. Just render a view (a list of query result) as a map. • Intuitive (at least for Drupal developers.) 3. And this brings some new features (in a moment). 4. But Leaflet lacks a few important features. • among them, a Geofield widget. 76
  77. 77. 那就自己做一那就自己做一 個個 Drupical 吧吧
  78. 78. Search and filter • Leaflet Map 只是一個 view page。 • 所以 Views 的功能都可以用。 • 可以加 filter,可以 expose form。 • 可以對文字欄位搜尋,可以開 Ajax。 79
  79. 79. Search and filter 80
  80. 80. Search and filter 81
  81. 81. Search and filter 82
  82. 82. Search and filter 83
  83. 83. Search and filter 84
  84. 84. Search and filter 85
  85. 85. Search and filter • 這比 OpenLayers 的圖層好用! • 而且可以對文字欄位搜尋。 86
  86. 86. 修改修改 OpenLayers • OpenLayers Javascript Library 其實還有很多功能沒有整合進 Drupal。 • http://openlayers.org/dev/examples/ 有一大堆範例程式,in Javascript。 • 要用這些範例程式裡的功能,要自己寫 Javascript(用 jQuery 不會很難 啦)。 • 並且要知道怎麼 access 網站上的 OpenLayers.Map object。 87
  87. 87. 修改修改 OpenLayers 88
  88. 88. 修改修改 OpenLayers 89
  89. 89. 修改修改 OpenLayers 90
  90. 90. PostGIS
  91. 91. Cartaro, Geospatial CMS based on Drupal 92
  92. 92. Architecture 93
  93. 93. 以上以上
  94. 94. 參考資源參考資源 • Geofield、PostGIS、OpenLayers、Leaflet、GeoServer 等等 Drupal 模組 都在 Drupal.org。 • Drupical http://drupical.org/ • Cartaro http://cartaro.org/ • 台灣海岸守護網 http://coast.e-info.org.tw/ 95
  95. 95. 聯絡方式聯絡方式 • Pomin Wu http://twitter.com/pm5 • 台灣環境資訊協會 http://www.e-info.org.tw/ 96
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×