tips:start
文書の過去の版を表示しています。
目次
Programming tips
プログラミングでちょっと役に立つヒント。備忘録として書いておく。
OpenLayers
spriteの使い方
Icon Styleを指定する際、
new Icon({ src: 'symbols.png', size: [icon.width, icon.height], offset: [icon.x, icon.y],
のようにsrcでスプライト画像、size、offsetでスプライト画像中の矩形領域を指定する。これらのパラメータの設定は、Mapbox GL JSのspriteのJSONに合わせて、
{ "Summit" : { "height" : 24, "width" : 24, "y" : 0, "x" : 624, "pixelRatio" : 1 }, : }
のようなJSONファイルを読み込んで行うと、共通化の点で便利。
GeoJSONからアイコンの情報を読み込む際、スタイルつき GeoJSON 規約ではLeafletの仕様に合わせて _iconUrl というパラメータで画像URLを指定している。これは分かり易いが、スプライト画像が利用できないので良くない。_iconというパラメータで種別を指定するようにすべき。スプライト画像を使わない場合でも_iconから_iconUrlを得ることはLUTなどを用いて容易に実装でき、画像の置き場に関して自由度が増す。
ルート地図(地理院Vector+Mapbox GL JS)
地理院Vectorが全国整備されたので、サンプルを作ってみた。GeoJSONのレイヤを追加。追加レイヤに固有のスプライト画像を追加する方法が不明なので、取り敢えず使用するアイコン画像を個別にロードしている。高解像度モニタで見ると、やはりVectorの等高線は綺麗だ。
ルート地図(地理院Vector+OpenLayers)
こちらのサンプルはOpenLayers 6.3.1+ol-mapbox-styleによるもの。軌跡のアイコン画像ではスプライトを使っていない。割とサクッと動いた。地図のスクロールなどでPCの負荷が大きいのか、カクカクする。これは多分、適用するスタイルをfilterで線形に探索しているところに時間がかかっている。
ウェブページにおける文字列の縦書き
tips/start.1590982270.txt.gz · 最終更新: 2020/06/01 12:31 by anineco