Vuejs2 VUE2传单和esri传单插件整合。从基于ArcGIS的地图服务添加图层

为什么在使用基于ArcGIS的服务（例如

var{LMap，LTileLayer，LMarker}=vue2传单；
新Vue({
el:“#应用程序”，
组件：{LMap，LTileLayer，LMarker}，
数据（）{
返回{
缩放：13，
中心：L.latLng（47.413220，-1.219482），
//下面的URL不工作
网址：'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer“，//不工作
//下面的URL正在工作
//url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，//正在工作
属性：“©；参与者”，
标记：L.latLng（47.413220，-1.219482），
}
}
});

我能够找到一个解决办法，如这把小提琴所示

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>

---

正如@ghyps指出的，有一个选项可以传递

/{z}/{x}/{y}

；从文件中：

var{LMap，LTileLayer，LMarker}=vue2传单；
新Vue({
el:“#应用程序”，
组件：{LMap，LTileLayer，LMarker}，
数据（）{
返回{
缩放：5，
中心：L.latLng（47.413220，-1.219482），
网址：'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer/tile/{z} /{y}/{x}'，//不工作
//url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，//正在工作
属性：“©；参与者”，
标记：L.latLng（47.413220，-1.219482），
}
}
});

---

但是zoomlevel>5的平铺显然不可用

除了提供静态URL而不是模板（即URL缺少类似

{z}/{x}/{y}

）的内容之外，该页面上的描述似乎表明它不是光栅平铺源，而是一个查询服务。我不认为您所指的服务是一个互动程序服务器。也许让我重新表述我的问题，并询问我如何让Vue2Floate工作，正如在这个使用pure-Floate.js@ghybsFeel free编辑您的问题的小提琴中演示的那样。然而，请确保你没有挽救它，特别是一旦有了一些答案。否则，请随意打开一个新问题。该示例使用了esri传单（）插件-非常简短的研究表明，

Vue2Floate

不支持它。我觉得你的小提琴坏了

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

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

 }
});