Vue.js 使用Vue2传单重新排列层_Vue.js_Leaflet

Vue.js 使用Vue2传单重新排列层

vue.js leaflet

Vue.js 使用Vue2传单重新排列层,vue.js,leaflet,Vue.js,Leaflet,我正在尝试更改Vue2Floaple中的图层顺序（因此，当顶层作为阵列中的第一项放置时，它将显示出来，但当我更新绘制平铺层的阵列排序时，贴图不会反映此更改 Vue2传单可以对层进行排序吗这是一把小提琴，显示问题所在 HTML 反向映射图层顺序： {{tileProvider.name} vue先生 var{LMap，LTileLayer，LMarker}=vue2传单；新Vue({ el:“#应用程序”，组件：{LMap，LTileLayer，LMarker}，数据（）{ 返回{

我正在尝试更改Vue2Floaple中的图层顺序（因此，当顶层作为阵列中的第一项放置时，它将显示出来，但当我更新绘制平铺层的阵列排序时，贴图不会反映此更改

Vue2传单可以对层进行排序吗

这是一把小提琴，显示问题所在

HTML


反向映射
图层顺序：
{{tileProvider.name}

vue先生

var{LMap，LTileLayer，LMarker}=vue2传单；
新Vue({
el:“#应用程序”，
组件：{LMap，LTileLayer，LMarker}，
数据（）{
返回{
缩放：13，
中心：L.latLng（47.413220，-1.219482），
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
属性：“©；参与者”，
标记：L.latLng（47.413220，-1.219482），
瓷砖供应商：[
{
id:1，
名称：'光'，
url:'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
},
{
id:2，
名字：'黑暗'，
url:'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
}
],
}
},
方法：{
反向：函数（）{
this.tileProviders.reverse（）；
},
}
});

我的水晶球告诉我手动更改阵列时，应该使用Vue的内置设置方法，如dis

setLayerMethod (layer) {
  this.$set(this.layers, '0', layer)
}

我的水晶球告诉我手动更改阵列时，应该使用Vue的内置设置方法，如dis

setLayerMethod (layer) {
  this.$set(this.layers, '0', layer)
}

我明白了。对象中的键是设置贴图层顺序，而不是数组索引。如果我更改

：key=“tileProvider.id”

以引用数组索引，则层会重新排序

html


如果能够通过修改数组来改变层的顺序，那就太好了。我知道我可以给我们一个控制层，但我还有一些其他层需要从另一个组件控制。
反向映射
图层顺序：
{{tileProvider.name}

var{LMap，LTileLayer，LMarker}=vue2传单；
新Vue({
el:“#应用程序”，
组件：{LMap，LTileLayer，LMarker}，
数据（）{
返回{
缩放：13，
中心：L.latLng（47.413220，-1.219482），
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
属性：“©；参与者”，
标记：L.latLng（47.413220，-1.219482），
瓷砖供应商：[
{
id:1，
zIndex:100，
名称：'光'，
url:'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
},
{
id:2，
zIndex:101，
名字：'黑暗'，
url:'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
}
],
}
},
方法：{
反向：函数（）{
this.tileProviders.reverse（）；
},
}
});

我找到了答案。对象中的键是设置贴图图层顺序，而不是数组索引。如果我更改

：key=“tileProvider.id”

以引用数组索引，则图层会重新排序

html


如果能够通过修改数组来改变层的顺序，那就太好了。我知道我可以给我们一个控制层，但我还有一些其他层需要从另一个组件控制。
反向映射
图层顺序：
{{tileProvider.name}

var{LMap，LTileLayer，LMarker}=vue2传单；
新Vue({
el:“#应用程序”，
组件：{LMap，LTileLayer，LMarker}，
数据（）{
返回{
缩放：13，
中心：L.latLng（47.413220，-1.219482），
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
属性：“©；参与者”，
标记：L.latLng（47.413220，-1.219482），
瓷砖供应商：[
{
id:1，
zIndex:100，
名称：'光'，
url:'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
},
{
id:2，
zIndex:101，
名字：'黑暗'，
url:'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'，
属性：“©；©；”，
}
],
}
},
方法：{
反向：函数（）{
this.tileProviders.reverse（）；
},
}
});

这里是vue对arraysI有限制的地方，我已经处理了其中一些问题，仍然找不到答案。这里是一个JSFIDLE，显示了问题。我向父元素添加了一个随机键。它不起作用，但我得到了一个不同的错误。也许可以探索一下。这里是vue对arraysI ha有限制的地方我已经处理了一些问题，但仍然找不到答案。这是一个JSFIDLE显示了问题。我向父元素添加了一个随机键。它不起作用，但我得到了一个不同的错误。也许可以探索一下？

setLayerMethod (layer) {
  this.$set(this.layers, '0', layer)
}

<body>
  <div id="app">
  <div>It would be great to be able to change the layer order by modifying the array.  I know I could us a control layer, but I have some other layers I want to control from another component.</div>
  <button @click="reverse">Reverse Maps</button>
  <div>
    <b>Layer Order:</b>
  </div>
  <div v-for="(tileProvider, index) in tileProviders">
    {{tileProvider.name}}
  </div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer
        v-for="tileProvider in tileProviders"
        :key="index"
        :name="tileProvider.name"
        :url="tileProvider.url"
        layer-type="base"/>
    </l-map>
  </div>
</body>

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
      tileProviders: [
        {
            id: 1,
          zIndex: 100,
          name: 'Light',
          url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
          attribution: '&copy; <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> &copy; <a href=\'https://carto.com/attributions\'>CARTO</a>',
        },
        {
            id: 2,
          zIndex: 101,
          name: 'Dark',
          url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
          attribution: '&copy; <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> &copy; <a href=\'https://carto.com/attributions\'>CARTO</a>',
        }
      ],
    }
  },
  methods: {
    reverse: function() {
      this.tileProviders.reverse();
    },

  }
});