如何在React Native iOS项目中基于react-native-maps配置天地图底图

我之前在项目里也碰到过天地图底图加载不出来的情况，结合你的代码来看，主要有几个关键问题需要调整，咱们一步步来解决：

1. 必须添加天地图开发者密钥 #

现在天地图的公开瓦片服务都要求携带开发者密钥（key），没有这个参数的话请求会被服务器直接拒绝，这应该是你当前代码不生效的核心原因。你需要先去天地图开发者平台申请密钥，然后把&key=你的密钥追加到urlTemplate的末尾。

2. 正确配置子域名占位符 #

天地图的矢量瓦片子域名是t0到t7，你需要给UrlTile组件指定subdomains属性，让框架能正确替换{subDomain}占位符，否则这个参数会失效，导致请求地址错误。

3. 改用HTTPS协议适配iOS要求 #

iOS应用现在默认强制使用HTTPS协议（ATS限制），你的代码里用的是http，大概率会被系统拦截，所以要把协议改成https；另外天地图的vec_c图层使用的GCJ-02坐标系，和React-Native-Maps默认的瓦片编号规则兼容，暂时不需要调整坐标系。

修正后的完整代码 #

<UrlTile
  urlTemplate='https://t{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&key=你的天地图开发者密钥'
  subdomains={['0', '1', '2', '3', '4', '5', '6', '7']}
  maximumZ={19}
  minimumZ={3} // 天地图矢量底图最低支持到3级，添加这个避免请求不存在的低级别瓦片
/>

额外注意事项 #

• 申请密钥时，要确保服务类型勾选了「地图瓦片服务」；
• 如果需要加载天地图的标注图层，可以再添加一个UrlTile组件，把T参数改成cva_c即可；
• 如果遇到瓦片错位的情况，可以检查是否坐标系不匹配，但vec_c图层默认是兼容RN Maps的瓦片规则的，一般不会有这个问题。

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