七安

七安

最浪漫不过与你并肩看夕阳~

成都 · 中国

ArcGIS Maps SDK for JavaScript 加载天地图

2023-07-14 Note 153

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

具体操作过程如下：

1、加载 ArcGIS Maps SDK for JavaScript 实例化地图时所需的样式文件和 js 代码包，如下：

<link
    rel="stylesheet"
    href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></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.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></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>

#####

5 条评论

    1. @呆瓜 肯定是可以，但是你既然用了arcgis js api，就没必要再用天地图的搜索控件了吧，毕竟控件基本是和地图的 js api绑定的，如果arcgis js api的搜索控件样式不满足需求，就自己写样式

      回复

发布评论