第一步：插入渲染元素

1 <div id="cesiumContainer"></div>

第二步：添加样式

1 #cesiumContainer {
2     position: absolute;
3     width: 100%;
4     height: 100%;
5     z-index: 10;
6  }

第三步：创建地图

1 let map = L.map('cesiumContainer',{
2         center: [center_lat, center_lng],
3         crs: L.CRS.EPSG4326,
4         zoom: 8,
5         zoomControl: false, // 隐藏缩放按钮
6 });

第四步：添加底图

 1 let img_url = 'http://t{s}.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c';
 2 let cia_url = 'http://t{s}.tianditu.gov.cn/cia_c/wmts?&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=87c942f4f4a2b17270f52f797df4537c';
 3 this.tileLayer = L.tileLayer(img_url, {
 4         subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点，代码中不固定使用哪个节点的服务，而是随机决定从哪个节点请求服务，避免指定节点因故障等原因停止服务的风险
 5         minZoom: 2,
 6         maxZoom: 17,
 7         zoomOffset: 1
 8 }).addTo(map); // 影像图
 9 let labelTileLayer = L.tileLayer(cia_url, {
10         subdomains: [0, 1, 2, 3, 4, 5, 6, 7], // 天地图有7个服务节点，代码中不固定使用哪个节点的服务，而是随机决定从哪个节点请求服务，避免指定节点因故障等原因停止服务的风险
11         minZoom: 11,
12         maxZoom: 17,
13         zoomOffset: 1
14 }).addTo(map); // 文字注记图

第五步：定位到相应范围

1 let latlngs = [];
2 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]);
3 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.minx]);
4 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]);
5 latlngs.push([MaxMinXYData.maxy,MaxMinXYData.maxx]);
6 latlngs.push([MaxMinXYData.miny,MaxMinXYData.minx]);
7 var bound_Polygon = L.polyline(latlngs);
8 map.fitBounds(bound_Polygon.getBounds());