當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用ArcGIS JS API加载WMTS图层的两种方式
生活随笔
收集整理的這篇文章主要介紹了
使用ArcGIS JS API加载WMTS图层的两种方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 前言
- 方式一
- 方式二
前言
某些項目可能多方參與，每一方使用的GIS平臺有時會有所不同，這時為了統一各方地圖服務，通常會發布OGC標準的WMTS地圖服務供各方使用。ArcGIS API for JavaScript提供了專門加載WMTS服務的類WMTSLayer,通過一些配置參數后即可以添加圖層；另外ArcGIS API 還提供了類TiledMapServiceLayer,通過繼承該類也可以自定義一個加載WMTS服務的類，這種方式和上篇基于ArcGIS API for JavaScript加載天地圖相同。
方式一
直接使用WMTSLayer
API地址：https://developers.arcgis.com/javascript/3/jsapi/wmtslayer-amd.html
官方示例: https://developers.arcgis.com/javascript/3/jssamples/layers_wmtslayerresourceinfo.html
代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ArcGIS JS API疊加WMTS圖層(原生類WMTSLayer)</title> </head> <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"> <style>html,body,#map {height: 100%;width: 100%;margin: 0;padding: 0;} </style> <script src="https://js.arcgis.com/3.27/"></script><script>require(["esri/map","esri/layers/WMTSLayer","esri/layers/WMTSLayerInfo","esri/geometry/Extent","esri/layers/TileInfo","esri/SpatialReference","dojo/domReady!"], function (Map, WMTSLayer, WMTSLayerInfo,Extent, TileInfo, SpatialReference) {var map = new Map("map", {center: [86.9, 28],zoom: 3});var tileInfo = new TileInfo({"dpi": 96,//又稱ppi:pixel per inch"format": "format/png","compressionQuality": 0,"spatialReference": new SpatialReference({"wkid": 4326}),"rows": 512,"cols": 512,"origin": {"x": -180,"y": 90},"lods": [{"level": "0","scale": 236663484.36365247,"resolution": 0.5624999999999999}, {"level": "1","scale": 118331742.18182631,"resolution": 0.28125000000000017}, {"level": "2","scale": 59165871.090913124,"resolution": 0.140625}, {"level": "3","scale": 29582935.545456562,"resolution": 0.0703125}, {"level": "4","scale": 14791467.772728289,"resolution": 0.03515625000000002}, {"level": "5","scale": 395733.8863641415,"resolution": 0.017578125000000003}, {"level": "6","scale": 3697866.94318207,"resolution": 0.008789062499999998}, {"level": "7","scale": 1848933.471591035,"resolution": 0.004394531249999999}, {"level": "8","scale": 924466.7357955176,"resolution": 0.002197265625}, {"level": "9","scale": 462233.3678977588,"resolution": 0.0010986328125}, {"level": "10","scale": 231116.6839488794,"resolution": 0.00054931640625}, {"level": "11","scale": 115558.3419744397,"resolution": 0.000274658203125}]});var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({wkid: 4326}));var layerInfo = new WMTSLayerInfo({tileInfo: tileInfo,fullExtent: tileExtent,initialExtent: tileExtent,identifier: "SRTM_Color_Index",//通過元數據即XML文件可查看tileMatrixSet: "31.25m",format: "png",style: "default"});var resourceInfo = {version: "1.0.0",layerInfos: [layerInfo],copyright: "earthdata"};var options = {serviceMode: "KVP",resourceInfo: resourceInfo,layerInfo: layerInfo};wmtsLayer = new WMTSLayer("https://gibs.earthdata.nasa.gov/wmts/epsg4326/best", options);map.addLayer(wmtsLayer);}); </script><body><div id="map"></div> </body></html>效果圖
方式二
擴展TiledMapServiceLayer
API地址: https://developers.arcgis.com/javascript/3/jsapi/tiledmapservicelayer-amd.html
這部分直接參考基于ArcGIS API for JavaScript加載天地圖就可以了，天地圖的服務是符合OGC標準的WMTS服務。
總結
以上是生活随笔為你收集整理的使用ArcGIS JS API加载WMTS图层的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于ArcGIS API for Jav
- 下一篇： JavaScript计算汉明距离(Ham