前言

某些项目可能多方参与，每一方使用的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 JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
Spring加载properties文件的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取pro ...
Android加载GIF图片的两种方式
飞哥语录:得到一件东西最好的方式是让自己配得上它. 方式一:使用第三开源框架直接在布局文件中加载gif 1.在工程的build.gradle中添加如下 buildscript {repositorie ...
Python加载csv文件的两种方式
本文主要讲解下Python加载csv文件的两种方式,如果知道如何处理的就不必往下看了! 下面来简单介绍下. 实例中的数据集是kaggle的Digit Recognizer的train.csv文件,数据 ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
hibernate加载持久化对象的两种方式---------------load方式和get方式
2019独角兽企业重金招聘Python工程师标准>>> 参考:http://my.oschina.net/u/1169535/blog/282483 1. Hibernate get ...
(9) hibernate加载持久化对象的两种方式——get、load
一.get与load对比在hibernate中get和load方法是根据id取得持久化对象的两种方法,但在实际使用的过程中总会把两者混淆,不知道什么情况下使用get好,什么时候使用load方法效率更 ...
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
c语言加载本地图片,Unity加载本地图片的2种方式
1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...

使用ArcGIS JS API加载WMTS图层的两种方式

文章目录

前言

方式一

方式二

使用ArcGIS JS API加载WMTS图层的两种方式相关推荐

最新文章

热门文章