こんな感じ †
openlayers.html †
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8"/>
<title>Openlayers Example</title>
<style type="text/css">
#map {
width : 800px;
height : 600px;
border : 1px solid black;
}
</style>
<body>
<div id="map"></div>
</body>
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var lon = 140.0;
var lat = 35.0;
var zoom = 5;
var map = new OpenLayers.Map('map');
var baseWMS = new OpenLayers.Layer.WMS(
"Base Map",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07.map",
{layers: ['countries','lakes','rivers','cities','roads','rails'], transparent: false},
{isBaseLayer: true}
);
var earthQuakeWMS3 = new OpenLayers.Layer.WMS(
"Mag3",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquakes.map&magx=3&magy=4",
{layers: ['earthquakes'], transparent: true},
{isBaseLayer: false}
);
var earthQuakeWMS4 = new OpenLayers.Layer.WMS(
"Mag4",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquakes.map&magx=4&magy=5",
{layers: ['earthquakes'], transparent: true},
{isBaseLayer: false}
);
var earthQuakeWMS5 = new OpenLayers.Layer.WMS(
"Mag5",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquakes.map&magx=5&magy=6",
{layers: ['earthquakes'], transparent: true},
{isBaseLayer: false}
);
var earthQuakeWMS6 = new OpenLayers.Layer.WMS(
"Mag6",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquakes.map&magx=6&magy=7",
{layers: ['earthquakes'], transparent: true},
{isBaseLayer: false}
);
var earthQuakeWMS7 = new OpenLayers.Layer.WMS(
"Mag7",
"http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquakes.map&magx=7&magy=9",
{layers: ['earthquakes'], transparent: true},
{isBaseLayer: false}
);
map.addLayer(baseWMS);
map.addLayer(earthQuakeWMS3);
map.addLayer(earthQuakeWMS4);
map.addLayer(earthQuakeWMS5);
map.addLayer(earthQuakeWMS6);
map.addLayer(earthQuakeWMS7);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
</script>
</html>
- 別に難しいことはなく、{isBaseLayer?: false} な Layer を map.addLayer() すればいいだけ
- {isBaseLayer?: true} な Layer を map.addLayer() すると、BaseLayer? が排他利用になる
Map File †
- GETパラメータ magx 以上 magy 未満の地震をプロットした地図を返す
- map07_earthquakes.map
MAP
CONFIG "MS_ERRORFILE" "/tmp/mapserver.log"
IMAGETYPE PNG
EXTENT -180 -90 180 90 # <Lower Left X> <Lower Left Y> <Upper Right X> <Upper Right Y>
SIZE 640 320
IMAGECOLOR 255 255 255
FONTSET "/opt/maps/fonts.list"
UNITS dd
PROJECTION
"init=epsg:4326"
END
# WEB
WEB
TEMPLATE "/opt/maps/template07_earthquakes.html"
IMAGEPATH "/var/www/html/tmp/"
IMAGEURL "/tmp/"
MINSCALEDENOM 200
MAXSCALEDENOM 177732952
METADATA
"wms_title" "MapServer Tutorial"
"wms_onlineresource" "http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07_earthquake.map"
"wms_srs" "EPSG:4326"
"wms_abstract" "Earthquakes"
"wms_enable_request" "*"
END # End of METADATA
END # End of WEB
INCLUDE "map06_earthquakes.map"
END # End of Map
- map06_earthquakes.map
SYMBOL
NAME "circle"
TYPE ellipse
FILLED true
POINTS
3 3
END # End of POINTS
END # End of SYMBOL
LAYER
NAME earthquakes
METADATA
"wms_title" earthquakes
END
VALIDATION
"magx" "[0-9]"
"magy" "[0-9]"
END
STATUS ON
TYPE POINT
CONNECTIONTYPE POSTGIS
CONNECTION "host=localhost port=5432 dbname=demo user=postgres password=postgres"
PROCESSING "CLOSE_CONNECTION=DEFER" # DB CONNECTION POOL
DATA "geom from earthquake_table" # SQL SELECT Statement
CLASS
NAME "地震"
EXPRESSION (%magx% <= [mag] and [mag] < %magy%)
STYLE
SYMBOL "circle"
COLOR 255 102 0
END # End of STYLE
END # End of CLASS
END # End of LAYER
自前のMapserverの地図でも日付変更線マタギができるのか? †
- できる
- Mapserver は (-180,-90)-(180,90) の地図しか出力しないが、OpenLayers? の方でよろしくやって、日付変更線マタギの処理をやってくれた
- openlayers.html の全ての Layer のオプションに wrapDateLine? : true を追加した
- それにしても日本の太平洋岸は地震が多いな
GIS
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
dateline.png
map.png
