用 Drupal 打造 GIS 網站
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,967
On Slideshare
1,967
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 用用 Drupal 打造打造 GIS 網站網站 Presented by Pomin Wu, 台灣環境資訊協會.
  • 2. 經驗分享與主題經驗分享與主題 1. 其實我不是 GIS 專家。 2. 但是用 Drupal 做個網站還可以。 3. 所以有天某人(我老闆)就跟我說 02
  • 3. “Make it so.”
  • 4. 台灣海岸守護網台灣海岸守護網 04
  • 5. 實地踏查的監測資訊中心實地踏查的監測資訊中心 05
  • 6. To explore strange new worlds 06
  • 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. 關於格式關於格式 • 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. “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. GIS CMS stacks using Drupal 10
  • 11. “A Matter of Perspective”, TNG 3x14 不論做什麼都要用到 Views。 11
  • 12. (以下會有一點枯燥。) “Proceed.”
  • 13. Geofield
  • 14. Geofield 安裝 $ drush dl geofield $ drush en -y geofield_map # dl & en geofield, geoPHP 01. 02. 14
  • 15. Geofield: Latitude Longitude widget 15
  • 16. Geofield Latitude and Longitude widget • Decimal Degrees (122.340932) • Degrees-Minutes-Seconds (-123° 49’ 55.2” W) • 可以配合 Feeds 批次匯入經緯度資料。 16
  • 17. Geofield: HTML5 Geofield widget 17
  • 18. Geofield HTML5 Geolocation widget • 從瀏覽器取得使用者的地理位置。 • ask Google for non-supportive browsers. 18
  • 19. Geofield 再選個 display… 不過先等一下。 19
  • 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. Geofield: OpenLayers Map widget 21
  • 22. Geofield Draw on an OpenLayers Map widget • 直接在地圖上點出位置。 • 可以描點、線、面。 • 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方) 22
  • 23. Geofield 23
  • 24. Geofield: OpenLayers Map display 24
  • 25. Geofield OpenLayers Map display • 用地圖呈現這個 node 的位置。 • 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方) 25
  • 26. Geofield 26
  • 27. OpenLayers Map 27
  • 28. OpenLayers Map 28
  • 29. OpenLayers Map 29
  • 30. Geofield: set OpenLayers Map center 30
  • 31. Geofield: OpenLayers Map display 31
  • 32. Geofield: OpenLayers Map widget 32
  • 33. OpenLayers
  • 34. OpenLayers • 但是我們得從 Views 開始。 34
  • 35. OpenLayers: add a view. 35
  • 36. OpenLayers: add location field. 36
  • 37. OpenLayers: choose WKT format. 37
  • 38. OpenLayers: check result. 38
  • 39. OpenLayers: OpenLayers Data Overlay. 39
  • 40. OpenLayers: change format. 40
  • 41. OpenLayers: choose the only format. 41
  • 42. OpenLayers: fill in options. 42
  • 43. OpenLayers: check result. 43
  • 44. (記得把剛才的 view 存起來。) 喘口氣喘口氣
  • 45. OpenLayers 45
  • 46. OpenLayers Layers 46
  • 47. OpenLayers Layers: check result 47
  • 48. OpenLayers Layers: goto map 48
  • 49. OpenLayers Layers: edit the default map 49
  • 50. OpenLayers Layers: edit layers and styles 50
  • 51. OpenLayers Layers: add our layer 51
  • 52. OpenLayers Layers: check result 52
  • 53. OpenLayers Layers: check result 53
  • 54. OpenLayers Layers: edit behaviors 54
  • 55. OpenLayers Layers: add pop up 55
  • 56. OpenLayers Layers: check result 56
  • 57. OpenLayers Layers: set map center 57
  • 58. (記得把剛才的 openlayer map 存起來。) 喘口氣喘口氣
  • 59. OpenLayers: show the map in a page • 可以用 Panels. • 也可以用 Views. 59
  • 60. OpenLayers: show with a view 60
  • 61. OpenLayers: show with a view 61
  • 62. 相當麻煩相當麻煩
  • 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. Leaflet
  • 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. Geofield: Leaflet display 66
  • 67. Geofield: Leaflet display 67
  • 68. Leaflet Map • 仍然要從 Views 開始。 68
  • 69. Leaflet: create a view page 69
  • 70. Leaflet: choose Leaflet Map format 70
  • 71. Leaflet: add location field 71
  • 72. Leaflet: choose WKT format 72
  • 73. Leaflet: set page style 73
  • 74. Leaflet: check result 74
  • 75. Leaflet: check result 75
  • 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. 那就自己做一那就自己做一 個個 Drupical 吧吧
  • 78. Search and filter • Leaflet Map 只是一個 view page。 • 所以 Views 的功能都可以用。 • 可以加 filter,可以 expose form。 • 可以對文字欄位搜尋,可以開 Ajax。 79
  • 79. Search and filter 80
  • 80. Search and filter 81
  • 81. Search and filter 82
  • 82. Search and filter 83
  • 83. Search and filter 84
  • 84. Search and filter 85
  • 85. Search and filter • 這比 OpenLayers 的圖層好用! • 而且可以對文字欄位搜尋。 86
  • 86. 修改修改 OpenLayers • OpenLayers Javascript Library 其實還有很多功能沒有整合進 Drupal。 • http://openlayers.org/dev/examples/ 有一大堆範例程式,in Javascript。 • 要用這些範例程式裡的功能,要自己寫 Javascript(用 jQuery 不會很難 啦)。 • 並且要知道怎麼 access 網站上的 OpenLayers.Map object。 87
  • 87. 修改修改 OpenLayers 88
  • 88. 修改修改 OpenLayers 89
  • 89. 修改修改 OpenLayers 90
  • 90. PostGIS
  • 91. Cartaro, Geospatial CMS based on Drupal 92
  • 92. Architecture 93
  • 93. 以上以上
  • 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. 聯絡方式聯絡方式 • Pomin Wu http://twitter.com/pm5 • 台灣環境資訊協會 http://www.e-info.org.tw/ 96