.NETで電子国土地図を使ってみる。[Chapter 1]

電子国土地図を使ってみる。[Chapter 1]

ずいぶんと久しぶりな気がします。どうもブログは苦手です。こつこつ毎日が苦手なのかしら。。。
さて、Mapserverの件も途中なのですが、MapWinGISを使ったデスクトップGISの開発がやっとこさ一段落しました。製品版として、ExcelGISを開発しました。販売先は、株式会社森林再生システムです。
GISのエンジンはMapWinGISを使っています。MapWinGISについては、追々書いていきます。こちらのHow to MapWinGISで使い方やテクニックなどを書いていきます。

ここでは、数回にわけて、電子国土地図vb.netOpenLayersGoogleMapsを使って地図ソフトを作成していきます。 最終的には、デスクトップGISのWMSとして利用したいのですが、MapWinGIS4.8ではまだ無理なようです。ver4.9から可能になる?みたいですね。

まずは、Ver4.0になった電子国土地図をvb.netで表示してみましょう。

準備

特に準備するものは、ありません。
今回は、Visual Basic 2010を使います。(たぶんvb.net2008でも大丈夫でしょう。)
vb.net上で作成した理由は、デスクトップGISとの連携や.net Frameworkでhtmlやxmlを利用したいと考えているからです。

vb.netのデザイン

まずは、vb.netを起動して、適当なプロジェクト名で新規作成します。
使用するコントロールは、Toolstrip,StatusStrip,WebBrowserの3つです。
blog.godo-tys.jp_wp-content_gallery_denshikokudo_image01.jpg
デザインイメージ

サンプルコード

参考にするプログラムは、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を表示させる場合は、気をつける点があります。

  1. http://openlayers.org/api/OpenLayers.jsを使うとprototypeエラーとなる。(スクリプトの実行はできる)
  2. http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.jsを使うとGoogleMapを表示した場合に不必要なフォームが画面上に開く。
  3. 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

プログラムの実行

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image02.jpg
OpenLayersで電子国土地図表示

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image03.jpg
OpenLayersで電子国土地図とGooleMap表示

blog.godo-tys.jp_wp-content_gallery_denshikokudo_image04.jpg
OpenLayersで電子国土オルソ画像表示

入力した緯度経度を中心に表示します。

簡単に表示することができました。これを応用して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/

Comments are closed.

Social Widgets powered by AB-WebLog.com.