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 を作って、解決。 |
- 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 .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
