GeoExt1.1でTree Actionで自前のWMSを使ってみる。[Chapter 10]

Posted by on 05/24/2013

wmsのおさらい

shapefileをOpenLayersで表示させようとした場合、方法としては、

  1. 直接読み込んで使う。 js2shapefileなど。
  2. GeoJSONに変換して使う。
  3. MapServerを使ってWMSとして使う。

の3点になるかと思います。

GeoJSONとして読み込むとVector Dataで利用できるため、座標値や属性値を利用することができます。一方、WMSで利用すると画像としての配信となるので、どちらかと言うと背景図に近い形となります。
今回は、OpenLayersを使ってみる[Chapter 1] でせっかくms4w-3.0.6をインストールしたので、自前でWMSを提供して、Tree Actionに追加してみます。

GeoExt1.1でTree Actionを使ってみる。[Chapter 9] では、exampleとしてTasmaniaのdemo wmsを使っていましたが、この部分を入れ替えることになります。

ますは、ms4w-3.0.6でのoverlayについてから、mapfileを作成します。
layerは、県界、市町村界、主要道路、水域、鉄道、標高ラスターとしています。

mapfileは、C:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.mapに作成します。
EPSGは4326で世界測地系です。

そのcodeは、

# wms map file
MAP
  NAME "WMS-MAP"
  # Map image size
  SIZE 600 480
  UNITS dd

  EXTENT 138.870901 35.096973 139.794999 35.715121
  FONTSET "../fonts/msfontset.txt"
  #SYMBOLSET "../symbols/symbols-pmapper.sym" # Ver6.0よりsymbol変更のため未使用にする。
  SHAPEPATH   "../data"
  #
  #EPSG:4326(JGD_2000 WGS84)
  #
  PROJECTION
    "init=EPSG:4326"
    #"init=EPSG:3785"
  END

  TRANSPARENT ON #for OpenLayers.Layer.MapServer

  # Background color for the map canvas -- change as desired
  IMAGECOLOR 255 255 255
  IMAGEQUALITY 95
  IMAGETYPE png

  OUTPUTFORMAT
    NAME png
    DRIVER 'GD/PNG'
    MIMETYPE 'image/png'
    IMAGEMODE RGBA
    EXTENSION 'png'
    TRANSPARENT OFF
  END

  # Web interface definition. Only the template parameter
  # is required to display a map. See MapServer documentation
  WEB
    METADATA
      "wms_title" "WMS Server"
      "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map&"
      "wms_srs" "EPSG:4326 EPSG:3857"
      "ows_enable_request" "*"
      #"wms_enable_request" "*"
    END
    IMAGEPATH "/ms4w/tmp/ms_tmp/"
    IMAGEURL "/ms_tmp/"
  END

#
# raster layer (shp file)
#
#神奈川県　標高ラスター
  LAYER
    NAME "height"
    TYPE RASTER
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    EXTENT 138.841265 34.953235 139.870265 35.848283
    DATA 'c14_ras2qgs.tif'
    METADATA
      'ows_title' 'height'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
   END
  END

#
# Vector layer (shp file)
#
#県界
  LAYER
    NAME 'kanagawa'
    TYPE POLYGON
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    #EXTENT 138.870901 35.096973 139.794999 35.715121
    DATA 'c14_pref.shp'
    METADATA
      'ows_title' 'kanagawa'
    END
    STATUS ON #OFF
    TRANSPARENCY 50
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
    END
    CLASS
       NAME 'kanagawa'
       STYLE
         SYMBOL 0
         SIZE 7.0
         OUTLINECOLOR 255 10 10
         COLOR 200 5 76 # -1 -1 -1
         WIDTH 3
       END
    END
  END

#市区町村界
  LAYER
    NAME 'region'
    TYPE POLYGON
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    #EXTENT 138.870901 35.096973 139.794999 35.715121
    DATA 'c14_region'
    METADATA
      'ows_title' 'region'
    END
    STATUS ON #OFF
    TRANSPARENCY 100
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
    END
    CLASS
       NAME 'region'
       STYLE
         SYMBOL 0
         SIZE 7.0
         OUTLINECOLOR 255 0 0
         COLOR -1 -1 -1 #255 5 76
         WIDTH 2
       END
    END
  END

#水涯線
  LAYER
    NAME 'water'
    TYPE LINE
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    #EXTENT 138.870901 35.096973 139.794999 35.715121
    DATA 'c14_water.shp'
    METADATA
      'ows_title' 'water'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
    END
    CLASS
       NAME 'water'
       STYLE
         SYMBOL 0
         SIZE 7.0
         #OUTLINECOLOR 170 170 255
         COLOR 170 170 255 #0 0 0
         WIDTH 2
       END
    END
  END

#主要道路
  LAYER
    NAME 'road'
    TYPE LINE
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    #EXTENT 138.870901 35.096973 139.794999 35.715121
    DATA 'c14_road.shp'
    METADATA
      'ows_title' 'road'
    END
    STATUS ON
    TRANSPARENCY 100
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
    END
    CLASS
       NAME 'road'
       STYLE
         SYMBOL 0
         SIZE 7.0
         #OUTLINECOLOR 162 42 42
         COLOR 162 42 42 #0 0 0
         WIDTH 2
       END
    END
  END

#鉄道
  LAYER
    NAME 'railroad'
    TYPE LINE
    DUMP true
    TEMPLATE fooOnlyForWMSGetFeatureInfo
    #EXTENT 138.870901 35.096973 139.794999 35.715121
    DATA 'c14_railroad.shp'
    METADATA
      'ows_title' 'railroad'
    END
   STATUS ON
    TRANSPARENCY 100
    PROJECTION
      'init=EPSG:4326'
      #'proj=longlat'
      #'ellps=WGS84'
      #'datum=WGS84'
      #'no_defs'
    END
    CLASS
      Name 'railroad'
       STYLE
         SYMBOL 0
         SIZE 7.0
         COLOR 102 102 102
         WIDTH 2
       END
      END
    END
  END

END

htmlについては、ms4w-3.0.6でのoverlayについてを参考にしてください。

firefoxで実行すると、
blog.godo-tys.jp_wp-content_gallery_geoext_10_image01.jpg

な感じで、表示されます。

Tree Actionの変更

次に、GeoExt1.1でTree Actionを使ってみる。[Chapter 9] のjavascriptを変更します。

変更する部分は、Layerの定義とmapの定義の部分です。
修正点だけですが、

// Base Layer
var prefLayer = new OpenLayers.Layer.WMS("神奈川県",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "kanagawa",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : true,
// exclude this layer from layer container nodes
displayInLayerSwitcher : false
});
 
//
var regionLayer = new OpenLayers.Layer.WMS("市区町村界",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "region",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
// true
});
 
var roadLayer = new OpenLayers.Layer.WMS("主要道路",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "road",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
});
 
var railroadLayer = new OpenLayers.Layer.WMS("鉄道",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "railroad",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
});
 
var waterLayer = new OpenLayers.Layer.WMS("水域",
"http://localhost/cgi-bin/mapserv.exe", {
map : "c:/ms4w/Apache/htdocs/mapserver/example/kanagawa_wms.map",
layers : "water",
format : "image/png",
transparent : true
}, {
buffer : 0,
isBaseLayer : false
});
 
// layerの追加
map.addLayers([prefLayer, regionLayer, roadLayer, railroadLayer, waterLayer]);
// map center
var lonlat = new OpenLayers.LonLat(139.35, 35.40);
map.setCenter(lonlat, 10);

となります。

firefoxで実行すると、
blog.godo-tys.jp_wp-content_gallery_geoext_10_image02.jpg

な感じで、表示されます。

tree panel上にiconにmouse overでup,down,deleteなどやLayerの表示順を変更することができます。

今回のまとめ

GeoEXTでWMSサービスを追加してみました。
今回のBase Layerをgoogle mapや電子国土、基盤地図情報WMS配信サービスなどに変更をtryしてください。

さて、次回はprintについてtryしてみます。GeoServerやMapFishが必要なんて書いていますので、そこら辺からやっていくことになります。

GeoExt1.1 Tutorialの目次に戻る。

GeoExt, javascript, map file, ms4w, OPEN, Openlayers, wms, , ,

Comments are closed.

Social Widgets powered by AB-WebLog.com.