電子国土地図を使ってみる。[Chapter 1]
ずいぶんと久しぶりな気がします。どうもブログは苦手です。こつこつ毎日が苦手なのかしら。。。
さて、Mapserverの件も途中なのですが、MapWinGISを使ったデスクトップGISの開発がやっとこさ一段落しました。製品版として、ExcelGISを開発しました。販売先は、株式会社森林再生システムです。
GISのエンジンはMapWinGISを使っています。MapWinGISについては、追々書いていきます。こちらのHow to MapWinGISで使い方やテクニックなどを書いていきます。
ここでは、数回にわけて、電子国土地図をvb.netでOpenLayersとGoogleMapsを使って地図ソフトを作成していきます。 最終的には、デスクトップGISのWMSとして利用したいのですが、MapWinGIS4.8ではまだ無理なようです。ver4.9から可能になる?みたいですね。
まずは、Ver4.0になった電子国土地図をvb.netで表示してみましょう。
準備
特に準備するものは、ありません。
今回は、Visual Basic 2010を使います。(たぶんvb.net2008でも大丈夫でしょう。)
vb.net上で作成した理由は、デスクトップGISとの連携や.net Frameworkでhtmlやxmlを利用したいと考えているからです。
vb.netのデザイン
サンプルコード
参考にするプログラムは、OpenLayersのプログラムサンプルを使います。
サンプルコードそのまんまですね。
コードはこんな感じです。
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load Me.Width = 800 Me.Height = 600 End Sub Private Sub ToolStripButton1_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton1.Click '電子国土地図表示 Dim lat As String = ToolStripTextBox1.Text Dim lng As String = ToolStripTextBox2.Text WebBrowser1.DocumentText = kokudoOpenLayers(Double.Parse(lat), Double.Parse(lng)) End Sub Private Sub ToolStripButton2_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton2.Click '電子国土地図とGoogleMapsの表示 Dim lat As String = ToolStripTextBox1.Text Dim lng As String = ToolStripTextBox2.Text WebBrowser1.DocumentText = kokudoGoogleOpenLayers(Double.Parse(lat), Double.Parse(lng)) End Sub Private Sub ToolStripButton3_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton3.Click '電子国土オルソ画像の表示 WebBrowser1.DocumentText = OrthoPhotoView() End Sub
WebBrowserに渡すhtmlテキストは、3つのfunctionで実装します。
電子国土地図表示
電子国土地図のhtml作成するkokudoOpenLayers function
Private Function kokudoOpenLayers(ByRef lat As Double, ByRef lng As Double) As String Dim txtHtml As String = "" txtHtml = txtHtml & "<html>" & vbCrLf txtHtml = txtHtml & "<head>" & vbCrLf 'txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://openlayers.org/api/OpenLayers.js"" charset=""UTF-8""></script>"& vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js"" charset=""UTF-8""></script>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js"" charset=""UTF-8""></script>" & vbCrLf txtHtml = txtHtml & "<link rel=""stylesheet"" href=""http://portal.cyberjapan.jp/sys/v4/css/webtis.css"" type=""text/css"">" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"">" & vbCrLf txtHtml = txtHtml & "var map = null;" & vbCrLf txtHtml = txtHtml & "var initCX = " & lng.ToString.Trim & ";" & vbCrLf txtHtml = txtHtml & "var initCY = " & lat.ToString.Trim & ";" & vbCrLf txtHtml = txtHtml & "var initZoomLv = 5;" & vbCrLf txtHtml = txtHtml & "var projection900913 = new OpenLayers.Projection(""EPSG:900913"");" & vbCrLf txtHtml = txtHtml & "var projection4326 = new OpenLayers.Projection(""EPSG:4326"");" & vbCrLf txtHtml = txtHtml & "function init(){" & vbCrLf txtHtml = txtHtml & " var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);" & vbCrLf txtHtml = txtHtml & " var restrictedExtent = maxExtent.clone();" & vbCrLf txtHtml = txtHtml & " var maxResolution = 156543.0339;" & vbCrLf txtHtml = txtHtml & " var options = {" & vbCrLf txtHtml = txtHtml & " controls: [" & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}})," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.PanZoomBar()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.KeyboardDefaults()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.Attribution()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.OverviewMap()" & vbCrLf txtHtml = txtHtml & " //new OpenLayers.Control.LayerSwitcher()" & vbCrLf txtHtml = txtHtml & " ]," & vbCrLf txtHtml = txtHtml & " projection: projection900913," & vbCrLf txtHtml = txtHtml & " displayProjection: projection4326," & vbCrLf txtHtml = txtHtml & " units: ""m""," & vbCrLf txtHtml = txtHtml & " maxResolution: maxResolution," & vbCrLf txtHtml = txtHtml & " maxExtent: maxExtent," & vbCrLf txtHtml = txtHtml & " restrictedExtent: restrictedExtent" & vbCrLf txtHtml = txtHtml & " };" & vbCrLf txtHtml = txtHtml & " map = new OpenLayers.Map('map', options);" & vbCrLf txtHtml = txtHtml & " map.addControl(new OpenLayers.Control.ScaleLine({maxWidth:200,bottomOutUnits: """" , bottomInUnits: """" ,geodesic:true}));" & vbCrLf txtHtml = txtHtml & " webtisMap = new webtis.Layer.BaseMap(""webtismap"");" & vbCrLf txtHtml = txtHtml & " map.addLayer(webtisMap);" & vbCrLf txtHtml = txtHtml & " map.setCenter(new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913), initZoomLv);" & vbCrLf txtHtml = txtHtml & "}" & vbCrLf txtHtml = txtHtml & "</script>" & vbCrLf txtHtml = txtHtml & "</head>" & vbCrLf txtHtml = txtHtml & "<body onload=""init();"">" & vbCrLf txtHtml = txtHtml & "<div id=""map"" name=""map"" style=""width: 100%; height:100%;""></div>" & vbCrLf txtHtml = txtHtml & "</body>" & vbCrLf txtHtml = txtHtml & "</html>" & vbCrLf kokudoOpenLayers = txtHtml End Function
電子国土地図とGoogleMap表示
GooleMapを表示させる場合は、気をつける点があります。
-
http://openlayers.org/api/OpenLayers.jsを使うとprototypeエラーとなる。(スクリプトの実行はできる)
-
http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.jsを使うとGoogleMapを表示した場合に不必要なフォームが画面上に開く。
-
http://portal.cyberjapan.jp/sys/OpenLayers-2.10/OpenLayers.jsを使うとpanZoomBarがおかしくなる。
これは、javascriptのversionの問題のような? 作成したhtmlをchromeで表示させるとjavascriptのエラーにはなるが、実行はできます。
今後の修正に期待しましょう。
電子国土地図とGoogleMapのhtml作成するkokudoGoogleOpenLayers function
Private Function kokudoGoogleOpenLayers(ByRef lat As Double, ByRef lng As Double) As String Dim txtHtml As String = "" txtHtml = txtHtml & "<html>" & vbCrLf txtHtml = txtHtml & "<head>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/OpenLayers-2.10/OpenLayers.js"" charset=""UTF-8""></script>" & vbCrLf 'txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js"" charset=""UTF-8""></script>" & vbCrLf 'txtHtml = txtHtml & "<script src=""http://openlayers.org/api/OpenLayers.js""></script>" & vbCrLf txtHtml = txtHtml & "<script src=""http://maps.google.co.jp/maps/api/js?v=3.9&sensor=false&language=ja""></script>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js"" charset=""UTF-8""></script>" & vbCrLf txtHtml = txtHtml & "<script>" & vbCrLf txtHtml = txtHtml & "function init() {" & vbCrLf txtHtml = txtHtml & " var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);" & vbCrLf txtHtml = txtHtml & " var mapCenterLatLng = new OpenLayers.LonLat(" & lng.ToString.Trim & "," & lat.ToString.Trim & ");" & vbCrLf txtHtml = txtHtml & " var map = new OpenLayers.Map('map_google');" & vbCrLf txtHtml = txtHtml & " map.addControl( new OpenLayers.Control.LayerSwitcher());" & vbCrLf txtHtml = txtHtml & " map.addControl( new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}));" & vbCrLf txtHtml = txtHtml & " //map.addControl( new OpenLayers.Control.PanZoomBar());" & vbCrLf txtHtml = txtHtml & " map.addControl( new OpenLayers.Control.Attribution());" & vbCrLf txtHtml = txtHtml & " map.addControl( new OpenLayers.Control.OverviewMap());" & vbCrLf txtHtml = txtHtml & " map.addControl( new OpenLayers.Control.ScaleLine(new OpenLayers.Control.ScaleLine({maxWidth:200,bottomOutUnits: """" , bottomInUnits: """" ,geodesic:true})));" & vbCrLf txtHtml = txtHtml & " var cj4Base = new webtis.Layer.BaseMap( ""電子国土"" );" & vbCrLf txtHtml = txtHtml & " var gmap_terrain = new OpenLayers.Layer.Google(" & vbCrLf txtHtml = txtHtml & " ""地形図""," & vbCrLf txtHtml = txtHtml & " {type: google.maps.MapTypeId.TERRAIN}" & vbCrLf txtHtml = txtHtml & " );" txtHtml = txtHtml & " var gmap = new OpenLayers.Layer.Google(" & vbCrLf txtHtml = txtHtml & " ""道路地図""," & vbCrLf txtHtml = txtHtml & " {numZoomLevels: 20}" & vbCrLf txtHtml = txtHtml & " );" txtHtml = txtHtml & " var gmap_hybrid = new OpenLayers.Layer.Google(" & vbCrLf txtHtml = txtHtml & " ""衛星写真HYBRID""," & vbCrLf txtHtml = txtHtml & " {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}" & vbCrLf txtHtml = txtHtml & " );" & vbCrLf txtHtml = txtHtml & " var gmap_satellite = new OpenLayers.Layer.Google(" & vbCrLf txtHtml = txtHtml & " ""衛星写真""," & vbCrLf txtHtml = txtHtml & " {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}" & vbCrLf txtHtml = txtHtml & " );" & vbCrLf txtHtml = txtHtml & " map.addLayers( [ cj4Base, gmap, gmap_terrain, gmap_hybrid, gmap_satellite] );" & vbCrLf txtHtml = txtHtml & " // Google.v3 uses EPSG:900913 as projection, so we have to" & vbCrLf txtHtml = txtHtml & " // transform our coordinates" & vbCrLf txtHtml = txtHtml & " var projection = new OpenLayers.Projection(""EPSG:4326"");" & vbCrLf txtHtml = txtHtml & " var mapCenterGoogle = mapCenterLatLng.transform( projection, map.getProjectionObject() );" & vbCrLf txtHtml = txtHtml & " map.setCenter( mapCenterGoogle, 5 );" & vbCrLf txtHtml = txtHtml & " }" & vbCrLf txtHtml = txtHtml & "</script>" & vbCrLf txtHtml = txtHtml & "</head>" & vbCrLf txtHtml = txtHtml & "<body onload=""init()"">" & vbCrLf txtHtml = txtHtml & "<div id=""map_google"" name=""map_google"" style=""width: 100%; height: 100%;""></div>" & vbCrLf txtHtml = txtHtml & "</body>" & vbCrLf txtHtml = txtHtml & "</html>" & vbCrLf kokudoGoogleOpenLayers = txtHtml End Function
電子国土オルソ画像表示
電子国土地図オルソ画像のhtml作成するkokudoGoogleOpenLayers function
Private Function OrthoPhotoView() As String Dim txtHtml As String = "" txtHtml = txtHtml & "<html>" & vbCrLf txtHtml = txtHtml & "<head>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js"" charset=""UTF-8""></script>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://portal.cyberjapan.jp/sys/v4/webtis/webtis_v4.js"" charset=""UTF-8""></script>" & vbCrLf txtHtml = txtHtml & "<link rel=""stylesheet"" href=""http://portal.cyberjapan.jp/sys/v4/css/webtis.css"" type=""text/css"">" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"">" & vbCrLf txtHtml = txtHtml & "var map = null;" & vbCrLf txtHtml = txtHtml & "var initCX = 140.0852778;" & vbCrLf 'つくば市の国土地理院の経度 txtHtml = txtHtml & "var initCY = 36.10416667;" & vbCrLf 'つくば市の国土地理院の緯度 txtHtml = txtHtml & "var initZoomLv = 10;" & vbCrLf txtHtml = txtHtml & "var projection900913 = new OpenLayers.Projection(""EPSG:900913"");" & vbCrLf txtHtml = txtHtml & "var projection4326 = new OpenLayers.Projection(""EPSG:4326"");" & vbCrLf txtHtml = txtHtml & "function init(){" & vbCrLf txtHtml = txtHtml & " var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);" & vbCrLf txtHtml = txtHtml & " var restrictedExtent = maxExtent.clone();" & vbCrLf txtHtml = txtHtml & " var maxResolution = 156543.0339;" & vbCrLf txtHtml = txtHtml & " var options = {" & vbCrLf txtHtml = txtHtml & " controls: [" & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}})," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.PanZoomBar()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.KeyboardDefaults()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.Attribution()," & vbCrLf txtHtml = txtHtml & " new OpenLayers.Control.OverviewMap()" & vbCrLf txtHtml = txtHtml & " ]," & vbCrLf txtHtml = txtHtml & " projection: projection900913," & vbCrLf txtHtml = txtHtml & " displayProjection: projection4326," & vbCrLf txtHtml = txtHtml & " units: ""m""," & vbCrLf txtHtml = txtHtml & " maxResolution: maxResolution," & vbCrLf txtHtml = txtHtml & " maxExtent: maxExtent," & vbCrLf txtHtml = txtHtml & " restrictedExtent: restrictedExtent" & vbCrLf txtHtml = txtHtml & " };" & vbCrLf txtHtml = txtHtml & " map = new OpenLayers.Map('map', options);" & vbCrLf txtHtml = txtHtml & " map.addControl(new OpenLayers.Control.ScaleLine({maxWidth:200,bottomOutUnits: """" , bottomInUnits: """" ,geodesic:true}));" & vbCrLf txtHtml = txtHtml & " webtisMap = new webtis.Layer.BaseMap(""webtismap"");" & vbCrLf txtHtml = txtHtml & " var dataSet = webtisMap.getOrthoDataSet();" & vbCrLf txtHtml = txtHtml & " webtisMap.setDataSet(dataSet);" & vbCrLf txtHtml = txtHtml & " map.addLayer(webtisMap);" & vbCrLf txtHtml = txtHtml & " map.setCenter(new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913), initZoomLv);" & vbCrLf txtHtml = txtHtml & "}" & vbCrLf txtHtml = txtHtml & "</script>" & vbCrLf txtHtml = txtHtml & "</head>" & vbCrLf txtHtml = txtHtml & "<body onload=""init();"">" & vbCrLf txtHtml = txtHtml & "<div id=""map"" name=""map"" style=""width: 100%; height:100%;""></div>" & vbCrLf txtHtml = txtHtml & "</body>" & vbCrLf txtHtml = txtHtml & "</html>" & vbCrLf OrthoPhotoView = txtHtml End Function
プログラムの実行
入力した緯度経度を中心に表示します。
簡単に表示することができました。これを応用してshape fileを重ねるとか、他のwmsと重ねるとかできそうですね。
次回は、GoogleMaps APIを使って電子国土地図を表示してみます。
それでは、今日はここまで。
サンプルコードをこちらにアップしておきます。使用する際は自己責任にて使って下さい。
参考にしたHP
http://portal.cyberjapan.jp/portalsite/version/v4/samples.html
http://d.hatena.ne.jp/mas0205/
http://d.hatena.ne.jp/yellow_73/20120801
http://y2web.net/blog/
最近のコメント