javascript - 在Leaflet中使用ESRI街道 map

如何将ESRI街道地图（https://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri.WorldStreetMap）集成到我的传单javascript中。以下是我的操作，但地图未加载。

<script src="https://unpkg.com/[email protected]"></script>
<script> var map = L.map('map1').setView([48.135, 11.582], 3);
L.esri.basemapLayer('Streets').addTo(map);

     L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map /MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS,    Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand),  TomTom, 2012'}).addTO(map);

最佳答案

您混用了两种完全不同的技术来加载同一平铺的地图服务。

使用esri leaflet插件时，您只能按名称提及Esri底图。当用户自动平移和缩放时，Leaflet的归因控件将自动填充相关的积分，以识别该区域中的数据提供者。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
  var map = L.map("map").setView([37.75, -122.23], 10);
  L.esri.basemapLayer('Streets').addTo(map);
</script>

第二种技术是使用Leaflet自己的TileLayer类加载Esri底图。您尝试输入错误，但是手动引用服务网址并跳过使用插件当然有效。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script>
var map = L.map("map").setView([37.75, -122.23], 10);

var serviceUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
var credits = 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012 etc. etc. etc.';
// not addTO(map)
L.tileLayer(serviceUrl, { attribution: credits }).addTo(map);
</script>

无论采用哪种方法，当您在Leaflet应用程序中显示ArcGIS Online服务时，Esri都会显示two requirements


  
  您需要一个（免费）ArcGIS Online帐户。
  您必须显示“ Powered by Esri”并识别所有数据提供者。