arcgis api加载天地图

使用 ArcGIS API 加载天地图

一、准备工作

获取天地图瓦片服务地址

天地图提供了多种类型的地图瓦片服务，例如矢量地图、影像地图等，以下是一些常用的天地图瓦片服务地址示例：

> 注意：需要去天地图官网申请 API Key，将上述地址中的YOUR_TIANMAP_API_KEY 替换为你实际获取的密钥。

引入 ArcGIS API 相关库

在 HTML 文件中，通过<script> 标签引入 ArcGIS JavaScript API 的相关脚本，

<script src="https://js.arcgis.com/4.26/"></script>

二、创建地图实例并加载天地图瓦片

定义地图配置

使用 ArcGIS API 创建地图时，需要定义地图的相关配置，包括中心点、缩放级别等，要指定天地图瓦片作为图层添加到地图中，以下是一个简单的示例代码：

require([
  "esri/Map",
  "esri/layers/TileLayer"
], function(Map, TileLayer) {
  // 定义天地图矢量图层
  var tiandituVecLayer = new TileLayer({
    url: "http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=YOUR_TIANMAP_API_KEY",
    sublayers: [{
      id: 0,
      title: "矢量地图",
      visible: true
    }]
  });
  // 创建地图实例并添加天地图矢量图层
  var map = new Map({
    basemap: "streets", // 可以先使用 ArcGIS 自带的底图，后续可替换为天地图图层
    // 设置地图初始中心点和缩放级别
    center: [116.397428, 39.90923], // 以北京为例
    zoom: 10,
    // 将天地图矢量图层添加到地图的图层列表中
    layers: [tiandituVecLayer]
  });
  // 如果只想显示天地图图层，可以移除默认的 basemap 并设置天地图图层为唯一图层
  map.remove(map.basemapGalleryLayer);
  map.add(tiandituVecLayer);
});

处理瓦片图层的子图层（可选）

天地图瓦片服务可能包含多个子图层，比如矢量地图服务中有不同级别的道路、水系等子图层，如果需要对特定子图层进行操作，比如控制其显示或设置样式等，可以通过sublayers 属性进一步配置，只显示天地图矢量图层中的某个特定子图层：

var tiandituVecLayer = new TileLayer({
  url: "http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=YOUR_TIANMAP_API_KEY",
  sublayers: [{
    id: 0, // 子图层 ID，根据天地图服务文档确定具体含义
    title: "矢量地图 基础层",
    visible: true // 设置为可见
  }, {
    id: 1,
    title: "矢量地图 道路层",
    visible: false // 设置为不可见，可根据需求调整
  }]
});

三、优化与交互（可选）

添加缩放控件等交互组件

为了让用户更好地操作地图，可以添加一些常用的交互组件，如缩放控件、导航控件等，ArcGIS API 提供了丰富的控件可供使用，添加缩放控件到地图右上角：

map.addControl(new esri.dijit.Zoom({
  position: "top-right"
}));

响应地图事件（可选）

可以根据业务需求，监听地图的各种事件，如点击事件、鼠标移动事件等，并在事件回调函数中进行相应的处理，监听地图的点击事件，在点击位置添加一个标记：

map.on("click", function(event) {
  var point = event.mapPoint;
  var marker = new esri.Graphic(point, new esri.symbol.SimpleMarkerSymbol());
  map.graphics.add(marker);
});

四、相关问题与解答

问题 1：申请天地图 API Key 后，如何确保其在 ArcGIS API 中正常使用？

解答：申请到天地图 API Key 后，将其准确无误地替换到天地图瓦片服务地址中的tk 参数位置，确保在网络环境中能够正常访问天地图的瓦片服务地址，没有被防火墙或其他网络限制所阻挡，要注意天地图 API Key 的使用权限和有效期等相关规则，按照天地图官方的要求合法使用。

问题 2：如果我想同时加载天地图的矢量图层和影像图层，该如何操作？

解答：可以按照类似加载单个天地图图层的方法，分别创建两个TileLayer 实例，一个用于矢量图层，一个用于影像图层，然后将这两个图层都添加到地图的layers 属性中。

require([
  "esri/Map",
  "esri/layers/TileLayer"
], function(Map, TileLayer) {
  // 定义天地图矢量图层
  var tiandituVecLayer = new TileLayer({
    url: "http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=YOUR_TIANMAP_API_KEY",
    sublayers: [{
      id: 0,
      title: "矢量地图",
      visible: true
    }]
  });
  // 定义天地图影像图层
  var tiandituImgLayer = new TileLayer({
    url: "http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk=YOUR_TIANMAP_API_KEY",
    sublayers: [{
      id: 0,
      title: "影像地图",
      visible: true
    }]
  });
  // 创建地图实例并添加天地图矢量和影像图层
  var map = new Map({
    basemap: "streets",
    center: [116.397428, 39.90923],
    zoom: 10,
    layers: [tiandituVecLayer, tiandituImgLayer] // 同时添加两个图层
  });
  // 移除默认的 basemap（如果需要只显示天地图图层）
  map.remove(map.basemapGalleryLayer);
});

这样，在创建地图实例时，就会同时加载并显示天地图的矢量图层和影像图层，你可以根据需要控制各个图层的显示顺序、可见性等属性。

以上内容就是解答有关“arcgis api加载天地图”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。