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

Question

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

链接到小提琴

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

我能够得到一个解决方法，如这个小提琴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),
    }
  }
});

但显然缩放级别 > 5 的图块不可用