ArcGIS API for JavaScript加载ArcGIS Server发布的WMTS服务

最新推荐文章于 2024-03-15 15:13:16 发布

AriaGIS

最新推荐文章于 2024-03-15 15:13:16 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44616652/article/details/107735045

版权

ArcGIS API for JavaScript 专栏收录该内容

28 篇文章

订阅专栏

1、3.33版本加载

<!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" href="https://js.arcgis.com/3.33/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.33compact/"></script>

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

      var map = new Map("map", {
        center: [116.46, 39.92],
        zoom: 13,
      });
      var url3 = "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/WMTS"
      wmtsLayer = new WMTSLayer(url3);
      map.addLayer(wmtsLayer);
    });
  </script>
</head>

<body>
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"
    style="width: 100%; height: 100%; margin: 0;">

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">

    </div>

  </div>
</body>

</html>

2、4.17版本加载

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>WMTSLayer4.17</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.17/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.17/"></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://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/WMTS"
      });

      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>