内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet 地図に文字列を表示する
leaflet:divicon
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]] ====== Leaflet 地図に文字列を表示する ====== Leaflet 1系を使用してマーカーアイコンのかわりに地図上にテキストを表示します。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== マップ上にアイコンの替わりにテキストを表示できますが、次のような点から使い勝手はよくありません。 * ズームを変更しても文字の大きさは変化しないので。ズームを広域にすると東京都という文字で日本が隠れてしまいます。 * iconSizeを与えると表示領域が固定化され長い文字などは枠内に収まりません。 * 逆にiconSizeを与えないと千葉県のように縦書きになります。 * iconSizeを与えず横書きにするには、tableとスタイルシートにwhite-space: nowrapを使えば「埼玉県」のように可変長の文字に対応できますが、使用フォントなどによりブラウザごと長さが変わるのでアンカーを中央にする事ができません。 使えるシーンはズーム固定で、文字列が決まっていて短い場合などに限られそうです。 <html> <style> .divicon1{background:white; text-align: center; font-size: 20px;} .divicon2{color:red;font-size: 24px} .divicon3{background:white;font-size: 12px;white-space: nowrap} .divicon3b{background:#0ff} </style> <div id="mapid" style="width: 100%; height: 400px;"></div> <script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script> <script> /* 外部CSSの読み込み用 */ function cssLoad(cssFile){ if(document.all){ document.createStyleSheet(cssFile); }else{ var link = document.createElement("link"); link.rel = "stylesheet"; link.href = cssFile; link.type = "text/css" document.getElementsByTagName('head')[0].appendChild(link); } } cssLoad("https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.css"); function addOnload(evtFunc){ if(window.addEventListener) { window.addEventListener('load', evtFunc, false); } else if(window.attachEvent){ //IE用 window.attachEvent('onload', evtFunc); } else { //alert('window.onload エラー'); } } var mymap; addOnload(function(){ mymap = L.map('mapid'); L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, ' }).addTo(mymap); //divIconをセット var divIcon1 = L.divIcon({ html: '東京都 東京都<br>東京都 東京都<br>', className: 'divicon1', iconSize: [80,30], iconAnchor: [40,15], popupAnchor: [0, -10] }); var divIcon2 = L.divIcon({ html: '千葉県 千葉県<br>千葉県 千葉県', className: 'divicon2', }); var divIcon3 = L.divIcon({ html: '<table><tr><td class="divicon3b">埼玉県 埼玉県<br>埼玉県 埼玉県</td></tr></table>', className: 'divicon3', iconSize: [0,0] }); L.marker([35.6896, 139.6918], {icon: divIcon1}).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234], {icon: divIcon2}).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490], {icon: divIcon3}).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); </script> </html> <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ---- ===== ソースコード ===== <code javascript> <!-- テキスト装飾用のスタイルシート --> <style> .divicon1{background:white; text-align: center; font-size: 12px;} .divicon2{color:red;font-size: 24px} .divicon3{background:white;font-size: 12px;white-space: nowrap} .divicon3b{background:#0ff} </style> <div id="mapid" style="width: 100%; height: 400px;"></div> <script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script> <script> function cssLoad(cssFile){ if(document.all){ document.createStyleSheet(cssFile); }else{ var link = document.createElement("link"); link.rel = "stylesheet"; link.href = cssFile; link.type = "text/css" document.getElementsByTagName('head')[0].appendChild(link); } } cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css"); function addOnload(evtFunc){ if(window.addEventListener) { window.addEventListener('load', evtFunc, false); } else if(window.attachEvent){ //IE用 window.attachEvent('onload', evtFunc); } else { //alert('window.onload エラー'); } } var mymap; addOnload(function(){ mymap = L.map('mapid'); L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, ' }).addTo(mymap); //divIconをセット var divIcon1 = L.divIcon({ html: '東京都 東京都<br>東京都 東京都', className: 'divicon1', iconSize: [80,30], iconAnchor: [40,15], popupAnchor: [0, -10] }); var divIcon2 = L.divIcon({ html: '千葉県 千葉県<br>千葉県 千葉県', className: 'divicon2', }); var divIcon3 = L.divIcon({ html: '<table><tr><td class="divicon3b">埼玉県 埼玉県<br>埼玉県 埼玉県</td></tr></table>', className: 'divicon3', iconSize: [0,0] }); L.marker([35.6896, 139.6918], {icon: divIcon1}).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234], {icon: divIcon2}).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490], {icon: divIcon3}).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); }); </script> </code> <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ---- ===== 説明 ===== 基本的な部分は[[leaflet:icon]]と同じで、アイコン(L.icon)に代わって文字(L.divIcon)を使い文字装飾用のスタイルシート(css)が追加されているだけです。 L.divIconで表示する文字と装飾用のClass名(=divicon1)をセットします。あとのiconSize・iconAnchor・popupAnchorはアイコンと同じです。iconSizeを指定した場合は文字列が長いかったり大きいと正しく表示できません。逆にiconSizeを指定しないと縦向きに表示されます。要注意です。個人的には埼玉県の例のようにtableでラップしてwhite-space:nowrapで自動改行を防ぐのが最良な気がしますがOSやブラウザによって文字列長が変わるためアンカーをセンターにできません。 <code javascript> var divIcon1 = L.divIcon({ html: '東京都 東京都<br>東京都 東京都', //表示する文字 html使用可能 className: 'divicon1', //装飾用のclass名 iconSize: [80,30], //表示エリアの大きさ(幅,高さ) iconAnchor: [40,15], //アンカー位置:0,0を指定するとアイコンの左上が地図座標と一致します popupAnchor: [0, -10] //ポップアップの表示位置:0,0を指定するとアンカ位置からポップアップ表示します }); </code> アイコンのスタイルをセットします。 <code html> .divicon1{background:white; text-align: center; font-size: 12px;} </code>
leaflet/divicon.txt
· 最終更新: 2018/09/11 13:32 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ