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

完整加载代码如下：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>WMSLayer - 4.5</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>
  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WMSLayer",
      "esri/layers/WMTSLayer",
      "esri/layers/FeatureLayer",
      "esri/layers/WebTileLayer",
      "esri/layers/TileLayer",
      "esri/layers/VectorTileLayer",
      "esri/widgets/Legend",
      "dojo/domReady!"
    ], function(
      esriConfig,
      Map,
      MapView,
      WMSLayer,
      WMTSLayer,
      FeatureLayer,
      WebTileLayer,    
      TileLayer,  
      VectorTileLayer,
      Legend
    ) {
     esriConfig.request.corsEnabledServers.push(
        "http://t0.tianditu.com/","http://localhost:8080/","http://services.arcgisonline.com/","http://t0.tianditu.cn/");
     //正确的web投影坐标系

/*     //webtilelayer
     var EsriSatelliteWebtilelayer = new WebTileLayer({
      urlTemplate:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{level}/{row}/{col}"
     });
     
     var EsriSatelliteTileLayer = new TileLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
     });
*/
     var EsrriTransportlayer = new WMTSLayer({
      url:"http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/WMTS",
      serviceMode:"RESTful"
     });
    //streets
     var EsriStreetlayer =new WMTSLayer({
      url:"http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //satellite
     var EsriSatellitelayer =new WMTSLayer({
      url:"http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //hybrid
      var EsriHybridlayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
      //topo
      var EsriTopolayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
      //gray
      var EsriGraylayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //dark-gray
      var EsriDarkgraylayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
      //oceans
     var EsriOceanslayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //national-geographic
     var EsriNationalgeographiclayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //terrain
     var EsriTerrainlayer =new WMTSLayer({
      url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/WMTS",
      serviceMode:"RESTful" 
     });
     //osm:并非acgisserver发布的服务
     var EsriOsmlayer =new WebTileLayer({
      urlTemplate:"https://b.tile.openstreetmap.org/{level}/{col}/{row}.png"
     });
     //dark-gray-vector
     var EsriDarkgrayvectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
     EsriDarkgrayvectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/5ad3948260a147a993ef4865e3fad476/resources/styles/root.json");
     //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");
     //streets-vector
    var EsriStreetsvectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
    EsriStreetsvectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/a60a37a27cc140ddad15f919cd5a69f2/resources/styles/root.json?f=json");
    //topo-vector
    var EsriTopovectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
    EsriTopovectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/86d5ed4b6dc741de9dad5f0fbe09ae95/resources/styles/root.json");
    //streets-night-vector
    var EsriStreetsnightvectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
    EsriStreetsnightvectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/92c551c9f07b4147846aae273e822714/resources/styles/root.json");
    //streets-relief-vector
    var EsriStreetsreliefvectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
    EsriStreetsreliefvectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/78c0a9ab4fbf4198a8b951848aab19d8/resources/styles/root.json");
    //streets-navigation-vector
     var EsriStreetsnavigationvectorlayer =new VectorTileLayer({
      url:"https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer"
     });
    EsriStreetsnavigationvectorlayer.loadStyle("https://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json");

var map = new Map({
      basemap:"satellite"
      // layers:[EsriSatellitelayer]//satellite
      // layers:[EsriSatellitelayer,EsriHybridlayer]//hybrid
      //layers:[EsriTopolayer]//topo
      //layers:[EsriGraylayer]//gray
      //layers:[EsriDarkgraylayer]//dark-gray
      //layers:[EsriOceanslayer]//oceans
      //layers:[EsriNationalgeographiclayer]//national-geographic
      //layers:[EsriTerrainlayer]//terrain
      //layers:[EsriOsmlayer]//osm
      //layers:[EsriDarkgrayvectorlayer]//dark-gray-vector
      //layers:[EsriGrayvectorlayer]//gray-vector
      //layers:[EsriStreetsvectorlayer]//streets-vector
      //layers:[EsriTopovectorlayer]//topo-vector
      //layers:[EsriStreetsnightvectorlayer]//streets-night-vector
      //layers:[EsriStreetsreliefvectorlayer]//streets-relief-vector
      //layers:[EsriStreetsnavigationvectorlayer]//streets-navigation-vector
      });

var view = new MapView({
        container: "viewDiv",
        map:map
      });

view.on("click",function(evt){
             alert("经纬："+evt.mapPoint.longitude+":"+evt.mapPoint.latitude+"\n"+"投影："+evt.mapPoint.x+":"+evt.mapPoint.y+"\n"+"spatialReference:"+JSON.stringify(view.spatialReference));
          });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

esri默认底图的加载相关推荐

  1. GIS开发：mapbox gl几种底图的加载

    mapbox gl除了加载客户端可控制样式的底图,也能够加载常规的影像底图. 这里指发布的影像或者矢量地图切片,在线经常使用的有天地图,谷歌地图.高德百度等,底图的加载,mapbox gl中,主要是修 ...

  2. html分页自动加载数据,硕正控件默认会自动加载数据

    硕正控件 autoLoad 页面加载时是否自动加载表格数据 默认true,如果自己需要根据页面条件查询数据  建议设置为false  自己去查询加载数据. 硕正表格控件API 属性 属性的定义, 例如 ...

  3. img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片

    文章目录 前言 一.加载前 二.加载成功 三.加载失败 总结 前言 开发过程中,我们希望图片在加载失败的时候会替换成加载失败的图片,同时为了更好的体验,加载前最好也要有一张占位图片,即实现加载前显示一 ...

  4. ArcGIS加载天地图底图

    1.天地图注册并申请服务器端Key 1.1 天地图API申请 在该网址http://lbs.tianditu.gov.cn/home.html,"控制台"--"创建新应用 ...

  5. [html] img中的src加载失败时如何用默认图片来替换呢？

    [html] img中的src加载失败时如何用默认图片来替换呢? img有onerror属性,加载失败时触发error事件 但是这种解决方法在error里面替换的默认图片也加载失败的时候会导致问题,需 ...

  6. img图片加载失败时，展示默认图片的方法

    1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...

  7. 【软件工具】PIE-Basic、ArcMap、ArcGIS Pro和QGIS 加载在线底图和影像

    文章目录 0.前言 1. PIE-Basic 加载 2. ArcMap 利用在线地图插件forArcMap进行加载 3. ArcGIS Pro加载 4.QGIS 加载 结束语 参考资料 0.前言 上图 ...

  8. vue图片img加载失败显示自定义默认图片(缺省图)

    vue图片img加载失败显示自定义默认图片(缺省图) 1.图片加载示例  2.加载失败显示默认图片  3.加载失败默认图片代码处理 <div class="book-img" ...

  9. GEE加载哨兵数据以及ESRI、EAS、FROM地表覆被产品

    因为需要对比查看ESRI.EAS.FROM数据在水体提取上的效果 所以下面是用GEE加载出哨兵数据和这三种土地覆被数据的代码: esri2020年地表覆被数据: // 边界数据var core_are ...

最新文章

  1. 如果优美的将pytorch的卷积为自己所用
  2. ElementUI中Transfer穿梭框的使用、赋值取值进而实现新增和编辑功能
  3. 04. 二维数组中的查找
  4. java package public_Java中的public,protected,package-private和private有...
  5. 机器学习入门——numpy与matplotlib的使用简介
  6. 车联网之：操作系统QNX
  7. Android网络编程(一次网络请求)
  8. LM2596DC -DC模块测试记录
  9. app 手机网页一些小知识
  10. DHCP协议以及其配置
  11. CC2530定时器1使能
  12. mingw32-make[1]: *** [debug/qrc_resource.cpp] Error 1
  13. SPSS syntax体验：设置虚拟变量与Formats
  14. md文件如何编辑和转换（不依赖插件Markdown Viewer）
  15. docker常用的命令笔记
  16. IDEA上连接MYSQL数据库
  17. Calendars and DateFormats should not be static
  18. 极速搭建vanish - 安装/配置/维护
  19. netstat成昨日黄花，SS和IP命令接力？
  20. android手环通信协议,BLE通信协议

热门文章

  1. JAVA毕设项目中小型企业资金流管理系统（java+VUE+Mybatis+Maven+Mysql）
  2. 全面 Severless 化只需要 7天！看南瓜电影的云上升级
  3. 极案例 | 守护地铁运营“生命线”，极视角与深圳地铁运管办共建“AI智能巡检系统”
  4. matlab的程序设计心得和体会,程序设计心得体会(多篇).doc
  5. 基于BERT的新闻文本分类
  6. \t\t【团队精神】荣辱与共 交流分享 精诚协作 尊重理解 ——程序员应知
  7. 游戏视觉内容逆向破解
  8. springboot+vue+Elementui农家乐管理系统-住宿-美食-活动
  9. 口罩机远程监控运维解决方案
  10. PLC实训3：计数器控制电机循环启停