Thailand MOT FDGS

หลังจากขอข้อมูลมาจาก http://gisportal.mot.go.th/Front/FAQ/FAQ.aspx

สร้าง FDGS.map

# ogrinfo -summary /var/mapfiles/wg00/road_WGS84.shp road_WGS84
# http://site:port/cgi-bin/mapserv?map=/path/road.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities
# http://site:port/cgi-bin/mapserv?map=/path/road.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities

MAP
  IMAGETYPE      PNG
  EXTENT         384846.320137  635997.660954 1198331.211540 2258095.098300

  SIZE           1024 786
  SHAPEPATH      "/var/mapfiles"
  IMAGECOLOR     255 255 255
  CONFIG         "MS_ERRORFILE" "/var/tmp/mapserv.log"
  UNITS          meters
  FONTSET        "./fonts/fonts.list"   # this file contains only "loma Loma.ttf". And make sure that ./fonts/Loma.ttf exist.

  PROJECTION
    "proj=utm"
    "zone=47"
    "ellps=WGS84"
    "datum=WGS84"
    "units=m"
    "no_defs"
  END

  WEB
    METADATA
      "wms_title"           "roadmap"
      "wms_onlineresource"  "http://hostname/cgi-bin/mapserv?map=/path/to/this/FDGS.map&"
      "wms_srs"             "EPSG:4326"
      "wms_enable_request"  "!GetCapabilities"
    END
    IMAGEPATH "/var/www/name/tmp"
    IMAGEURL "/name/tmp"
  END

  LAYER
    NAME hydrology
    TYPE polygon
    DATA ./wg70/hydrology_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "hydrology"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "hydrology"
      STYLE
        COLOR        18 190 245
        OUTLINECOLOR 32 72 85
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END


  LAYER
    NAME admin
    TYPE polygon
    DATA ./wg80/admin_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "admin"
      "wms_format"  "image/png"
    END
    LABELITEM    "T_NAME_T"
    CLASS
      NAME "admin"
      STYLE
        #COLOR        0 0 0
        OUTLINECOLOR 60 20 231
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME Amphor
    TYPE polygon
    DATA ./wg90/Admin_Amphor_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "Amphor"
      "wms_format"  "image/png"
    END
    LABELITEM    "AMP_NAMT"
    CLASS
      NAME "Amphor"
      STYLE
        #COLOR        0 0 0
        OUTLINECOLOR 179 20 232
        WIDTH  2
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME Province
    TYPE polygon
    DATA ./wg100/Admin_Province_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "Province"
      "wms_format"  "image/png"
    END
    LABELITEM    "PROV_NAMT"
    CLASS
      NAME "Province"
      STYLE
        #COLOR        0 0 0
        OUTLINECOLOR 255 0 0
        WIDTH  3
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME police_area
    TYPE polygon
    DATA ./wg110/police_area_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "police_area"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "police_area"
      STYLE
        #COLOR        0 0 0
        OUTLINECOLOR 0 0 0
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END


  LAYER
    NAME road
    TYPE line
    DATA ./wg00/road_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "road"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "road"
      STYLE
        COLOR        150 150 150
        # OUTLINECOLOR 32 32 32
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620" # "UTF-8"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END # LABEL
    END
  END

  LAYER
    NAME expressway
    TYPE line
    DATA ./wg40/expressway_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "expressway"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "expressway"
      STYLE
        COLOR        139 105 20
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME transit
    TYPE line
    DATA ./wg50/transit_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "transit"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "transit"
      STYLE
        COLOR        255 255 0
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME railway
    TYPE line
    DATA ./wg60/railway_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "railway"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "transit"
      STYLE
        COLOR        66 195 30
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END


  LAYER
    NAME intersection
    TYPE point
    DATA ./wg10/intersection_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "intersection"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "intersection"
      STYLE
        SYMBOL  "cross"
        COLOR        255 0 0
        #WIDTH 5
        # OUTLINECOLOR 32 32 32
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END


  LAYER
    NAME station
    TYPE point
    DATA ./wg20/station_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "station"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "station"
      STYLE
        SYMBOL  "bus"
        COLOR        255 0 0
        #WIDTH 5
        # OUTLINECOLOR 32 32 32
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  LAYER
    NAME landmark
    TYPE point
    DATA ./wg30/landmark_WGS84
    DEBUG 4
    METADATA
      "wms_title"   "landmark"
      "wms_format"  "image/png"
    END
    LABELITEM    "NAME_T"
    CLASS
      NAME "landmark"
      STYLE
        SYMBOL  "star"
        COLOR        255 0 0
        #WIDTH 5
        # OUTLINECOLOR 32 32 32
      END
      LABEL
        FONT "loma"
        TYPE truetype
        ENCODING "TIS-620"
        SIZE 10
        POSITION LC
        PARTIALS FALSE
        COLOR  100 100 100
        OUTLINECOLOR 242 236 230
      END
    END
  END

  SYMBOL
    NAME "cross"
    TYPE vector
    POINTS
      2.0 0.0
      2.0 4.0
      -99 -99
      0.0 2.0
      4.0 2.0
    END
  END

  SYMBOL
    NAME "star"
    TYPE PIXMAP
    IMAGE "star.gif"
  END

  SYMBOL
    NAME "bus"
    TYPE PIXMAP
    IMAGE "bus.png"
  END

END 

FDGS.htm

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="th">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://path/to/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
var map = null;
var markers = [];

var roadWMSMap;
var intersectionWMSMap;
var stationWMSMap;
var landmarkWMSMap;
var expresswayWMSMap;
var transitWMSMap;
var railwayWMSMap;
var hydrologyWMSMap;
var adminWMSMap;
var amphorWMSMap;
var provinceWMSMap;
var policeAreaWMSMap;

var baseURL =
      "http://hostname/cgi-bin/mapserv" +
      "?map=/var/mapfiles/FDGS.map&VERSION=1.3.0&REQUEST=GetMap&CRS=CRS:84"+
      "&FORMAT=image/png&WIDTH=256&HEIGHT=256&TRANSPARENT=TRUE";


function getBBox(tile, zoom) {
  var projection = window.map.getProjection();
  var zpow = Math.pow(2, zoom);
  var ul = new google.maps.Point(tile.x * 256.0 / zpow, (tile.y + 1) * 256.0 / zpow);
  var lr = new google.maps.Point((tile.x + 1) * 256.0 / zpow, (tile.y) * 256.0 / zpow);
  var ulw = projection.fromPointToLatLng(ul);
  var lrw = projection.fromPointToLatLng(lr);
  return ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();
}

function renderWMS(){
  //http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCArray
  //http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
  //http://code.google.com/apis/maps/documentation/javascript/maptypes.html

  map.overlayMapTypes.clear();

  if(document.getElementById("road").checked){ map.overlayMapTypes.push(roadWMSMap); }
  if(document.getElementById("intersect").checked){ map.overlayMapTypes.push(intersectionWMSMap); }
  if(document.getElementById("admin").checked){ map.overlayMapTypes.push(adminWMSMap); }
  if(document.getElementById("province").checked){ map.overlayMapTypes.push(provinceWMSMap); }
  if(document.getElementById("amphor").checked){ map.overlayMapTypes.push(amphorWMSMap); }
  if(document.getElementById("express").checked){ map.overlayMapTypes.push(expresswayWMSMap); }
  if(document.getElementById("railway").checked){ map.overlayMapTypes.push(railwayWMSMap); }
  if(document.getElementById("transit").checked){ map.overlayMapTypes.push(transitWMSMap); }
  if(document.getElementById("hydro").checked){ map.overlayMapTypes.push(hydrologyWMSMap); }
  if(document.getElementById("station").checked){ map.overlayMapTypes.push(stationWMSMap); }
  if(document.getElementById("landmark").checked){ map.overlayMapTypes.push(landmarkWMSMap); }
  if(document.getElementById("police").checked){ map.overlayMapTypes.push(policeAreaWMSMap); }
}

(function ($) {
  $(document).ready(function() {
    initialize();

    var roadWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=road&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "Road Layer",
        tileSize: new google.maps.Size(256, 256)
    };
    roadWMSMap = new google.maps.ImageMapType(roadWMSOptions);

    var intersectionWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=intersection&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "intersection Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    intersectionWMSMap = new google.maps.ImageMapType(intersectionWMSOptions);

    var stationWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=station&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "station Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    stationWMSMap = new google.maps.ImageMapType(stationWMSOptions);

    var landmarkWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=landmark&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 16,
        name: "landmark Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    landmarkWMSMap = new google.maps.ImageMapType(landmarkWMSOptions);

    var expresswayWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=expressway&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "expressway Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    expresswayWMSMap = new google.maps.ImageMapType(expresswayWMSOptions);

    var transitWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=transit&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "transit Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    transitWMSMap = new google.maps.ImageMapType(transitWMSOptions);

    var railwayWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=railway&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "railway Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    railwayWMSMap = new google.maps.ImageMapType(railwayWMSOptions);

    var hydrologyWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=hydrology&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "hydrology Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    hydrologyWMSMap = new google.maps.ImageMapType(hydrologyWMSOptions);


    var adminWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=admin&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "admin Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    adminWMSMap = new google.maps.ImageMapType(adminWMSOptions);


    var amphorWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=Amphor&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "Amphor Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    amphorWMSMap = new google.maps.ImageMapType(amphorWMSOptions);


    var provinceWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=Province&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "Province Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    provinceWMSMap = new google.maps.ImageMapType(provinceWMSOptions);


    var policeAreaWMSOptions = {
        getTileUrl:
          function WMSGetTileUrl(tile, zoom) {
            return baseURL + "&LAYERS=police_area&STYLES=default&BBOX=" + getBBox(tile, zoom);
          },
        isPng: true,
        maxZoom: 17,
        minZoom: 1,
        name: "police_area Layer",
        tileSize: new google.maps.Size(256, 256)
    };

    policeAreaWMSMap = new google.maps.ImageMapType(policeAreaWMSOptions);

  });


})(jQuery)


function initialize() {
  var controlOptions = { keepOpen : 1,position : 'BOTTOM_LEFT'};
  map = new google.maps.Map(document.getElementById('map_canvas'),
   {
    zoom: 10,
    center: new google.maps.LatLng(14.505156, 100.467224),
    mapTypeId: google.maps.MapTypeId.ROADMAP
   }
  );

  return false;
}

function clearMarkers() {
  for(i in markers){
    markers[i].setMap(null);
  }
  markers = [];
  //this.markers = new Array();
}

</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>

</head>
<body >

<form action="" method="post" id="map-form" accept-charset="UTF-8">
  <table style="border:0px;">
    <tr>
      <td width="1000px" height="600px" style="padding:0px;vertical-align:top">
        <div id="map_canvas" style="width:100%; height:100%"/>
      </td>
      <td width="353px" style="padding:0px 0px 0px 15px;vertical-align:top">
        <div style="width:auto;height:500px;"id="edit-right-td" class="form-wrapper">
        <fieldset class="collapsible form-wrapper alpha60" id="edit-layer-set">
          <legend><span class="fieldset-legend">ข้อมูลที่แสดง</span></legend>
          <div class="fieldset-wrapper">
            <input type="checkbox" id="road" name="road" onclick="renderWMS();">เส้นทางคมนาคม<br/>
            <input type="checkbox" id="intersect" name="intersect" onclick="renderWMS();">จุดตัดถนน<br/>
            <input type="checkbox" id="admin" name="admin" onclick="renderWMS();">ตำบล<br/>
            <input type="checkbox" id="amphor" name="amphor" onclick="renderWMS();">อำเภอ<br/>
            <input type="checkbox" id="province" name="province" onclick="renderWMS();">จังหวัด<br/>
            <input type="checkbox" id="express" name="express" onclick="renderWMS();">เส้นทางด่วนทางยกระดับ<br/>
            <input type="checkbox" id="railway" name="railway" onclick="renderWMS();">เส้นทางรถไฟ<br/>
            <input type="checkbox" id="transit" name="transit" onclick="renderWMS();">เส้นทางรถไฟฟ้า<br/>
            <input type="checkbox" id="hydro" name="hydro" onclick="renderWMS();">เส้นทางคมนาคมทางน้ำ<br/>
            <input type="checkbox" id="station" name="station" onclick="renderWMS();">สถานีขนส่งสินค้าและผู้โดยสาร<br/>
            <input type="checkbox" id="landmark" name="landmark" onclick="renderWMS();">สถานที่สำคัญ<br/>
            <input type="checkbox" id="police" name="police" onclick="renderWMS();">ขอบเขตพื้นที่รับผิดชอบของตำรวจนครบาล<br/>
          </div>
         </fieldset>
        </div>
      </td>
    </tr>
  </table>
</form>
</body>
</html>