javascript - 将 ESRI 街道 map 与 Leaflet 结合使用

Question

如何将 ESRI 街道 map ( https://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri.WorldStreetMap ) 集成到我的传单 JavaScript 中。以下是我所做的，但 map 无法加载。

<script src="https://unpkg.com/esri-leaflet@2.0.6"></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); 

Answer 1

您混合了两种完全不同的技术来加载相同的平铺 map 服务。

当您使用esri leaflet时插件，您只需提及 Esri basemap 的名称即可。当用户自动平移和缩放时，Leaflet 的归属控件将自动填充识别该区域数据提供商的相关信用。

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

第二种技术是使用Leaflet自己的TileLayer用于加载 Esri basemap 的类。您自己的尝试中出现了拼写错误，但手动引用服务 URL 并跳过使用插件肯定是有效的。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2"></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>

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

1. You need a (free) ArcGIS Online account.
2. You must display 'Powered by Esri' and recognize all data providers.