04 ArcGIS JS API 4.12加载天地图

时间 2019-11-29

标签 arcgis api 4.12 加载地图栏目 JavaScript 繁體版

原文原文链接

平时开发过程当中，若是咱们调用arcgis js api官网的底图时，因为受网络的限制，调用就会变得很慢，此时咱们能够考虑将咱们的底图换为天地图，以下图所示：javascript

具体操做过程以下：css

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

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

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

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

})

三、在天地图官网申请key，相似于百度地图API开发的流程，而后根据天地图官网给的在线地址，调用天地图服务，以下：git

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"],
});

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

四、实例化地图和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
});

五、完整代码以下所示：ui

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