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

Reference#

  1. [#1]OpenLayers Contributors, OpenLayers Examples, http://openlayers.org/en/latest/examples/
  2. [#2]Rider Matsup、2014年9月10日、OpenLayers 3 を使ってみよう（その5：テキストデータから折線データ読込み）、http://matsup.blogspot.com/2014/09/openlayers-3_61.html
  3. [#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. [#4]LivingCG, 2020年1月6日, OpenStreetMapの地図が表示されない問題について, https://livingcg.zendesk.com/hc/ja/articles/360038533191
  5. [#5]Geospatial Information Authority of Japan., 2020年6月21日アクセス、地理院タイル一覧, https://maps.gsi.go.jp/development/ichiran.html
  6. [#6]ol .style .Circle, 2021年6月7日アクセス、https://geoadmin.github.io/ol3/apidoc/ol.style.Circle.html
  7. [#7]Custom Polygon Styles, 2021年6月7日アクセス、https://openlayers.org/en/latest/examples/polygon-styles.html