Изменение порядка слоев с помощью Vue2Leaflet - PullRequest
Новая
       9

Изменение порядка слоев с помощью Vue2Leaflet

0 голосов
/ 28 января 2019

Я пытаюсь изменить порядок слоев в Vue2Leaflet (поэтому верхний слой будет отображаться, когда он помещен в качестве первого элемента в массиве, но когда я обновляю сортировку массива, рисуя слои листов, карта неотразить изменение.

Может ли Vue2Leaflet сортировать слои?

Вот скрипка, показывающая проблему.

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

HTML 

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

.vue 

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

  }
});

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Я понял это.Ключ от объекта устанавливал порядок слоя карты, а не индекс массива.Если я изменю :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();
    },

  }
});
0 голосов
/ 28 января 2019

Мой хрустальный шар говорит мне, что вы меняете массив вручную, вы должны использовать встроенный метод Vue, например, dis! 

setLayerMethod (layer) {
  this.$set(this.layers, '0', layer)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...