内容へ移動
あにねこ電脳覚書
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
tips:start
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Programming tips ====== プログラミングでちょっと役に立つヒント。備忘録として書いておく。 ===== OpenLayers ===== ==== spriteの使い方 ==== [[https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html|Icon Style]]を指定する際、 <code javascript> new Icon({ src: 'symbols.png', size: [icon.width, icon.height], offset: [icon.x, icon.y], </code> のようにsrcでスプライト画像、size、offsetでスプライト画像中の矩形領域を指定する。これらのパラメータの設定は、Mapbox GL JSの[[https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/|sprite]]のJSONに合わせて、 <code javascript> { "Summit" : { "height" : 24, "width" : 24, "y" : 0, "x" : 624, "pixelRatio" : 1 }, : } </code> のようなJSONファイルを読み込んで行うと、共通化の点で便利。 GeoJSONからアイコンの情報を読み込む際、[[https://github.com/gsi-cyberjapan/geojson-with-style-spec|スタイルつき GeoJSON 規約]]ではLeafletの仕様に合わせて _iconUrl というパラメータで画像URLを指定している。これは分かり易いが、スプライト画像が利用できないので良くない。_iconというパラメータで種別を指定するようにすべき。スプライト画像を使わない場合でも_iconから_iconUrlを得ることはLUTなどを用いて容易に実装でき、画像の置き場に関して自由度が増す。 ===== ルート地図(地理院Vector+Mapbox GL JS) ===== 地理院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) ===== こちらのサンプルは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.txt
· 最終更新: 2021/12/04 07:42 by
anineco
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ