This page (revision-1) was last changed on 20-Apr-2024 11:53 by Hiroaki Tateshita

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
20-Apr-2024 11:53 2 KB Hiroaki Tateshita

Page References

Incoming links Outgoing links
Open Layers
OpenLayers

Version management

Difference between version and

At line 1 added 31 lines
[{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]
This page (revision-) was last changed on 20-Apr-2024 11:53 by Hiroaki TateshitaTop