百度地图缩放级别与比例尺的关系

简介: 百度地图缩放级别与比例尺的关系

背景

最近做了一个项目,需要用户在缩放百度地图的时候,能根据地图缩放级别以及地图中心坐标,动态更新地图上的标注点(比如根据地图缩放级别以及地图中心坐标动态获取手机屏幕视界范围内的共享单车位置),这时候就需要根据地图中心坐标点以及通过地图缩放级别获取比例尺,来计算手机屏幕视界的经纬度范围,从而获取当前范围内的共享单车位置

百度地图缩放级别与比例尺对应数值

百度地图缩放级别从19~1,共分为19级,级别越大,范围越小:

[19级,18级,17级,16级,15级,14级,13级,12级,11级,10级,9级,8级,7级,6级,5级,4级,3级,2级,1级]

其分别对应的比例尺为:

[1:20米(简称20米,后同),50米,100米,200米,500米,1公里,2公里,5公里,10公里,20公里,25公里,50公里,100公里,200公里,500公里,1000公里,2000公里,5000公里,10000公里]

// 根据地图缩放比例获取当前地图比例尺
    const getMapScale = (zoom: number): number => {
      let scale = 0;
      switch (zoom) {
        case 1:
          scale = 10000000;
          break;
        case 2:
          scale = 5000000;
          break;
        case 3:
          scale = 2000000;
          break;
        case 4:
          scale = 1000000;
          break;
        case 5:
          scale = 500000;
          break;
        case 6:
          scale = 200000;
          break;
        case 7:
          scale = 100000;
          break;
        case 8:
          scale = 50000;
          break;
        case 9:
          scale = 25000;
          break;
        case 10:
          scale = 20000;
          break;
        case 11:
          scale = 10000;
          break;
        case 12:
          scale = 5000;
          break;
        case 13:
          scale = 2000;
          break;
        case 14:
          scale = 1000;
          break;
        case 15:
          scale = 500;
          break;
        case 16:
          scale = 200;
          break;
        case 17:
          scale = 100;
          break;
        case 18:
          scale = 50;
          break;
        case 19:
          scale = 20;
          break;
        default:
          scale = 0;
          break;
      }
      return scale;
    };

地图展示

具体可以参考地图http://api.map.baidu.com/lbsapi/getpoint/index.html,来看看缩放比例与比例尺的关系:


目录
相关文章
|
网络协议 前端开发 Java
SpringBoot 整合 WebSocket
WebSocket是基于TCP协议的一种网络协议,它实现了浏览器与服务器全双工通信,支持客户端和服务端之间相互发送信息。在有WebSocket之前,如果服务端数据发生了改变,客户端想知道的话,只能采用定时轮询的方式去服务端获取,这种方式很大程度上增大了服务器端的压力,有了WebSocket之后,如果服务端数据发生改变,可以立即通知客户端,客户端就不用轮询去换取,降低了服务器的压力。目前主流的浏览器都已经支持WebSocket协议了。
SpringBoot 整合 WebSocket
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
6月前
|
数据采集 监控 数据管理
数据管理最容易混淆的3个概念:元数据、数据元、元模型
本文深入解析数据领域三大核心概念:“元数据”“数据元”“元模型”,从定义、用途到实际应用,清晰区分三者区别。元数据是“数据的说明书”,描述数据来源与使用方式;数据元是“最小数据单元”的标准,确保数据统一与规范;元模型是“模型的设计规则”,指导模型合理构建。三者相辅相成,是数据治理不可或缺的基础。掌握它们,助你提升数据管理效率,避免踩坑。
|
12月前
|
人工智能 自然语言处理 Java
Spring 集成 DeepSeek 的 3大方法(史上最全)
DeepSeek 的 API 接口和 OpenAI 是兼容的。我们可以自定义 http client,按照 OpenAI 的rest 接口格式,去访问 DeepSeek。自定义 Client 集成DeepSeek ,可以通过以下步骤实现。步骤 1:准备工作访问 DeepSeek 的开发者平台,注册并获取 API 密钥。DeepSeek 提供了与 OpenAI 兼容的 API 端点(例如),确保你已获取正确的 API 地址。
Spring 集成 DeepSeek 的 3大方法(史上最全)
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
11669 120
|
资源调度 JavaScript 定位技术
Vue2使用百度地图展示或搜索地点(vue-baidu-map)
本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件,包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件,并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记,以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用,请确保已获取百度地图 API 的密钥。
3295 1
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
3926 0
|
Rust 定位技术
一行命令快捷构建在线地图字体切片服务
一行命令快捷构建在线地图字体切片服务
301 3
|
Ubuntu 网络协议 关系型数据库
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
1414 0
Vue使用地图以及实现轨迹回放 附完整代码