设置多个圆圈组件显示在地图上

vue2leaflet 在线实验

参考：https://korigan.github.io/Vue2Leaflet/#/components/l-circle/

设置多个同类型组件在地图上

 

<template>
  <l-map style="height: 100%; width: 100%" :zoom="zoom" :center="center">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-circle v-for="circle in circles"
      :lat-lng="circle.center"
      :radius="circle.radius"
      :color="circle.color"
    />

  </l-map>
</template>

<script>

Vue.component('l-map', Vue2Leaflet.LMap)
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer)
Vue.component('l-circle', Vue2Leaflet.LCircle)

export default {
  data () {
    return {
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      zoom: 8,
      center: [47.313220, -1.319482],
      circles: [{
        center: [47.413220, -1.0482],
        radius: 4500,
        color: 'red'
      },
      {     
        center: [47.1960115, -1.4841843],
        radius: 4500,
        color: 'red'
      }]
    };
  }
}
</script>