06 使用WMTSLayer来实例化一个图层
作者:互联网
问题描述:
现有一个支持WMTS的服务地址,地址具体信息如下:
以上信息展示此服务是一个地图服务,即MapServer结尾,然后此服务支持WMTS实例化。现有需求将此地图服务通过WMTSLayer实例化为一个图层,在前端渲染,下面介绍详细的操作步骤。
大概思路:
既然是实例化一个图层,其实大致流程和实例化其他类型图层都一致,就是通过相应的函数来实例化图层,然后通过map的add方法添加至前端显示。
操作步骤:
1、了解此服务的具体信息,包括url地址、是否支持WMTS、是否在前端正常查看等;
2、编写代码,实例化图层。代码参考4.11版本的demo代码,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>WMTSLayer - 4.11</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-layer-list {
width: 310px;
}
</style>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
var map, view;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/LayerList"
], function(Map, MapView, WMTSLayer, LayerList) {
layer = new WMTSLayer({
url: "http://10.10.10.211:6080/arcgis/rest/services/demoservice/cd/MapServer/WMTS",
activeLayer: {
id: "demoservice_cd"
}
});
map = new Map({
layers: [layer]
});
view = new MapView({
container: "viewDiv",
map: map
});
view.when(function() {
view.extent = layer.fullExtent;
var layerList = new LayerList({
view: view
});
view.ui.add(layerList, "bottom-left");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
上述代码中的以下部分是操作步骤的重点,接下来将详细讲解:
我们可以看到实例化WMTS图层时,url结构是“原始地址+WMTS”,然后还需设定此图层的id,即要显示在前端的图层id。
此id值可以不设定。如需设定,可以根据以下操作步骤来获取这个id值:
3、获取WMTS图层的activeLayer的id值
3.1 我们在服务描述界面,点击【WMTS】进入到此服务的xml描述页面,如图:
3.2 然后在此界面查找“identifier”,此id值就是这个identifier的值,如下图所示:
3.3 最后,将这个值赋值给代码中id值,运行代码,即可看到实例化的WMTS图层,如图:
X北辰北 博客专家 发布了122 篇原创文章 · 获赞 119 · 访问量 25万+ 私信 关注
标签:06,实例,WMTS,图层,WMTSLayer,id,view 来源: https://blog.csdn.net/qq_35117024/article/details/104152139