网站调取天地图开发全攻略：方法与步骤详解

地理信息系统（GIS）在网站开发中的应用日益广泛。天地图作为国内权威的地理信息服务平台，为开发者提供了丰富的地图数据和强大的功能接口。本文将详细介绍网站调取天地图进行开发的方法和步骤，帮助开发者快速上手，打造出具有地理信息展示功能的优质网站。

一、使用天地图 JavaScript API

1. 申请开发者账号和 Key

首先，访问天地图官网，注册成为开发者。在注册过程中，需要填写一些基本信息，如邮箱、用户名等。注册成功后，登录开发者控制台，创建一个新的应用。在创建应用时，需要填写应用名称、应用类型等信息，然后系统会为该应用生成一个唯一的 Key。这个 Key 非常重要，它将用于后续在代码中验证和授权你的地图调用请求，确保请求的合法性和安全性。

2. 引入 JavaScript API 库

在 HTML 页面中，使用<script>标签引入天地图 JavaScript API 库。例如：

<script src="http://lbs.tianditu.gov.cn/api/js4.0/tianditu.js"></script>

这一步骤使得我们可以在页面中使用天地图提供的 JavaScript 函数和对象来操作地图。

3. 创建地图容器

在 HTML 页面中添加一个<div>元素，作为地图的容器，并设置其宽度和高度等样式属性。例如：

<div id="map" style="width: 100%; height: 600px;"></div>

这个容器将用于显示地图内容，其大小和样式可以根据网站的整体布局和设计需求进行调整。

4. 初始化地图

使用 JavaScript 代码获取地图容器元素，并通过天地图 API 的T.Map类来创建和初始化地图对象，同时设置地图的中心点、缩放级别等参数。示例代码如下：

var map = new T.Map('map');
map.centerAndZoom(new T.LngLat(116.397428, 39.90923), 12);

这里通过指定地图容器的 ID 为map来创建地图对象，并将地图的中心点设置为经度 116.397428、纬度 39.90923，缩放级别设置为 12。开发者可以根据实际需求调整这些参数，以展示不同区域和缩放程度的地图。

5. 添加地图图层

根据项目需求，可以添加不同类型的天地图图层，如矢量底图、影像底图、地名注记等。以添加矢量底图为例，代码如下：

var vecLayer = new T.TileLayer('vec_w', {key: 'your_key'});
map.addLayer(vecLayer);

这里创建了一个矢量底图图层对象，并将其添加到地图中。需要注意的是，在创建图层对象时，要传入之前申请的 Key，以确保图层能够正常加载。

二、利用 Leaflet.js 调取天地图服务

1. 申请天地图 Key

同样在天地图官网申请对应类型的 Key，申请流程与使用天地图 JavaScript API 时类似。

2. 引入 Leaflet.js

在 HTML 页面中引入 Leaflet.js 的 CSS 和 JavaScript 文件。例如：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

Leaflet.js 是一个轻量级的开源地图库，通过引入其相关文件，我们可以利用它来加载和展示天地图。

3. 创建地图并添加天地图图层

使用L.map函数创建地图对象，并通过L.tileLayer函数添加天地图的影像底图或矢量底图等图层。示例代码如下：

var map = L.map('map', {
  center: [39.915, 116.404],
  zoom: 16,
  crs: L.CRS.TianDiTu_Mercator
});
L.tileLayer('http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=your_key').addTo(map);

上述代码创建了一个以特定经纬度为中心、缩放级别为 16 的地图对象，并添加了天地图的影像底图图层。在L.tileLayer函数中，设置了天地图影像服务的 URL，并传入了申请的 Key，最后将图层添加到地图中。

三、使用 OpenLayers 调取天地图服务

1. 申请天地图 key

前往天地图官网申请 key，获取调用天地图服务的凭证。

2. 安装 OpenLayers

通过npm install ol命令在项目中安装 OpenLayers。

3. 引入相关模块

在页面中引入必要的 OpenLayers 模块，如import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View';等。这些模块将为我们创建和操作地图提供基础功能。

4. 加载地图

在mounted钩子函数中（如果是在 Vue 项目中），创建地图视图、底图图层和注记图层，并将其添加到地图中，同时设置比例尺等控件。示例代码如下：

mounted() {
  let view = new View({
    center: transform(fromLonLat(this.center), 'EPSG:3857', 'EPSG:4326'),
    projection: get('EPSG:4326'),
    zoom: 5
  });
  this.map = new Map({
    target: 'map',
    layers: (new TileLayer({source: new OSM()}))
  });
  let map_cva = new TileLayer({
    source: new XYZ({
      url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=your_key'
    })
  });
  let map_vec = new TileLayer({
    source: new XYZ({
      url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=your_key'
    })
  });
  this.map.addLayer(map_vec);
  this.map.addLayer(map_cva);
  let ScaleLineControl = new ScaleLine({units: 'metric'});
  this.map.addControl(ScaleLineControl);
}

这段代码首先创建了地图视图，设置了地图的中心坐标、投影和缩放级别。然后创建了地图对象，并添加了一个基础的瓦片图层（这里以 OpenStreetMap 为例）。接着创建了天地图的矢量底图和注记图层，并添加到地图中，最后添加了比例尺控件，以方便用户查看地图比例。

四、使用 vue - cesium 开发三维地图（可选）

1. 创建 vue 项目并安装依赖

使用vue create命令创建一个 Vue 项目，并在项目目录下通过npm install cesium --save和npm install --save-dev vue-cli-plugin-cesium安装 Cesium 相关依赖。这一步骤为使用 vue - cesium 开发三维地图奠定基础。

2. 引入 Cesium 资源

在main.js文件中引入 Cesium 的 CSS 和 JavaScript 文件，例如：

import 'cesium/Widgets/widgets.css';
import Cesium from 'cesium/Cesium';
Vue.prototype.Cesium = Cesium;

这样可以在 Vue 组件中方便地使用 Cesium 的功能。

3. 创建地图容器

在 Vue 组件的模板中添加一个<div>元素作为 Cesium 地图的容器，如：

<template>
  <div>
    <div style="width: 100%; height: 600px" id="cesiumContainer"></div>
  </div>
</template>

确定了三维地图在页面中的显示区域。

4. 初始化地图

在 Vue 组件的mounted钩子函数中，使用 Cesium 的Viewer类来创建和初始化三维地图对象，并进行相关配置。示例代码如下：

mounted() {
  Cesium.Ion.defaultAccessToken = "your_access_token";
  this.viewer = new Cesium.Viewer('cesiumContainer', {
    // 配置项
  });
  // 添加天地图影像图层
  var layer = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=your_key",
    subdomains: ('0', '1', '2', '3', '4', '5', '6', '7'),
    layer: "img",
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 18
  });
  this.viewer.imageryLayers.addImageryProvider(layer);
  // 添加天地图影像注记图层
  var layer1 = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=your_key",
    subdomains: ('0', '1', '2', '3', '4', '5', '6', '7'),
    layer: "cia",
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 18
  });
  this.viewer.imageryLayers.addImageryProvider(layer1);
}

首先设置了 Cesium Ion 的访问令牌（如果需要使用相关服务），然后创建了Viewer对象，并添加了天地图的影像图层和影像注记图层，丰富了三维地图的显示内容。

五、总结

通过以上几种方法，开发者可以根据项目的具体需求和技术栈选择合适的方式来调取天地图进行网站开发。无论是二维地图还是三维地图，天地图都提供了丰富的功能和数据支持，能够为网站增添强大的地理信息展示能力，提升用户体验和网站的功能性。在开发过程中，要注意妥善保管申请的 Key，遵循天地图的使用规范和限制，以确保项目的顺利进行和合法合规运行。希望本文能够为广大开发者在网站调取天地图开发方面提供有益的参考和帮助，让更多精彩的地理信息网站得以诞生。

在实际开发中，开发者还可以进一步探索天地图的其他功能，如地理编码、路径规划等，将其集成到网站中，打造出更加完善的地理信息服务平台。