タイル地図の表示WMTSの表示KML,GPX,GeoJSONの読み込み円を描くポリゴンを描くポリラインを描くマーカーを配置するポップアップクリック位置の座標中心位置の座標地名検索地図切り替え地質図凡例表示地質図凡例とポップアップマーカー標高タイルで標高値を得る地理院地図vectorの表示

 OpenLayers Ver.6 TIPS

 「かだいおうち Advanced Course」では、Webマップを動かすJavascriptライブラリーとして、最初はgoogle maps APIを使用していましたが、Google社のポリシー変更により、私企業のAPI使用は懲り懲りしましたので、オープンソースのOpenlayers ver.4を使ってきました。なお最近では、LeafletやMapboxのような使いやすいライブラリーも現れました。しかし、オープンソースとは言え、Leafletは、基本的にAgafonkin氏が個人で開発したもので、CloudMade社(現在はMapbox社)から公開されています。Mapboxもやはり私企業です。
 このウェブサイトは大学のサーバにありますから、私企業のものを使うにはためらいがあります。Openlayersは、少々コーディングが難しいですが、このまま使い続けるしかないでしょう。Openlayersは、その後ver.5になりましたが、下位互換があり、そのままコードが通用しました。しかし、現在はver.6の作成が進行しています。従来のコードがそのまま通用しないこともあります。そこで、さわりをご紹介します。いろいろな書き方がありますが、ver.4になるべく近い書き方を採用することとします。実際に移植してみますと、著作権表示が簡易になったことなどくらいで、ver.4のコードがほとんど微修正で通用しました。もうコードを羅列するのは止めることとします。「サンプルプログラムのURL」を開いてソースコードを表示してください。

 タイル地図の表示

地理院地図と産総研シームレス地質図
サンプルプログラムのURL
 WMTSの表示
防災科研地すべり地形分布図
サンプルプログラムのURL
<!DOCTYPE html>
<html lang="ja">
  <head>
<title>OpenLayers 6 サンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  </head>
<body>
   <div id="map" style="width: 500px; height: 400px; font-size: 13px;"></div>
<script>
// 地理院地図
         var gsi_layer =  new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
                attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
            })
        });
// 産総研シームレス地質図
          var gsj_layer = new ol.layer.Tile({
           opacity: 0.7,
            source: new ol.source.XYZ({
                url: 'https://gbank.gsj.jp/seamless/v2/api/1.2/tiles/{z}/{y}/{x}.png',
                attributions: "<a href='https://gbank.gsj.jp/seamless/v2/api/1.2/legend.html' target='_blank'>産総研シームレス地質図</a>",
            })
        });
// 防災科研地すべり地形分布図(WMTS配信)(座標系はEPSG:4326を指定)
      var nied_layer = new ol.layer.Tile({
        opacity: 0.7,
        source:  new ol.source.TileWMS({
        url: 'http://www.j-shis.bosai.go.jp/map/wms/landslide',
        attributions: "<:a href='http://www.j-shis.bosai.go.jp/JSHIS2/IMAGE/etc/landslide_v3_jp.png' target='_blank'>防災科研地すべり地形分布図</a>",
        params: {'LANG': 'en', 'VERSION': '1.1.1', 'REQUEST': 'GetMap', 'WIDTH': 512,'HEIGHT': 512, 'LAYERS': 'L-V3-ALL', 'STYLES': 'default', 'TRANSPARENT': true, 'FORMAT': 'image/png','TILED': true},
        projection: "EPSG:4326"
      })
      });
// 地図描画
      var map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults().extend([new ol.control.FullScreen(), new ol.control.ScaleLine()]),
        layers: [ gsi_layer, gsj_layer, nied_layer ],
        view: new ol.View({
          center: ol.proj.fromLonLat([130.5,31.6]),
          zoom: 11
        })
      });
   </script>
</body>
</html>

 KML, GPX, GeoJSONの読み込み  円を描く
 
1920年の鹿児島市域(GeoJSON)と甲突川水系(kml)
ある日の鹿児島県地学会巡検ルート(gpx)
 桜島南岳から半径10km圏
サンプルプログラムのURL サンプルプログラムのURL

 ポリゴンを描く  ポリラインを描く
 
鹿児島大学郡元キャンパス 薩摩街道出水筋(西目筋)
サンプルプログラムのURL サンプルプログラムのURL

 マーカーを配置する  ポップアップ
 
マーカー表示(名称はポップアップしません)
:市役所,:中央駅,:県庁,:錫山鉱山
 マーカーをクリックすると名称と写真がポップアップします
サンプルプログラムのURL サンプルプログラムのURL

 クリック位置の座標  中心位置の座標
 
地図をクリックするとその点の緯度経度が分かります 地図中心位置の緯度経度
サンプルプログラムのURL サンプルプログラムのURL
(ol.inheritsというfunctionが廃止されました)

 地名検索  地図の切り替え
 
地名検索(ルーペ印:検索,日本語可) 地図の切り替え*(右上のロゴマークで切り替えます。)
サンプルプログラムのURL サンプルプログラムのURL
  * ol3-layerswitcher.js を ol-layerswitcher.js に変更しました。

 地質図凡例表示  地質図凡例とポップアップマーカー
 
地質図凡例表示(任意の地点をクリックしてください。) 地質図凡例とポップアップマーカーの共存
サンプルプログラムのURL サンプルプログラムのURL
  * 上述のコードを組み合わせただけです。

 標高タイルで標高値を得る  地理院地図vectorの表示
 
標高タイル(任意の地点をクリックしてください。) 地理院地図vector
サンプルプログラムのURL サンプルプログラムのURL
水系・等高線・道路・鉄道・建物を抽出した例のURL

文献
  1. (), . , Vol., No., p..
  2. (), . , Vol., No., p..
  3. (), . , Vol., No., p..

参考サイト:



初出日:2020/11/15
更新日:2020/12/27