[{PageViewPlugin}]
[JavaScript], [OSM Plugin], [Update layer on Map]
!!!Abstract
[OSM Plugin]にも使っているこのOpenLayers。すばらしい[JavaScript]ライブラリです。
!!!Topics
*基本
|サンプル[1]をいくつか眺めていると、何となく以下の方なアプローチが基本な気がする。
|(1)Layerオブジェクトたちにインプットするソースとスタイルを準備する。
|(2)MapオブジェクトにインプットするLayerを準備する。複数でもよい。Layerを作るときにはソースとスタイルがインプット。OSMレイヤーとその上に乗せるデータレイヤーの2層が基本か。
|(3)[JavaScript]上でMapオブジェクトを作り、準備していたLayerをlayersにインプットしつつ、html上のdivタグにidで紐づける
|(4)Mapオブジェクトにクリックしたときの動作などを追加する。
*地図に線を引く
|簡単にできそうだったが、ちょっと苦労したラインを書くところですが、[2]を参照して、なんとか行けそう。Google map でいうPolylineは、OLにおけるLineStringと理解しました。
*地図に円を描く
|ol.style.Circleを使う[6]。最近（2021年6月）のサンプルだとCircleStyleというのがあるらしい[7]。バージョンは6.5.0か。。そのうちバージョンアップしたほうがいいんだろうな。
*Layer
|layerの順番は、mapオブジェクトのlayers属性に入っている配列の順番。最初にあるlayerほど下に配置される。クリックするときに重なっていたら、上にあるLayerのFeatureが選択される。
*日付変更線をまたぐLineString
|普通にやると、横に一直線意図しない線が描かれてしまいます。ここ[3]で苦労しているようなので解読。結論としては、日付変更線つまり東経180度と西経180の線をまたぐLineStringは、交点を求めて2つに分けるのが正解らしい。簡易的に[greatCircle.js|https://github.com/tateshitah/gnssfinder/blob/master/gnss_webclient/WebContent/js/greatCircle.js]を作って、解決。
*OSMの標準タイルが使えない！？
|2020年、気が付くといつの間にか、OSMのタイルが表示されなくなっていた。エラーとしてはhttps://b.tile.openstreetmap.org/2/3/1.png net::ERR_NAME_NOT_RESOLVEDな感じがたくさん出ている。
|この記事[4]に近い。openstreetmap.orgにアクセスしてみると、「標準」レイヤーを選択していると地図が表示されなくなっている。「サイクリングマップ」レイヤーとかはちゃんと表示されるのだが。ちなみになぜか[OSM Plugin]はちゃんと動いている。
|仕方がないので、GSIのタイルに変更[5]。そうしたらちゃんと表示されたが、なぜかdragが効かない。ドラッグだけでなく、クリックイベントそのものに反応していない様子。→cssの指定が間違えていただけだった。エラーで出してくれよー。
!!!Reference
#[#1]OpenLayers Contributors, OpenLayers Examples, [http://openlayers.org/en/latest/examples/]
#[#2]Rider Matsup、2014年9月10日、OpenLayers 3 を使ってみよう（その5：テキストデータから折線データ読込み）、[http://matsup.blogspot.com/2014/09/openlayers-3_61.html]
#[#3]Stack Exchange, 2014年1月21日, Splitting Linestrings on the dateline with OpenLayers, [https://gis.stackexchange.com/questions/83425/splitting-linestrings-on-the-dateline-with-openlayers]
#[#4]LivingCG, 2020年1月6日, OpenStreetMapの地図が表示されない問題について, [https://livingcg.zendesk.com/hc/ja/articles/360038533191] 
#[#5]Geospatial Information Authority of Japan., 2020年6月21日アクセス、地理院タイル一覧, [https://maps.gsi.go.jp/development/ichiran.html] 
#[#6][ol|https://geoadmin.github.io/ol3/apidoc/ol.html]  [.style|https://geoadmin.github.io/ol3/apidoc/ol.style.html] .Circle, 2021年6月7日アクセス、[https://geoadmin.github.io/ol3/apidoc/ol.style.Circle.html]
#[#7]Custom Polygon Styles,  2021年6月7日アクセス、[https://openlayers.org/en/latest/examples/polygon-styles.html]