http://d.hatena.ne.jp/end0tknr/20110411/1302532996
以前のエントリからしばらく経ちますが、今回はmapserverによるwmsサーバの準備が完了したので、openlayersでwmsサーバから地図を表示します。といっても、行政区画データを表示するだけでは面白くないので、www.????.jp で公開されていた震災写真も重ねて表示します。
表示例とsrc
html src
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css" /> <style>h2 { font-size: large; font-weight: normal; }</style> <script src="openlayers/OpenLayers.js"></script> <script> function init() { var options = { maxExtent: new OpenLayers.Bounds(135,36,142,40), controls: [ new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), ], numZoomLevels: 18, allOverlays: true } var map = new OpenLayers.Map('map',options); map.div.style.backgroundColor = 'rgb(221,238,255)'; var gyosei = new OpenLayers.Layer.WMS( "GYOSEI", "http://colinux:8081/smap/mapserv?map=test_wms.map&request=getmap&service=WMS&version=1.1.1&SRS=EPSG:4326&", { layers: "gyosei", format: "image/png", transparent: true }, { } ); var p_sendai = new OpenLayers.Layer.WMS( "ishinomaki", "http://www.????.jp/<ないしょ>?", { layers: "sendai", format: "image/jpeg", transparent: true }, { } ); var text_info = new OpenLayers.Layer.Text( "text", {location: "./textfile.txt"} ); map.addLayers([p_sendai,gyosei,text_info]); map.setCenter(new OpenLayers.LonLat(140.9,38.2), 12); } </script> </head> <body onload="init()"> <h1>mapserver + openlayerts test</h1> <div id="map" style="width: 600px; height: 400px; border: solid 1px #999;"></div> </body> </html>
textfile.txt
point title description icon 38.2,140.9 TEI001 テスト001様 <a href="#">>更に</a><br><img src='user_p.gif'> 38.21,140.91 TEI002 テスト邸002 38.195,140.898 TEI003 テスト邸001
map file
MAP NAME wms_test SIZE 500 500 #画像size EXTENT 135 36 142 40 #出力範囲の座標 STATUS ON #地図を表示するか UNITS DD #地図の単位(DD は緯度経度) IMAGECOLOR 255 255 255 #背景色R G B IMAGETYPE PNG TRANSPARENT ON WEB IMAGEPATH "/home/endo/dev/smap/tmp/" IMAGEURL "/smap/tmp/" METADATA "wms_title" "wms2500" "wms_onlineresource" "http://colinux:8081/map/mapserv?map=test_wms.map&" "wms_srs" "EPSG:2448 EPSG:4326 EPSG:54004 EPSG:4612" END END PROJECTION "init=epsg:4326" END LAYER NAME "gyosei" METADATA "DESCRIPTION" "gyosei" "wms_title" "gyosei" "wms_srs" "EPSG:2448 EPSG:4326 EPSG:54004" END CONNECTIONTYPE POSTGIS CONNECTION "user=postgres password='' dbname=smap host=localhost" DATA "the_geom FROM gyosei" #select文 TYPE LINE CLASS COLOR 255 0 0 END END END
openlayersは自動でタイル化した画像を取得
どうやら、OpenLayersは自動的に地図データ取得をタイル状に細分化してhttp getしますが、それだけに同時リクエスト数が多い。
キャッシュする機能があれば、よいのですが、どうすれば?
2011/5/18 追記
id:yellow_73 さんからのご指摘を受けて、被災地空中写真WMS のurlの一部を削除しました。
ありがとうございました。> yellow_73 さん
その他にも次のurlでいろいろと、ご指摘を頂いているので、その辺りは別エントリで。