Question

我正在尝试更改Vue2Leaflet中的图层顺序（因此当将顶层放置为数组中的第一项时将显示顶层，但是当我更新绘制图块图层的数组的排序时，地图不会显示反映变化。

Vue2Leaflet可以对图层进行排序吗？

这是显示问题的小提琴。

http://jsfiddle.net/billyhunt/yjpmLre6/32/

HTML

EXECUTE sp_setapprole @rolename = 'app-role', @password = `right pony duracell binderclip`, @encrypt = 'odbc'

.vue

<body>
  <div id="app">
  <button @click="reverse">Reverse Maps</button>
  <div>
    <b>Layer Order:</b>
  </div>
  <div v-for="tileProvider in tileProviders">
    {{tileProvider.name}}
  </div>
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer
        v-for="tileProvider in tileProviders"
        :key="tileProvider.id"
        :name="tileProvider.name"
        :url="tileProvider.url"
        layer-type="base"/>
    </l-map>
  </div>
</body>

Answer 1

我的水晶球告诉我您手动更改数组，您应该使用Vue的内置set方法（如dis）！

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

Answer 2

我知道了。该对象的关键是设置地图图层顺序，而不是数组索引。如果我更改:key="tileProvider.id"以引用数组索引，则图层将重新排序。

http://jsfiddle.net/billyhunt/xme403a9/7/

html

<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>

js

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();
    },

  }
});

使用Vue2Leaflet重新排序图层

2 个答案: