Vue2Leaflet和esri-leaflet插件集成。从基于ArcGIS的地图服务添加图层

Question

在使用基于ArcGIS的服务(如https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer )中的底图时，为什么切片图层不显示

Link to fiddle

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 BELOW NOT WORKING
      url:'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer', //NOT WORKING
      //URL BELOW WORKING
      //url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //WORKING 
      attribution:'&copy; <a href="http://osm.org   /copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
   }
   }
});

Answer 1

我能够获得一个解决方法，如此fiddle http://jsfiddle.net/oskgfxpz/中所示

HTML

     <l-map style="height:400px;background-color: rgb(123, 173, 223);" ref="map"    :zoom=2 :center="[0.02, 36.9]">

        <l-marker :key="2" :lat-lng="[0.02, 36.9]">
          <l-popup :content="'Example tooltip'"></l-popup>
        </l-marker>
     </l-map>

JAVASCRIPT

var { LMap, LTileLayer, LGeoJson, LMarker, LPopup } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
  LMap,
  LTileLayer,
  LGeoJson,
  LMarker,
  LPopup
 },
 data () {
   return {
  }
 },
 mounted() {

  const UNbaseMap = L.esri.tiledMapLayer({
  url: 'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer',
  maxZoom: 5,
  minZoom: 2
  });

  this.$refs.map.mapObject.addLayer(UNbaseMap);

 }
});

Answer 2

正如@ghyps指出的那样，有一个选项可以传递文档中的/{z}/{x}/{y}：

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;
    
new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:5,
      center: L.latLng(47.413220, -1.219482),
      url:'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer/tile/{z}/{y}/{x}', //NOT WORKING
      //url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //WORKING 
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  }
});

但是显然zoomlevel >5的磁贴是不可用的