สร้าง 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>