esri默认底图的加载

以satellite为例

方式一:

var map = new Map({

basemap:”satellite”

});

方式二:

 var EsriSatelliteWebtilelayer = new WebTileLayer({
      urlTemplate:”https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{level}/{row}/{col}”
     });

方式三:

 var EsriImglayer = new WMTSLayer({
      url:”http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/WMTS”,
      serviceMode:”RESTful”
     });

方式四:

     var EsriSatelliteTileLayer = new TileLayer({
      //attributionDataUrl:”https://static.arcgis.com/attribution/World_Imagery”,
      url:”https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer”
     });

方式一:

依次请求

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer?f=json

https://static.arcgis.com/attribution/World_Imagery?f=json

//

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tilemap/1/0/0/32/32

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/1/0/1

//

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tilemap/2/0/0/32/32

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/2/2/2

方式二:

直接请求切片:https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/1/1/1

方式三:

依次请求

元数据:https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/WMTS/1.0.0/WMTSCapabilities.xml

切片:https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/1/1/1.jpg

方式四:

是方式一的实际实现方式

二、比较特殊的非srcgisserver服务:

1、osm(openstreetmap),默认第一种加载方式为直接加载图片

所以,需要利用WebTileLayer进行加载(注意col和row的顺序,注意调整)

     var EsriOsmlayer =new WebTileLayer({
      urlTemplate:”https://b.tile.openstreetmap.org/{level}/{col}/{row}.png”
     });

2、vector tile矢量切片服务

  //以dark-gray-vector为例
     var EsriDarkgrayvectorlayer =new VectorTileLayer({
      url:”https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer”
     });

依次发送请求

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer?f=json

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/resources/styles/root.json

https://static.arcgis.com/attribution/Vector/v1/World_Basemap?f=json

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/resources/sprites/sprite.json

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/resources/sprites/sprite.png

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tilemap

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/0/0/0.pbf

https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/resources/fonts/Arial%20Regular/0-255.pbf

不同的style渲染

 //gray-vector
     var EsriGrayvectorlayer =new VectorTileLayer({
      url:”https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer”
     });
     EsriGrayvectorlayer.loadStyle(“https://www.arcgis.com/sharing/rest/content/items/5dd75c1a544b46c3af01ba5736bfdfa0/resources/styles/root.json”);

完整加载代码如下:



 
 
  WMSLayer – 4.5