OpenLayers加载本地GeoJSON报Unexpected token <错误解决方案

触发Unexpected token < in JSON at position 0的核心原因是：你配置的data/countries.geojson请求没有拿到真实的GeoJSON文件，服务端返回的是HTML内容（通常是路由兜底返回的首页、404错误页，这类内容的首字符就是<，不符合JSON格式要求，所以解析失败），和OpenLayers本身的API写法无关。

按排查优先级选对应方法即可：

• 修正静态资源路径
  如果你用Vite、Webpack、Vue CLI这类前端打包工具，静态资源必须放在工具约定的静态目录下才会被服务正确识别：
  以Vite为例，把countries.geojson放到项目根目录的public/data/文件夹下，开发服务和打包后的产物都会自动把public下的文件映射到站点根路径，此时配置url: 'data/countries.geojson'就能正确访问。不要把GeoJSON文件放在src目录下靠相对路径引用，这类文件会被打包工具当做模块处理，路径映射大概率出错。
  验证方式：直接在浏览器地址栏输入http://你的本地服务地址/data/countries.geojson访问，如果页面直接展示GeoJSON的纯文本内容，没有跳转到首页或者404页，说明路径配置正确。
  注意不要直接双击本地HTML文件通过file://协议打开页面，浏览器会对本地文件请求做安全限制，必须启动本地HTTP服务访问页面才能正常加载本地资源。
• 配置静态服务MIME类型
  如果你是自己搭建的原生Node服务、Nginx服务托管静态文件，需要给.geojson后缀配置正确的MIME类型，可设置为application/geo+json或者application/json，否则服务会把未知后缀的请求判定为非法路径，默认返回HTML格式的错误页。
• 本地调试兜底方案（完全绕开静态服务问题）
  直接把GeoJSON作为模块导入，不走HTTP请求加载，适合本地快速调试：

  // 直接引入本地GeoJSON文件，打包工具会在构建时直接读取文件内容，不会发起网络请求
  import countriesData from './data/countries.geojson'
  
  const vectorLayer = new VectorImageLayer({
    background: 'lightblue',
    imageRatio: 2,
    source: new VectorSource({
      // 替换原来的url配置，直接传入解析后的要素
      features: new GeoJSON().readFeatures(countriesData, {
        // GeoJSON默认坐标系是EPSG:4326，官网示例用的是EPSG:3857，必须做坐标转换否则要素位置偏移
        featureProjection: 'EPSG:3857'
      }),
    }),
    style: function (feature) {
      const color = feature.get('COLOR') || '#eeeeee';
      style.getFill().setColor(color);
      return style;
    },
  });
  

  这种写法不需要依赖静态服务的路径、MIME配置，只要文件路径写对就能正常加载，本地调试稳定性最高。

不管用哪种方式加载本地GeoJSON，只要你的地图视图用的是默认的EPSG:3857坐标系，都要在解析GeoJSON时配置featureProjection: 'EPSG:3857'做坐标转换，否则加载出来的面要素会出现位置偏移。

内容的提问来源于stack exchange，提问作者Jonathan Fu