vueleaflet

vue-leaflet

Berikut adalah komponen VUE untuk peta selebaran, yang diilhami oleh react-leaflet dan vue-google-peta.

Komponen vue untuk leaflet.js

Perpustakaan ini kompatibel dengan Vue 3.0, dan selebaran 1.9.x.

Instalasi

npm install vueleaflet vue leaflet -save

Rintisan

Anda dapat memasukkan beberapa komponen bergaya Vue dalam file .vue untuk menggunakan leaflet.js, seperti tata letak.vue.

 < l-map
  id =" map1 "
  :options =" {
    zoom: 13,
    center: { lat: 51.505, lng: -0.09 },
    minZoom: 8,
    maxZoom: 15,
    attributionControl: true,
    zoomControl: true
  } "
>
  < l-tilelayer
    urlTemplate =" https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} "
    :options =" {
        attribution: 'vue-leaflet',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
      } "
  />
  < l-marker
    :latlng =" { lat: 51.505, lng: -0.09 } "
    :options =" {
      title: 'marker1',
      opacity: 1,
      draggable: true
    } "
  >
    < l-tooltip :options =" { content: 'tooltip with marker1' } " />
  </ l-marker >
  < l-marker
    :latlng =" { lat: 51.505, lng: -0.11 } "
    :options =" {
      title: 'marker2'
    } "
  >
    < l-popup :options =" { content: 'popup with marker2' } " />
  </ l-marker >
  < l-tooltip
    :options =" { content: 'tooltip standalone' } "
    :latlng =" { lat: 51.505, lng: 0 } "
  />
  < l-popup
    :options =" { content: 'popup standalone' } "
    :latlng =" { lat: 51.505, lng: 0 } "
  />
  < l-circle
    :latlng =" [51.508, -0.11] "
    :options =" {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    } "
  />
  < l-polygon
    :latlng =" [
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047]
    ] "
  />
</ l-map > 

Bangun Pengaturan

 # serve the example
npm run dev

# build the library
npm run build

# build the example
npm run build: example

Menyumbang

PR selamat datang

Lisensi

Mit