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

　OpenLayers Ver.7 TIPS

　2022年Openlayersはver. 7にメジャーアップグレードしました。controlsの書式などが変更されたようです。しかし、
map.addControl(new ol.control.ScaleLine({ source: 'map' }));
map.addControl(new ol.control.FullScreen({ source: 'map' }));
map.addControl(new ol.control.ZoomSlider({ source: 'map' }));
などと、従来のやり方で後から追加することは可能です。
　また、layerswitcherも元来ver.3で開発されたっものですから、動きません。下記のol-layerswitcher ver. 4.0.0をご使用ください。
<script src="https://unpkg.com/ol-layerswitcher@4.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-layerswitcher@4.0.0/dist/ol-layerswitcher.css" />
まだまだ不具合があります（×印）。追い追い修正します。
　コードを羅列するのは止めますので、「サンプルプログラムのURL」を開いてソースコードを表示してください。

　タイル地図の表示　　WMTSの表示
　
地理院地図と産総研シームレス地質図　防災科研地すべり地形分布図
サンプルプログラムのURL　サンプルプログラムのURL

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

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

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

　クリック位置の座標　　中心位置の座標
　
地図をクリックするとその点の緯度経度が分かります　地図中心位置の緯度経度
サンプルプログラムのURL　サンプルプログラムのURL

　地名検索　　地図の切り替え
　
地名検索（ルーペ印：検索，日本語可）　地図の切り替え*（右上のロゴマークで切り替えます。）
サンプルプログラムの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..

参考サイト：

初出日：2022/08/26
更新日：2022/09/18