arcgis for js——4.加载天地图-墨卡托投影

最新推荐文章于 2025-04-17 20:58:41 发布

遥感与地理信息

最新推荐文章于 2025-04-17 20:58:41 发布

阅读量1k

点赞数 1

分类专栏： ArcGIS for JS学习文章标签： javascript arcgis

本文链接：https://blog.youkuaiyun.com/qq_22170875/article/details/106073430

版权

ArcGIS for JS学习专栏收录该内容

3 篇文章

订阅专栏

1.完整源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>加载天地图-墨卡托投影</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    
  </head>
  <body>
    <div id="viewDiv"></div>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.14/"></script>
    <script>
      require([
        "esri/Map", 
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "esri/layers/TileLayer"
        ], function(Map, MapView, WebTileLayer) {
        
        //WebTileLayer类官网介绍：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WebTileLayer.html#declaredClass
        var tdtMap = new WebTileLayer({//天地图
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=3c46374310d9f01d106ca9934a4974f6",
        subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"]
        //copyright: "天地图"
        })

        //tdtMap.maxScale = 100;
        //tdtMap.minScale = 0;
        // WebTileLayer当图层加载成功时，全局视角显示
        // tdtMap.when(function(){
        // view.extent = tdtMap.fullExtent;
        // });

        var tdtAnnoMap = new WebTileLayer({//天地图注记
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=3c46374310d9f01d106ca9934a4974f6",
        subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
        //copyright: "天地图注记"
        })
     
        var mymap = new Map({
          layers:tdtMap
        });
  
        mymap.add(tdtAnnoMap); 
        
       var view = new MapView({
          container: "viewDiv", 
          map: mymap, 
          zoom: 4, 
          center: [108, 34], //使用经纬度设置视图中心点
        });
       //去掉ESRI logo
       view.ui._removeComponents(["attribution"]);
      });
    </script>
  </body>
</html>