leaflet常用機能

概要
純粋なJavaScriptは、地図上で操作(座標点、経路、曲線など)を行うライブラリの一つで、操作地図APIのみを提供し、実際にある地図をロードし、開発者が決定します.
地図オブジェクトを作成
1)ページはdivを作成し、div属性を設定して画面全体に広げ、divの中のid属性を設定します.leaflette APIを使って地図オブジェクトを初期化します.

// mapDiv id  ,setView  1:             2:       (    ,      ) 
const map = L.map('mapDiv').setView([33.6528734492,104.7626939500], 5)

3)地図のタイル層をロードする
一般API
tileLayer
役割:ページにタイル地図の画像をロードする

  const corner1 = L.latLng(50.4838600000, 77.1125230000) //      
  const corner2 = L.latLng(22.5557360000, 138.0866980000) //      
  const bounds = L.latLngBounds(corner1, corner2) //   2            
  const attr = ' Map data © OpenStreetMap contributors, © キャリアDB' 
  L.tileLayer(url, {
    maxZoom: 10, //      10
    minZoom: 1, //      1
    bounds: bounds, //           
    attribution: attr //              
  }).addTo(map)
  map.setMaxBounds(bounds) //        ,       ,       ,     

マーカー
役割:与えられた経緯度に基づいて、地図にデフォルトのマーカーをロードします.

// title:         ,       opacity:        
// zIndexOffset:         ,  :         ,      ,         
L.marker([39.9094390677,116.3699341216], {title: 'this is title', opacity: '0.8', zIndexOffset: 9999}).addTo(map)

2)カスタムiconの読み込み(一般的には写真)

// iconUrl:   url   iconSize:     
 const myIcon = L.icon({
    iconUrl: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
    iconSize: [80, 30]
  });
  L.marker([40, 108], {icon: myIcon, alt: 'this is google'}).addTo(map);

ポップ
役割:地図に文字を表示する

/*
* closeButton:        
* autoClose:    openOn   ,              
* closeOnClick:     ,      popup
* className:    class   ,      popup   ,     class     
* openOn():                 
* addTo():   popup      
* */
L.popup({closeButton: true, autoClose: true, closeOnClick: false, className: 'my-popup'})
  .setLatLng([38, 98])
  .setContent('
Hello world!
This is a nice popup.
')
  .addTo(map);

L.popup({closeButton: true, autoClose: true, closeOnClick: false})
  .setLatLng([37, 98])
  .setContent('
Hello world!')
  .addTo(map);

polyline
作用:経緯度を接続することによって、地図上に一本の線を形成し、出発からアニメーション効果を終了するには、サードスクウェアLeaflet.Polyline.SnakeAnim参照アドレスを使用することができます.https://github.com/zettvs/Lea...

// css  
/*stroke-dasharray:  svg    ,    ,     ,
    2   ,  1:          2:           ,          ,         
  stroke:   svg   
*/
.testSvg {
    animation: animate 0.5s linear infinite;
    stroke-dasharray: 10;
    stroke: blue;
}
// js  
const polyline2 = L.polyline(latlngs, {weight: 6, className: 'testSvg', opacity: 0.5})
    .addTo(leafletMap);
leafletMap.fitBounds(polyline2.getBounds());

  const polyline1 = L.polyline(latlngs, {color: '#fff', weight: 6, opacity: 0.5})
.addTo(leafletMap);
leafletMap.fitBounds(polyline1.getBounds());

circele
作用:与えられた経緯度の位置に円を形成します.

/*
* radius:    
* weight:           
* color:         
* fillColor:       
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: 'red', fillColor: 'blue'}).addTo(map)

Jojson
作用:Json形式と似ています.地理データを表します.地図上である地域を色や背景で覆ってもいいです.この技術を使って住所を参考してください.http://geojson.io/#map=2/20.0...https://zh.wikipedia.org/wiki...
使い方:

// color:      weight:       fillColor:      fillOpacity:     
L.geoJSON(geoJson  , {
      style: function () {
        return {
          color: '#263238',
          weight: 0.8,
          fillColor: '#002132',
          fillOpacity: 0.5
        };
      }
    })