阿里云地理工具jeojson数据报错403Forbidden与天地图不支持的key类型问题记录

前言

本片文章记录我在做前端地图开发时碰到的一个问题

这是需求：在使用天地图作为底图的地图中展示某个城市的边界。本地测试展示效果如下：

城市边界数据我选择了DataV.GeoAtlas 阿里云地理小工具的网络 jeojson

地址：datav.aliyun.com/portal/scho…

边界代码( 使用了 Openlayers )：

// 乌苏市边界图层
const wusuLayer = new VectorLayer({
  source: new VectorSource({
    url: 'http://geo.datav.aliyun.com/areas_v3/bound/geojson?code=654202',
    format: new GeoJSON(),
  }),
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 252, 197, 1)',
      width: 2,
      lineDash: [4, 8]
    }),
    fill: new Fill({
      color: 'rgba(0, 186, 173, 0.2)'
    })
  })
});

1. 阿里云地理工具jeojson数据报错403Forbidden

正当我满心欢喜的欣赏自己的杰作时，传来了一个噩耗：正式服的城市边界并没有被加载出来。

是获取jeojson数据的接口报错了：403Forbidden (由于问题只在项目部署后的环境触发，没有截图)

原因：向 datav 发送请求时，会携带我们的浏览器信息到阿里云，阿里云做了访问限制。

解决方法：在项目中添加 <meta name="referrer" content="no-referrer" />禁止请求时携带 Referer参数

原请求：携带 referer请求标头

禁用后请求：

在处理完之后，正式服的区域边界也是能够显示了，但是出现了一个更加严重的问题：天地图不显示了。（看到一片空白的地图天都塌了）

2. 天地图不支持的key类型

报错：不支持 key 类型！

原因：请求中未携带 Referer (没错，和 datav 正好相反)，天地图需要用 Referer 中的请求地址来判断该地址是否有请求权限（在创建 key 的时候有个白名单，在白名单中的地址拥有权限）

解决：删掉 <meta name="referrer" content="no-referrer" /> 地图就重新显示了😎

那区域边界怎么办？我找了很久的让单独请求不携带 or 自定义 Referer 的方法，都以失败告终🥲。

然后，我妥协了，将要使用的 jeojson数据下载了下来，放到项目中在本地加载。

附上代码：

mport WusuJson from '@/assets/json/乌苏市边界坐标.json';

  const wusuLayer = new VectorLayer({
  source: new VectorSource({
    features: new GeoJSON().readFeatures(WusuJson)
  }),
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 252, 197, 1)',
      width: 2,
      lineDash: [4, 8]
    }),
    fill: new Fill({
      color: 'rgba(0, 186, 173, 0.2)'
    })
  })
});