1.安装leaflet和superMap

superMap提供了leaflet和天地图结合的方法（superMap 官网：https://leafletjs.com/reference.htmliClient for Leaflet 开发指南）（leaflet 官网：Documentation - Leaflet - a JavaScript library for interactive maps；中文文档：Plugins - Leaflet - 一个交互式地图 JavaScript 库）项目中引入插件

创建地图，引入天地图图层

    let map = L.map(mapId, {
          crs: L.CRS.EPSG4326,
          center: [29, 119],
          maxZoom: 17,
          minZoom: 7,
          zoom: 10,//当前层级
          zoomControl: false,
          attributionControl: false,
          preferCanvas: true,
          doubleClickZoom: false,
        })
      //添加窗格，把wms图层添加到此窗格中，这里自定义了窗格，wms默认窗格是tilePane，geoJson图层默认窗格是overlayPane，我这里因为要把wms覆盖在geoJson上面，所以就自定义了窗格和层级
       map.createPane("maxLevelPane");
       map.getPane("maxLevelPane").style.zIndex = 660;
       //添加天地图影像图层和标注图层，这里使用了supermap的方法
       var wMap = L.supermap.tiandituTileLayer({
          layerType: "img",
          key: "天地图key",
        })
        var lMap = L.supermap.tiandituTileLayer({
          layerType: "img",
          isLabel: true,
          key: "天地图key",
        })
        //添加影像图层
        map.addLayer(wMap);
        //添加标签图层
        map.addLayer(lMap);

2.geoJson图层添加

geoJson格式的数据可以是后台返回，也可以到geoserver中获取（如果geoserver中有的话），

后台返回：

let data = {"type":"MultiPolygon","coordinates":[[[[119.766132807747,29.2003390625065],[119.766281787158,29.2003833031418],[119.766350165137,29.2001859643868],[119.766445181959,29.2000318171805],[119.766473397007,29.2000018232861],[119.766143344738,29.2002428663719],[119.766132807747,29.2003390625065]]]]}
//图层样式
var regionStyle = {
        color: "#89cfda",
        weight: 5,
        opacity: 1,
        fillColor: "",
        fillOpacity: 0,
      };
      var list = [];
      let that = this;
      var modal = {
        type: "Feature",
        geometry_name: "geom",
        geometry: data,
      };
      list.push(modal);
      //把后台返回数据处理成可以在地图上展示geojson格式
      var geoJson = {
        type: "FeatureCollection",
        features: list,
      };
      var geo_l = L.geoJson(geoJson, {
        style: regionStyle,//设置样式
      }).addTo(map);//添加到地图

geoserver中获取：

需要使用的方法：geoserver/工作区/ows

//图层样式
var regionStyle = {
          color: "#89cfda",
          weight: 5,
          opacity: 1,
          fillColor: "",
          fillOpacity: 0,
        };
//请求接口的参数     
 var param = {
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typeName: "图层名称",
          maxFeatures: 10000,//我这里设置了一个很大的值，默认返回50条数据
          outputFormat: "application/json",
          CQL_FILTER: "筛选条件",
        };
//调用获取方法就可以拿到geoJson数据，格式不用转换，可以直接使用

   var data;//返回数据，我这里就不具体写了
var geo_l = L.geoJson(data, {
          style: regionStyle,
        }).addTo(map);

3.wms图层添加

//添加图层组到地图，把wms图层全部放入图层组中，这样可以调整wms图层的层级
let layerGroups = new L.LayerGroup();
layerGroups.addTo(map);
let wmsLayer = L.tileLayer.wms(`/geoserver/工作区/wms`, {
      'format': 'image/png',
      'VERSION': '1.1.1',
      "layers": '图层名称',
      "exceptions": 'application/vnd.ogc.se_inimage',
      'transparent': true,
      'maxZoom': 21,//最大级别
    })
wmsLayer.setParams({
          styles: "样式名称"//在geoserver中设置，样式设置时，添加了工作区只能在对应的工作区使用，不添加工作区，可以通用
        });
        wmsLayer.setZIndex(100);//设置层级，数值越大，层级越高
        layerGroups.addLayer(wmsLayer);//添加图层到图层组
        layerGroups.removeLayer(wmsLayer);//把图层从图层组中移除

4.wms图层点击

因wms图层是图片，不像geoJson可以提供方法，所以wms的点击事件就需要单独处理，首先获取到当前鼠标点击地图的坐标，再根据坐标在geoserver对应的图层中查找包含该坐标的矢量图层，然后返回相应的数据，可以根据geoserver返回的数据进行下一步处理，具体实现：

首先：在数据--图层中找到对应的图层，在数据选项中找到

 找到Edit sql view然后

 修改geom属性，我这里的坐标体系是4326的，你们可以根据自身情况设置

var param = {
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typeName: "图层名称",
          maxFeatures: 10,//要查询的数据是唯一的，可以设置该属性，也可以不设置，默认是50
          outputFormat: "application/json",
          CQL_FILTER: `CONTAINS(geom,SRID=4326;POINT(${longitude} ${latitude}))`,//筛选条件，根据自己的情况添加合适的筛选条件，longitude，latitude点击地图获取到的经纬度，中间要有空格
        };
var data ; // 调用接口 geoserver/工作区/ows返回的数据
//判断data.features.length ,即可得到点击点对应的图层数据

 图层展示就写到这里，如果有什么问题，可以一起探讨

最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。

1、注册天地图并查看天地图的WMTS服务。

首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号密码忘了无法找回密码，且账号绑定的手机号也不能解绑）。注册之后可以在控制台创建新应用，获得调用服务所需的key。

然后在地图API>地图服务那里可以查看到地图服务列表。

2、Vue+OpenLayers调用天地图WMTS服务获得底图。

可以参照官网的例子学习相关的参数，https://openlayers.org/en/latest/examples/wmts.html

在参照官网例子基础上，调整的代码如下。

<template>
  <div id="map">
  </div>
</template>

<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import { fromLonLat } from "ol/proj";
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

  export default {  //调用天地图WMTS服务
    name: 'olTDT',
    data() {
      return {
        map: null
      };
    },
    mounted() {
      var projection = getProjection('EPSG:3857');
      var projectionExtent = projection.getExtent();
      var size = getWidth(projectionExtent) / 256;
      var resolutions = new Array(18);
      var matrixIds = new Array(18);
      for (var z = 1; z < 19; ++z) {
	      // generate resolutions and matrixIds arrays for this WMTS
	      resolutions[z] = size / Math.pow(2, z);
	      matrixIds[z] = z;
      }
 
      var webKey = '申请的key';
 
      var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //矢量底图
      var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //矢量注记
 
      var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
      var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像注记
 
      var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
      var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记
 
      var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省级以上）
      var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
      var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记
 
      var map1 = new Map({
	      layers: [
	        new TileLayer({
		        opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_3 + webKey,
		          layer: 'img',  //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
			          origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        }),
	        new TileLayer({
	        	opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_4 + webKey,
		          layer: 'cia',   //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
		        	  origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        })
	      ],
	      target: 'map',
	      view: new View({
	        center: fromLonLat([113.38, 23.09]),  //惠州
	        zoom: 5
	      })
      });
    }
  };
</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }

</style>

注意：上述代码中source里面的“layer、matrixSet、format、style”这几个参数不能写错，否则结果出不来。比如矢量底图的layer是vec，而影像底图的layer是img，地形底图的layer是ter。这些参数是由WMTS的GetCapabilities接口返回的结果来决定的。

可以参照：http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=申请的key

3、最终运行的结果

参考：https://blog.csdn.net/envon123/article/details/82706185

1. 注册天地图

更多服务访问：http://lbs.tianditu.gov.cn/server/MapService.html

2. 确定服务类型

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={x}&TILECOL={y}&tk=您的密钥

官网给出的调用地图瓦片的示例如上，注意：layer后面的一定要和服务类型对应起来！

3. Cesium使用底图

//矢量底图
 var Cesium = this.Cesium;
 var cesiumContainer = document.getElementById("cesiumContainer");
 var viewer = new Cesium.Viewer("cesiumContainer",{
 imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
     url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",
     layer: "tdtBasicLayer",
     style: "default",
     format: "tiles",
     tileMatrixSetID: "GoogleMapsCompatible",
     show: true,
     maximumLevel: 18
     })
 });

4. Cesium加载多个图层

//中文地名注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ 
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=d6a72a78a43a2c17294b72ab26354cd6",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
    }));
  }   
}

5. 示例展示