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 |
文献
参考サイト:
- OpenLayers
- 「GIS実習オープン教材」(JpGU)
- OpenLayers入門(Quiita)
- WebGIS初級編 OpenLayersで簡単作成
- 地理院タイルについて(国土地理院)
- 鹿児島県鹿児島市 (46201A1968) | 歴史的行政区域データセットβ版(ROIS-DS人文学オープンデータ共同利用センター)
- KTGIS.net(埼玉大学教育学部谷謙二研究室)
- Useful 3rd party libraries(OpenLayers.org)
- walkermatt/ol-layerswitcher-examples(GitHub)
- jonataswalker/ol-geocoder(GitHub)
- OpenLayers Control Geocoder(npm)
- 4 code results in walkermatt/ol-layerswitcher-examples
初出日:2020/11/15
更新日:2020/12/27