leaflet学習チュートリアル(一)

11135 ワード

leaflet

Leafletはモバイル機器に適したインタラクティブな地図を構築するために開発された現代的でオープンソースのJavaScriptライブラリです.コードは33 KBしかないが、オンラインマップを開発する機能の大部分を持っている.Leafletの設計は簡便で、高性能と可用性の良い哲学思想を堅持し、すべての主要なデスクトップとモバイルプラットフォームで効率的に運営することができ、現代のブラウザではHTML 5とCSS 3の優位性を利用し、同時に古いブラウザアクセスをサポートする.プラグイン拡張をサポートし、使いやすいAPIドキュメントと簡単で読み取り可能なソースコードがあります.Leafletの強力なオープンソースライブラリプラグインは、地図サービス、データ提供、データフォーマット、地理符号化、ルートとルート検索、地図コントロール、インタラクティブなどのプラグインを含む地図アプリケーションのさまざまな面に関連して140以上あります.これらのコントロールはleafletの機能を豊富にし、カスタマイズされたコントロールを容易に実現し、拡張性に優れています.
###LeafLetクイックスタートチュートリアルこのチュートリアルでは、Leafletを使用して地図をロードしたり、タグを使用したり、折れ線を引いたり、ウィンドウをポップアップしたりして、イベントを処理する方法を一歩一歩指導します.###leafletで地図をすばやくロードする方法
CSSファイルを導入
JavaScript
ページには、としてdivのコンテナ

がされている.
map のさ#map { height: 180px; } をする.
#### とズームレベルvar map = L.map('map').setView([51.505, -0.09], 13);レイヤー

     L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-        SA, Imagery © Mapbox',
     maxZoom: 18
   }).addTo(map);`

### 、、を ##### を

    var marker = L.marker([51.5, -0.09]).addTo(map);

##### を

    var circle = L.circle([51.508, -0.11], 500, {
     color: 'red',
        fillColor: '#f03',
     fillOpacity: 0.5
    }).addTo(map);

##### を

    var polygon = L.polygon([
     [51.509, -0.08],
     [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(map);

######オーバーライドの、、にフライアウトを

    marker.bindPopup("Hello world!
I am a popup.").openPopup();
    circle.bindPopup("I am a circle.");
    polygon.bindPopup("I am a polygon.");

#####イベントの

    function onMapClick(e) {
     alert("You clicked the map at " + e.latlng);
    }
    map.on('click', onMapClick);

ios WKWebViewとJSのインタラクティブ実戦テクニック

Geek風の投影片を作る