前言

在前一篇中说到我们可以通过加载WMS服务解决用ArcGIS API加载超图发布的服务，但是WMS服务在加载效率上是低于切片服务的，加上超图的IServer，无力吐槽，所以，在加载速度的要求下，切片的WMTS服务更符合要求。

加载WMTS服务的要点

identifier：图层标识
tileMatrixSet：切片矩阵标识
extent：加载范围
spatialReference：控件参考
version：WMTS服务版本号
dpi：平铺方案的dpi
lods:定义切片方案的一系列细节层次。

实现效果

实现代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with WMTS resourceinfo</title>

<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>

<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>

<script>
require([
"esri/map",
"esri/layers/WMTSLayer",
"esri/layers/WMTSLayerInfo",
"esri/geometry/Extent",
"esri/layers/TileInfo",
"esri/SpatialReference",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map,
WMTSLayer,
WMTSLayerInfo,
Extent,
TileInfo,
SpatialReference,
parser
) {
parser.parse();

var map = new Map("map", {
center: [113.707012, 34.766478],
zoom: 3
});

var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4326
}),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [{
"level": "0","scale": 295829355.45,"resolution": 0.703125
}, {
"level": "1","scale": 147914677.725,"resolution": 0.3515625
}, {
"level": "2", "scale": 73957338.8625,"resolution": 0.17578125
}, {
"level": "3","scale": 36978669.43125,"resolution": 0.087890625
}, {
"level": "4","scale": 18489334.715625,"resolution": 0.0439453125
}, {
"level": "5","scale": 9244667.3578125,"resolution": 0.02197265625
}, {
"level": "6","scale": 4622333.67890625,"resolution": 0.010986328125
}, {
"level": "7","scale": 2311166.83945312,"resolution": 0.0054931640625
}, {
"level": "8","scale": 1155583.41972656,"resolution": 0.00274658203125
}, {
"level": "9","scale": 577791.709863281,"resolution": 0.001373291015625
}, {
"level": "10","scale": 288895.8549316406,"resolution": 0.0006866455078125
}, {
"level": "11","scale": 144447.9274658203,"resolution": 0.00034332275390625
}, {
"level": "12","scale": 4508.935440959931,"resolution": 0.000171661376953125
}, {
"level": "13","scale": 36111.98186645508,"resolution": 0.0000858306884765625
}, {
"level": "14","scale": 18055.99093322754,"resolution": 0.0000429153442382812
}, {
"level": "15","scale": 9027.99546661377,"resolution": 0.0000214576721191406
}, {
"level": "16","scale": 4513.997733306885,"resolution": 0.0000107288360595703
}, {
"level": "17","scale": 2256.9988666534423,"resolution": 0.00000536441802978515
}, {
"level": "18","scale": 1128.4994333267211,"resolution": 0.00000268220901489257
}, {
"level": "19","scale": 564.2497166633606,"resolution": 0.00000134110450744628
}]
});
var tileExtent = new Extent(-180.0 , -85.0511287798065,180.0 , 85.05112877980648, new SpatialReference({
wkid: 4326
}));

var layerInfo = new WMTSLayerInfo({
tileInfo: tileInfo,
fullExtent: tileExtent,
initialExtent: tileExtent,
identifier: "China_4326",
tileMatrixSet: "ChinaPublicServices_China_4326",
format: "png",
style: "default"
});

var resourceInfo = {
version: "1.0.0",
layerInfos: [layerInfo],
copyright: "超图预研"
};

var options = {
serviceMode: "KVP",
resourceInfo: resourceInfo,
layerInfo: layerInfo
};
wmtsLayer = new WMTSLayer("http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china", options);

map.addLayer(wmtsLayer);
map.centerAndZoom([113.707012, 34.766478],0);

});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
---------------------
作者：idomyway
来源：CSDN
原文：https://blog.csdn.net/idomyway/article/details/84863066
版权声明：本文为博主原创文章，转载请附上博文链接！

（二十）ArcGIS JS 加载WMTS服务（超图示例）的更多相关文章

  1. （十九）ArcGIS JS 加载WMS服务（超图示例）

    前言 在工作中,需要在ArcGIS API for JavaScript中加载超图服务,因为超图的rest服务只可以用于Leaflet .openlayers3 (with MVT) .MapboxG ...

  2. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  3. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  4. （转）Arcgis for js加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...

  5. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  6. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

  7. Arcgis for js加载百度地图

    看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...

  8. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  9. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

随机推荐

  1. RabbitMQ学习系列二：.net 环境下 C#代码使用 RabbitMQ 消息队列

    一.理论: .net环境下,C#代码调用RabbitMQ消息队列,本文用easynetq开源的.net Rabbitmq api来实现. EasyNetQ 是一个易于使用的RabbitMQ的.Net客 ...

  2. ABB机器人---PCSDK简介

    BB机器人为用户提供了大量便捷的二次开发及应用工具,PCSDK就是其中一项. 1) 首先,机器人使用PCSDK,必须要有pc interface选项. 2)此处举例使用C#编写简单界面,实现与机器人数 ...

  3. 使用Amazon AWS SNS 发送 SMS 消息 .net

    1.浏览aws 开发人员指南 https://docs.aws.amazon.com/zh_cn/sns/latest/dg/sms_publish-to-phone.html 2.安装 aws sm ...

  4. [日常] 高性能MySQL-索引

    1.mysql的索引工作类似一本书的目录部分,想找某个特定主题,先查找书的目录部分,找到对应的页码2.ORM工具只能生成基本的合法的查询3.索引是在存储引擎层实现的,不是服务器层4.B-tree就是指 ...

  5. Java多线程——之一创建线程的四种方法

    1.实现Runnable接口,重载run(),无返回值 package thread; public class ThreadRunnable implements Runnable { public ...

  6. 并发修改异常（ConcurrentModificationException）

    并发修改异常(ConcurrentModificationException) 这个异常,使用集合的时候应该很常见,这个异常产生的原因是因为java中不允许直接修改集合的结构. 先贴上个有趣的例子,给 ...

  7. Java - 生产者消费者问题

    Java多线程系列--“基础篇”11之 生产消费者问题 概要 本章,会对“生产/消费者问题”进行讨论.涉及到的内容包括:1. 生产/消费者模型2. 生产/消费者实现 转载请注明出处:http://ww ...

  8. Http升级到Https （本地测试，无须域名和认证）

    在之前的语音识别的项目中,一切都在本地进行得很顺利,然后把写的Demo部署到服务器上给老大看的时候,通过IP访问(http://192.168.145.170:8080这样的形式)时,从一开始就坏掉了 ...

  9. v-charts使用心得

    前端er经常都会遇到使用echarts的时候,特别是弄后台管理的报表等地方,而v-charts是echarts的vue版本(饿了么写的),基本上能应付普通的图表.传送门 隐藏提示框与图例 v-char ...

  10. （转）预处器的对比——Sass、LESS和Stylus

    英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-sho ...