用 drupal 打造 gis 網站
Post on 15-Jan-2015
2.043 Views
Preview:
DESCRIPTION
TRANSCRIPT
用用 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 2x03Geofield 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
關於格式關於格式
• Well-known Text (WKT).
• POINT (121.52861583171 25.043122959287)
• GeoJSON.
•
{"type":"Point","coordinates":[121.52861583171,25.043122959287]}
• Latitude and Longitude (經緯度)
• 25.043123 121.528616
08
“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
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
GeofieldLatitude and Longitude widget
• Decimal Degrees (122.340932)
• Degrees-Minutes-Seconds (-123° 49’ 55.2” W)
• 可以配合 Feeds批次匯入經緯度資料。
16
Geofield: HTML5 Geofield widget
17
GeofieldHTML5 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 openlayers_ui views_ui
01.
02.
03.
20
Geofield: OpenLayers Map widget
21
GeofieldDraw on an OpenLayers Map widget
• 直接在地圖上點出位置。
• 可以描點、線、面。
• 可是地圖預設的中心是經緯度 (0, 0) (在非洲大陸西南方)
22
Geofield
23
Geofield: OpenLayers Map display
24
GeofieldOpenLayers 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 another level of abstraction.
• Does not fit into the Views-centric workflow of Drupal very well.
63
Leaflet
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
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 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
那就自己做一那就自己做一個個 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 Javascript。
• 要用這些範例程式裡的功能,要自己寫 Javascript(用 jQuery 不會很難
啦)。
• 並且要知道怎麼 access 網站上的 OpenLayers.Map object。
87
修改修改 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/
• Cartaro http://cartaro.org/
• 台灣海岸守護網 http://coast.e-info.org.tw/
95
聯絡方式聯絡方式
• Pomin Wu http://twitter.com/pm5
• 台灣環境資訊協會 http://www.e-info.org.tw/
96
top related