あにねこ電脳覚書

ユーザ用ツール

サイト用ツール

トレース:
tips:start

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
tips:start [2020/05/22 00:39] – [ルート地図（地理院Vector+Mapbox GL JS）] aninecotips:start [2021/12/04 07:42] (現在) – [ルート地図（地理院Vector+Mapbox GL JS）] anineco
行 27: 行 27:
 GeoJSONからアイコンの情報を読み込む際、[[https://github.com/gsi-cyberjapan/geojson-with-style-spec|スタイルつき GeoJSON 規約]]ではLeafletの仕様に合わせて _iconUrl というパラメータで画像URLを指定している。これは分かり易いが、スプライト画像が利用できないので良くない。_iconというパラメータで種別を指定するようにすべき。スプライト画像を使わない場合でも_iconから_iconUrlを得ることはLUTなどを用いて容易に実装でき、画像の置き場に関して自由度が増す。 GeoJSONからアイコンの情報を読み込む際、[[https://github.com/gsi-cyberjapan/geojson-with-style-spec|スタイルつき GeoJSON 規約]]ではLeafletの仕様に合わせて _iconUrl というパラメータで画像URLを指定している。これは分かり易いが、スプライト画像が利用できないので良くない。_iconというパラメータで種別を指定するようにすべき。スプライト画像を使わない場合でも_iconから_iconUrlを得ることはLUTなどを用いて容易に実装でき、画像の置き場に関して自由度が増す。
 ===== ルート地図（地理院Vector+Mapbox GL JS） ===== ===== ルート地図（地理院Vector+Mapbox GL JS） =====
-地理院Vectorが全国整備されたので、[[https://anineco.nyanta.jp/gps-track-maps/mmap_ex2.html|サンプル]]を作ってみた。GeoJSONのレイヤを追加。追加レイヤに固有のスプライト画像を追加する方法が不明なので、取り敢えず使用するアイコン画像を個別にロードしている。高解像度モニタで見ると、やはりVectorの等高線は綺麗だ。+地理院Vectorが全国整備されたので、サンプルを作ってみた。GeoJSONのレイヤを追加。追加レイヤに固有のスプライト画像を追加する方法が不明なので、取り敢えず使用するアイコン画像を個別にロードしている。高解像度モニタで見ると、やはりVectorの等高線は綺麗だ。 
 +<html> 
 +<div style="text-align:center;"> 
 +<iframe width="640" height="480" src="/gps-track-maps/dist/mmap_geojson.html"> 
 +</iframe> 
 +</div> 
 +</html>
 ===== ルート地図（地理院Vector+OpenLayers） ===== ===== ルート地図（地理院Vector+OpenLayers） =====
-こちらの[[https://anineco.nyanta.jp/gps-track-maps/dist/index.html|サンプル]]はOpenLayers 6.3.1+ol-mapbox-styleによるもの。軌跡のアイコン画像ではスプライトを使っていない。割とサクッと動いた。地図のスクロールなどでPCの負荷が大きいのか、カクカクする。これは多分、スタイルのfilterの計算に時間が+こちらのサンプルはOpenLayers ver.6+ol-mapbox-styleによるもの。割とサクッと動いた。軌跡の表示はなし。地図のスクロールなどでPCの負荷が大きいのか、カクカクする。これは多分、適用するスタイルをfilterで線形に探索しているところに時間がかかっている。 
 +<html> 
 +<div style="text-align:center;"> 
 +<iframe width="640" height="480" src="/gps-track-maps/dist/omap_gsibv.html"> 
 +</iframe> 
 +</div> 
 +</html> 
 +===== 山名一覧と点名一覧（地理院Vector） ===== 
 +地理院Vectorから山名と読み仮名の情報を抽出して、地形図に重ね合わせて表示した。縮尺によって表示される山名が増減する。一尺八寸山は難読山名No.1の山。 
 + 
 +<html> 
 +<div style="text-align:center;"> 
 +<iframe width="640" height="480" src="/example/yamamap.html"> 
 +</iframe> 
 +</div> 
 +</html> 
 + 
 +次は地理院ベクターの同様な応用で、三角点の点名を表示したもの。三角点の詳細な情報は[[https://sokuseikagis1.gsi.go.jp/top.html|基準点等成果閲覧サービス]]で調べられるが、点名が地図をスクロールするだけで一覧できる点が便利である。 
 + 
 +<html> 
 +<div style="text-align:center;"> 
 +<iframe width="640" height="480" src="/example/gcpmap.html"> 
 +</iframe> 
 +</div> 
 +</html> 
tips/start.1590075596.txt.gz · 最終更新: by anineco