使用Vue2Leaflet重新排序图层
使用Vue2Leaflet重新排序图层
提问于 2019-01-29 02:59:44
我正在尝试更改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:'© <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: '© <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> © <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: '© <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> © <a href=\'https://carto.com/attributions\'>CARTO</a>',
}
],
}
},
methods: {
reverse: function() {
this.tileProviders.reverse();
},
}
});回答 2
Stack Overflow用户
发布于 2019-01-29 22:37:31
我想通了。来自对象的关键字是设置地图图层顺序，而不是数组索引。如果我将: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:'© <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: '© <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> © <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: '© <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap</a> © <a href=\'https://carto.com/attributions\'>CARTO</a>',
}
],
}
},
methods: {
reverse: function() {
this.tileProviders.reverse();
},
}
});Stack Overflow用户
发布于 2019-01-29 04:02:51
我的水晶球告诉我手动更改数组，您应该使用Vue的内置set方法，如dis！
setLayerMethod (layer) {
this.$set(this.layers, '0', layer)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54408585
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号