用用 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