当前位置：服务支持 > 软件文章 > esri默认底图的加载方法：在WebGIS中快速调用

esri默认底图的加载方法：在WebGIS中快速调用

阅读数 18

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