Titiler无需切片即可实现切片形式访问影像
一、Docker部署titiler
将tif文件放到/home/leopold/custom-titiler/data目录下
sudo docker run -p 9001:80\-v /home/leopold/custom-titiler/data:/data \ghcr.io/developmentseed/titiler:latest二、示例代码
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>Synchronize MapView and SceneView | Sample | ArcGIS Maps SDK forJavaScript 4.26</title><style>html,body {padding: 0;margin: 0;height: 100%;}#hiddenBtn {position: absolute;right: 10px;top: 10px;z-index: 100;padding: 8px 12px;cursor: pointer;}</style><link rel="stylesheet"href="https://js.arcgis.com/4.22/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.22/"></script><script>// 全局变量let titilerLayer = null;// 在页面加载完成后初始化document.addEventListener('DOMContentLoaded', function () {require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer","esri/geometry/SpatialReference"], (Map, MapView, WebTileLayer, SpatialReference) => {const map = new Map({});// 天地图底图var tdtVecLayer = new WebTileLayer({urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],});var tdtPoiLayer = new WebTileLayer({urlTemplate: 'http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],});map.add(tdtVecLayer);map.add(tdtPoiLayer);// 地图视图var view = new MapView({map: map,container: "viewDiv",spatialReference: new SpatialReference({ wkid: 3857 }),center: [125.3286, 43.8928], zoom: 12});// TiTiler 图层 - 注意这里直接赋值给全局变量，不使用 let/vartitilerLayer = new WebTileLayer({urlTemplate: "http://192.168.0.108:9001/cog/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?url=/data/test2.tif",copyright: "TiTiler COG Service"});map.add(titilerLayer);// 确保图层加载完成后绑定事件view.when(() => {console.log("地图加载完成");});});});// 全局函数 - 使用更具体的函数名避免冲突function toggleTitilerLayer() {if (titilerLayer) {titilerLayer.visible = !titilerLayer.visible;const button = document.getElementById('hiddenBtn');button.textContent = titilerLayer.visible ? '隐藏影像' : '显示影像';console.log("影像图层状态:", titilerLayer.visible ? "显示" : "隐藏");} else {console.error("titilerLayer 未定义，请等待地图加载完成");}}</script>
</head>
<body><div id="viewDiv" style="float: left; width: 100%; height: 100%"><button id="hiddenBtn" onclick="toggleTitilerLayer()">隐藏影像</button></div>
</body>
</html>三、效果图
四、对比分析
五、遗留问题
目前不支持自定义坐标系！