https://keijiban.umayadia.com/ThreadDetail.aspx?ThreadId=30403#CommentId83526
投稿者 らいよん  (社会人) 投稿日時 2019/5/21 18:19:26
前回質問させて頂いた後にうまくいかない箇所が出てきて困ったいます。お知恵をお貸しください。
vb.net(Visual Studio 2017)でwebBrowserにopenLayer(v5.3.0)を使用して国土地理院地図の表示を行っています。前回アドバイスを頂いて表示まではできたのですが、今回困っているのは表示位置をマウスで移動することができない事です。htmlで試してみたのですが問題なく動作しました。後、LeafletでもやってみたのですがWebBrowserでも表示＆マウス移動も動作しました。何かお気づきな点がありましたらご教示ください。

以下にソースをのせますのでご教示ください。
↓ソース

Public Class Form1

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
'電子国土地図表示(OpenLayer)
WebBrowser1.DocumentText = TestOpenLayer()
End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
'電子国土地図表示(OpenLayer)
WebBrowser1.DocumentText = TestLeaflet()
End Sub

Private Function TestOpenLayer() As String

        Dim txtHtml As String = ""

        txtHtml =
           "<!doctype html>
                <html lang='ja'>
                <head>
                    <meta charset='utf-8' />
                    <link rel=""stylesheet"" href=""https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"" type=""text/css"">
                    <script src=""https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js""></script>
                    <script type='text/javascript'>
                var __map = null;
                var initZoomLv = 5;
                function loadMap() {
                    var _stdLayer = new ol.layer.Tile({
                                source: new ol.source.XYZ({
                                   url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
                                })
                    });
                    __map = new ol.Map({
                        target: 'map',
                        layers: [
                            _stdLayer
                        ],
                        view: new ol.View({
                            center: ol.proj.fromLonLat([139.745433, 35.658581]),
                            zoom: initZoomLv
                        }),
                        controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
                        interactions: ol.interaction.defaults()
                    });
                }
                </script>
                    <style>
                        #map {
                            width: 600px;
                            height: 400px;
                        }
                    </style>
                </head>
                <body onload='loadMap();'>
                    <div id='map'></div>
                </body>
                </html>"
#End Region

        TestOpenLayer = txtHtml

    End Function

   Private Function TestLeaflet() As String

        Dim txtHtml As String = ""

#Region "txtHTMl への代入"
        txtHtml =
            "<!DOCTYPE html>
            <html>
            <head>
            <meta charset=""UTF-8"">
            <title>GSI Tiles on Leaflet</title>
            <link rel=""stylesheet"" href=""https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"" />
            <script src=""https://unpkg.com/leaflet@1.2.0/dist/leaflet.js""></script>

            <style>
              body {padding: 0; margin: 0}
              html, body, #map {height: 100%; width: 100%;}
            </style>
            </head>
            <body>
            <div id=""map""></div>
            <script>
            var map = L.map('map');
            L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
              attribution: ""<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>""
            }).addTo(map);
            map.setView([35.658581,139.745433],5);
            </script>
            </body>
            </html>"
#End Region
        TestLeaflet = txtHtml

    End Function

End Class

以上よろしくお願いします。
0