esri默认底图的加载

最新推荐文章于 2024-05-24 13:29:39 发布
最新推荐文章于 2024-05-24 13:29:39 发布
阅读量2.6k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/upcdxlq/article/details/78755178
版权

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

upcdxlq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【数据影像】加载历史影像（Esri Living Atlas）和谷歌影像
用地理来解释一下
07-11 4129
【数据影像】加载历史影像（Esri Living Atlas）和谷歌影像
【ArcGIS学习笔记】ArcMap加载在线地图
热门推荐
weixin_42311008的博客
04-24 1万+
最近整理了几种ArcMap加载在线地图的方法，将实测过都可使用的列举在下面，由于某些原因有可能随时不能使用了，也可能随时有新的方法，欢迎广大网友留言补充，我也会随时更新。
QGIS上常用底图插件上可用底图及其评价
codeuniverse的博客
10-27 1523
QGIS上常用底图插件上可用底图及其评价
【openlayers系统学习】4.1渲染矢量瓦片、VectorTile 层
最新发布
weixin_45213317的博客
05-24 956
学习如何使用OpenLayers的VectorTile图层加载矢量切片数据，并展示了一个简单的世界地图。
ArcGIS下载在线地图影像上篇（手工版）
GIS思维的博客
08-27 9186
ArcGIS下载在线地图影像上篇（手工版），下篇我们再来介绍如何通过脚本批量下载影像！
React Native for Arcgis 地图开发 图层配置 （二）
haibalai2009的博客
03-02 284
针对图层配置 VectorTiledLayer { “LayerId”: “矢量切片”, “LayerType”: “VectorTiledLayer”, “ServerAddr”: “https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer”, “DefineInfo”: { “Opacity”: 0.5, “Priority”: 5, “SubPriority”: 15, “QueryFlag”:
leaflet加载百度地图和其他网络在线地图
08-23
`esri-leaflet`主要设计用于Esri的ArcGIS服务，但通过一些技巧，我们可以尝试加载百度地图。这通常涉及到解析百度地图的WMS或TMS服务，将其转换为Esri的图层格式。然而，这可能需要对百度地图API和服务有深入理解，...
arcgis api 加载高德底图
07-21
basemap: null, // 不设置默认底图 ground: "world-elevation" // 设置地表模型，可选 }); var view = new MapView({ container: "map", map: map, center: [116.404, 39.915], // 北京经纬度 zoom: 10 })...
ArcGIS API 4.10加载谷歌地图
03-27
basemap: null // 清空默认底图 }); var view = new MapView({ container: "viewDiv", map: map, center: [-118.2437, 34.0522], // 洛杉矶经纬度 zoom: 10 }); // 创建谷歌地图图层 var googleLayer = ...
ArcGIS API for JavaScript4.10加载高德地图
01-16
basemap: null, // 清空默认底图 layers: [new GaodeMapLayer()], }); const view = new MapView({ container: "mapDiv", map: map, center: [116.40, 39.90], // 北京中心坐标 zoom: 10, }); ``` 在上述...
ArcGIS api for javascript 3.21版本加载高德地图
08-21
basemap: null, // 不使用ArcGIS默认的底图 center: [116.404, 39.915], // 北京坐标 zoom: 10 }); // 创建高德地图的TileLayer var gaodeLayer = new TileLayer({ url: ...
leaflet加载geojson叠加显示功能代码
11-21
`pane`属性指定图层应绘制在哪个地图的pane（面板）上，`overlayPane`是默认的覆盖物层，适合用于显示非地图底图的元素。 最后，`this.map.addLayer(this.bondarylayer)`将新创建的GeoJSON图层添加到地图上。为了使...
ArcGIS api for Javascript3.21版本加载天地图
08-29
basemap: "streets" // 默认底图，可根据需求更换为其他底图 }); ``` 3. 加载天地图服务：创建TiledMapServiceLayer对象，传入天地图的URL。注意，天地图的URL可能需要根据实际提供的服务进行调整。 ```...
arcgis简单示例
10-31
在ArcGIS中，"默认地图"通常指的是Esri提供的World Base Map，它包含了多种底图选项，如道路图、卫星图和混合图。用户可以直接从ArcGIS的图层库中选择这些预设的地图服务。同样，通过"添加数据"，选择"添加图层"，...
arcgis api for js 加载webMercator天地图.rar
07-11
basemap: null, // 清除默认底图 layers: [ // 添加天地图图层 new TiledMapServiceLayer({ url: "http://t0.tianditu.gov.cn/wmts/c瓷器/standard/wmts?Service=WMTS&Request=GetTile&Version=1.0.0&Layer=c...
first-map.rar_ArcGIS api for JS_arcgis_arcgis api js_arcgis js
09-20
描述中的"自带地图功能"很可能是指利用这个API加载Esri的默认底图或者自定义的地图数据。 2. 层级管理：API支持多层地图的管理，包括添加、删除、隐藏、显示、调整顺序等操作，使开发者能灵活控制地图内容的展示。 ...
arcgis web 显示加载arcgis server地图，提供查询标记功能
kangkang_style的博客
05-31 3437
使用web gis 加载显示arcgis for server 发布出来的地图，并提供查询标记显示属性功能 首先会通过arcgis server manager 开启由arcgis desktop 关联发布的mxd地图文件，具体过程arcgis server 的基础教程上都有，就不在赘言 直接贴代码： Test html,body,#map{ ma
esri arcgis二次转发地址跨域问题
fanquanlong的博客
12-25 1021
arcgis api for js3.X版本   esri.config.defaults.io.corsEnabledServers.push（""）需要将Server所在机器添加到corsEnabledServers这个列表里的.   arcgis api for js4.X版本 esri.config.defaults.io.corsEnabledServers.push()--&...
转载--ArcGIS服务器的feature图层限制
04-25 161
ArcGIS的feature图层（在JavaScript API中为esri.layers.FeatureLayer），在浏览器中进行显示时是有一定限制的。比如一个名为traffic的feature图层，该图层记录了该地区所有交通事故的发生地，其feature数量可想而知非常巨大。在浏览器中创建该图层的时候就要为其选定“模式”。如 var traffic =new esri.l...
esri 加载高德地图
07-30
如何在ESRI的GIS软件中加载高德地图呢？ 首先，我们需要使用ESRI的ArcGIS软件。在ArcGIS中，我们可以使用ArcGIS API for JavaScript来加载高德地图。这个API提供了一些功能强大的类和方法，使我们能够在Web应用程序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值