ArcGIS JS加载NodeJS服务端TIF文件报错的最佳解决方案

Unexpected token I in JSON at position 0报错由图层类型误用导致：

• @arcgis/core的ImageLayer设计目标是对接ArcGIS Server发布的影像服务（Image Service），初始化时首先请求服务地址，预期返回JSON格式的服务元数据。
• 你通过res.sendFile直接返回二进制TIF文件，小端编码的TIF文件头首字符为I，JSON解析阶段遇到非法字符直接抛出该错误。
• 你存储的带地理坐标的TIF属于GeoTIFF格式，不属于ImageLayer原生支持的直接加载数据源。

方案1：使用GeoTIFFLayer对接现有静态文件接口（改造成本最低） #

若你使用的@arcgis/core版本≥4.22，可直接使用官方提供的GeoTIFFLayer加载GeoTIFF文件，无需改动现有文件存储逻辑，仅需调整服务端响应头和客户端图层类型即可。

服务端配置 #

res.sendFile默认会为TIF文件设置正确的Content-Type: image/tiff响应头，只需额外配置CORS规则支持Range请求（大文件分片读取依赖该头，避免全量下载）：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  exposedHeaders: ['Content-Length', 'Content-Range', 'Accept-Ranges']
}));

app.get('/raster/:filename', (req, res) => {
  const targetPath = `${__dirname}/tif-storage/${req.params.filename}`;
  res.sendFile(targetPath, {
    headers: { 'Accept-Ranges': 'bytes' }
  });
});

app.listen(3000);

客户端加载代码 #

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import GeoTIFFLayer from '@arcgis/core/layers/GeoTIFFLayer';

const windTifLayer = new GeoTIFFLayer({
  url: 'http://your-service-address/raster/wind-speed.tif',
  // 可根据业务需求自定义栅格渲染规则
  renderer: {
    type: "raster-stretch",
    stretchType: "min-max",
    colors: ["#1a9850", "#91cf60", "#d9ef8b", "#fee08b", "#fc8d59", "#d73027"]
  }
});

const map = new Map({
  basemap: "topo-vector",
  layers: [windTifLayer]
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 4
});

该方案支持TB级大体积GeoTIFF加载，底层会自动根据当前地图视窗范围按需请求对应分片数据，无需提前下载全量文件。

方案2：发布标准OGC/ArcGIS影像服务（生产环境首选） #

如果你需要管理大量TIF文件、需要支持空间查询、动态渲染、高并发访问，不建议自行实现静态文件接口，直接使用开源GIS服务软件发布标准服务即可：

• 可选用GeoServer、MapServer等工具，将存储TIF的目录配置为栅格数据源，发布为WMTS/WMS/ArcGIS Image Service格式的服务
• 客户端可直接使用WMSLayer/TileLayer/ImageLayer对接，服务端自动处理切片金字塔、坐标系转换、缓存加速、权限控制，稳定性和性能远高于自定义静态文件接口。

方案3：基于geotiff.js自定义加载（高定制化场景可选） #

如果需要实现完全自定义的栅格渲染逻辑，可使用geotiff.js库自主解析TIF的栅格值和地理参考信息，对接ArcGIS的自定义图层接口完成渲染，灵活度最高，但需要自行实现坐标转换、渲染优化等逻辑，开发成本较高。

• 不要尝试通过修改响应头、包装返回值的方式让ImageLayer加载裸TIF，该类的数据源解析逻辑不支持二进制TIF输入，该方向无可行解。
• 加载体积超过1GB的TIF文件时必须开启服务端Range请求支持，否则前端会等待全量文件下载完成后才开始解析，加载等待时间会达到数分钟甚至更久。
• 加载前确认TIF文件内置地理参考信息（即标准GeoTIFF格式），如果是无坐标信息的普通TIF图片，所有GIS图层都无法将其匹配到地图对应地理位置。

内容的提问来源于stack exchange，提问作者Ibrohim Alimuhammedov