数据大屏项目中使用天地图时,因为每个人的key都有流量使用限制,为避免流量超标导致无法使用,所以用户需要申请自己的key替换上去

天地图地址

天地图地址

如果有账号则登录账号密码，没有账号密码则进行注册，登录注册流程都很熟了，这里就不写了。

开发资源

登录成功后，找到顶部的开发资源，并进入

进入后可以看到流程

注册用户 -> 成为开发者 -> 获取服务许可的key -> 使用api服务

申请key

登录成功后，我们进入申请key的页面，可以按照需求自行选择。

我这里使用的是个人的所以选择个人，进入后直接同意条款提交就可以了。

创建应用

进入应用，我们创建应用，输入白名单

创建完成后，我们就有了自己的key

key更新

这里建议申请两个key,一个本地调试用不做限制,一个线上打包用限制为自己的域名,避免key被盗用

更新文件 src/config/tianditu-config.js

/**
 * 天地图配置文件
 * 根据环境自动切换Key
 */

// 开发环境Key
var developmentKey = '' //本地key 本地开发时使用 打包后使用生产环境key

// 生产环境Key
var productionKey = '' //生产环境key 建议在申请key时增加域名限制,避免key被盗用


// 根据环境切换
var tianDiTuKey = import.meta.env.MODE === 'production' ? productionKey : developmentKey

// 完整API地址
export const key = tianDiTuKey
export const apiUrl = `https://api.tianditu.gov.cn/api?v=4.0&tk=${tianDiTuKey}`

// 地图配置
export const mapConfig = {
    key: tianDiTuKey,
    apiUrl: apiUrl,
    center: { lng: 116.397428, lat: 39.90923 },
    zoom: 13
}