深夜总结：使用QGIS切片并用Cesium完成调用

1. 前言

前段时间，有群里看见有个需求，他自己使用QGIS切成的瓦片，但用Cesium调用存在问题。本着对此感兴趣的初衷，自己研究了一番并做出记录。

2. QGIS切片

添加数据

简单配图
切片
通过工具Generate XYZ tiles切瓦片

通过图层选择范围

下图的范围很重要，是Cesium调用的重要参数

切图日志

切图成果

3. 发布切片

使用nginx发布瓦片服务，在nginx.conf中添加如下配置：

server{
        listen 8091;
        server_name  localhost;
        location / {
         	add_header Access-Control-Allow-Origin * always;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            if ($request_method = 'OPTIONS') {              
                return 204;
            }
            alias D:/maps/;#磁盘的目录路径
            autoindex on; #是否开启目录浏览.生产环境为on，部署环境建议为off
        }
    }

访问成果目录在这里插入图片描述

4. Cesium调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link href="/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="/Cesium/Cesium.js"></script>
    <title>QGIS-XYZ</title>
</head>

<body style="margin: 0px;width:100%;height:100%;">
    <div id="cesiumContainer" style="width:100%;height:100%;position:absolute;"></div>
</body>
<script>
    //created by onegiser at 2021-09-14
    const key="天地图的key"
    const xmin = 106.475372314, xmax = 106.576995850, ymin = 29.524383545, ymax = 29.615020752
    const layer = new Cesium.UrlTemplateImageryProvider({
        url: 'http://localhost:8091/out_chongqing/{z}/{x}/{y}.png',
        rectangle: Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax)
    });
    const viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProviderViewModels: [
            new Cesium.ProviderViewModel({
                name: "天地图影像",
                iconUrl: "/imgs/map/tdt_img.jpg",
                tooltip: "",
                creationFunction: () => {
                    const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key,
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                        tilingScheme: new Cesium.GeographicTilingScheme(),
                        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
                    })
                    return [imgImageryProvider]
                }
            }),
        ]
    })

    viewer.imageryLayers.addImageryProvider(layer)

    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax),
    })


</script>

</html>

加载成果预览
在这里插入图片描述

原文链接：https://blog.csdn.net/qq_19689967/article/details/120297099