内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
🌏Leaflet(マップAPI)
»
Leaflet センタークロス表示
leaflet:cross
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[:programming_start]] ====== Leaflet センタークロス表示 ====== 地図の中心に十字マークを表示して中心がわかるようにします。 注意:「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== センタークロス画像{{https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif}}を画面中心に表示します。クロス画像上でのクリック操作は直下のマーカーに通過します。 <html> <div id="mapid" style="width: 100%; height: 400px;"></div> <script src="https://www.achiachi.net/blog/_outside/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://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); L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); //表示するセンタークロス画像を登録 var crossIcon = L.icon({ iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif', iconSize: [32, 32], iconAnchor: [16, 16] }); //センタークロス画像を登録と表示 var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap); //ムーブイベントでセンタークロスを移動 mymap.on('move', function(e) { crossMarker.setLatLng(mymap.getCenter()); }); }); </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> <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); L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都"); L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県"); L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県"); mymap.setView([35.6896, 139.6918], 9); //表示するセンタークロス画像を登録 var crossIcon = L.icon({ iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif', iconSize: [32, 32], iconAnchor: [16, 16] }); //センタークロス画像を登録と表示 var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false}).addTo(mymap); //ムーブイベントでセンタークロスを移動 mymap.on('move', function(e) { crossMarker.setLatLng(mymap.getCenter()); }); }); </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> ---- ===== 説明 ===== マップの基本部分については[[map]]をご覧ください。マーカー部分については[[marker]]をご覧ください。 センタークロス画像をL.iconに登録します <code javascript> var crossIcon = L.icon({ iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif', //↑センタークロス画像のURL iconSize: [32, 32], //アイコン表示サイズ(画像サイズと違えば拡大縮小されます) iconAnchor: [16, 16] //十字の中心位置を指定、0,0にするとアイコンの左上がセンターに表示されます }); </code> センタークロス画像を登録と表示、''getCenter()'' で中心座標を取得するので必ず ''setView()''より後に記述して下さい。 <code javascript> var crossMarker = L.marker( mymap.getCenter(),{ icon:crossIcon, //アイコン画像を指定 zIndexOffset:1000, //センタークロスを他のマーカーより上側表示します。 //マーカーが多数ある場合はより大きな値を指定して下さい10000など interactive:false //センタークロスのクリックイベントを下側のマーカーに通過させます }).addTo(mymap); </code> マップが移動した場合にイベントでセンタークロスを移動させます。 <code javascript> mymap.on('move', function(e) { crossMarker.setLatLng(mymap.getCenter()); }); </code>
leaflet/cross.txt
· 最終更新: 2018/09/11 22:36 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ