04 ArcGIS JS API 4.12加载天地图

平时开发过程中，如果我们调用arcgis js api官网的底图时，由于受网络的限制，调用就会变得很慢，此时我们可以考虑将我们的底图换为天地图，如下图所示：

具体操作过程如下：

1、加载arcgis api实例化地图时所需的样式文件和js代码包，如下：

<link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
<script src="https://js.arcgis.com/4.12/"></script>

2、引入实例化地图和切片图层所用的模块，如下：

require(["esri/Map", 
    "esri/views/MapView",
    "esri/layers/WebTileLayer"], function(Map, 
    MapView,
    WebTileLayer) {

})

3、在天地图官网申请key，类似于百度地图API开发的流程，然后根据天地图官网给的在线地址，调用天地图服务，如下：

var tiledLayer = new WebTileLayer({
    urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申请的key",
    subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});

var tiledLayer_poi = new WebTileLayer({
    urlTemplate:"http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申请的key",
    subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
});

上述代码实例化了两个切片图层，其中第一个是天地图切片图层，第二个是标注图层。

4、实例化地图和mapview，将上述实例化完成的两个切片图层作为basemap来添加，如下：

var map = new Map({
    basemap: {
         baseLayers: [tiledLayer, tiledLayer_poi]
    }
});

var view = new MapView({
    container: "viewDiv",
    map: map,
   zoom: 10,
   center: [104.072619,30.663776] // longitude, latitude
});

5、完整代码如下所示：

<!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>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView","esri/layers/WebTileLayer"], function(Map, MapView,WebTileLayer) {
    
        var tiledLayer = new WebTileLayer({
          urlTemplate:
            "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=申请的key",
          subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
        });

        var tiledLayer_poi = new WebTileLayer({
          urlTemplate:
            "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=申请的key",
          subDomains: ["t0", "t1", "t2", "t3","t4", "t5", "t6", "t7"],
        });

        var map = new Map({
            basemap: {
              baseLayers: [tiledLayer, tiledLayer_poi]
            }
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 10,
          center: [104.072619,30.663776] // longitude, latitude
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

X北辰北

发布了112 篇原创文章 · 获赞 109 · 访问量 24万+

私信关注

04 ArcGIS JS API 4.12加载天地图

猜你喜欢