BrainCopy: Open Layers

Abstract#

OSM Pluginにも使っているこのOpenLayers。すばらしいJavaScriptライブラリです。

サンプル[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の順番は、mapオブジェクトのlayers属性に入っている配列の順番。最初にあるlayerほど下に配置される。クリックするときに重なっていたら、上にあるLayerのFeatureが選択される。

普通にやると、横に一直線意図しない線が描かれてしまいます。ここ[3]で苦労しているようなので解読。結論としては、日付変更線つまり東経180度と西経180の線をまたぐLineStringは、交点を求めて2つに分けるのが正解らしい。簡易的にgreatCircle.jsを作って、解決。

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の指定が間違えていただけだった。エラーで出してくれよー。

[#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 .style .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