Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • React

  • Vue

  • JavaScript文章

  • 学习笔记

  • openlayers

    • Openlayers用图片填充面
    • Openlayers用图片填充线
    • openlayers处理大量Overlay渲染问题
    • openlayers的比例尺
      • openlayers水印
      • openlayer实现矢量图层点击高亮效果
      • openlayers实现自定义路径
      • Openlayers加载渲染矢量切片
      • openlayers实现角度测量
      • openlayers实现长度测量
      • openlayers实现面积测量
      • Openlayers实现方位角测量
      • Openlayers中的动画
      • Openlayers的多边形高级交互
      • Openlayers地图底图换色
      • Openlayers种的默认交互事件
      • Openlayers默认键盘交互实现
      • 源码分析之Openlayers中默认键盘事件触发机制
      • 源码分析之Openlayers中的Collection类
    • threejs

    • MapboxGL

    • 工具

    • 源码合集

    • 前端
    • openlayers
    东流
    2024-10-14
    目录

    openlayers的比例尺

    # 概述

    本文简单介绍 Openlayers 的比例尺知识。

    # 比例尺单位

    Openlayers 中比例尺的单位主要有四种:度(degrees)、英尺(imperial)、海里(nautical)和公制(metric),其中英尺又分为英制英尺(imperial)和美制英尺(us)

    # 比例尺单位换算

    以下是度、英尺、海里、公制单位(以米为例)之间的一些常见换算公式:

    一、度与米的换算 地理坐标中的度(°)与距离(米)的换算比较复杂,因为它取决于纬度。

    • 在赤道上,1 度大约等于 111319.5 米。随着纬度的升高,1 度对应的距离会逐渐减小。
    • 可以使用以下近似公式计算特定纬度上 1 度对应的距离(单位:米):111319.5 * cos (纬度)。

    二、英尺与米的换算 1 英尺 = 0.3048 米

    三、海里与米的换算 1 海里 = 1852 米

    • 例如:

    如果要将 5000 英尺转换为米,可以这样计算:5000 * 0.3048 = 1524 米 如果有 3 海里要转换为米:3 * 1852 = 5556 米

    # Openlayers 中的比例尺

    Openlayers 中的比例尺控件是在ol.control.ScaleLine中实现的。

    设置比例尺

    语法:map.addControl(new ScaleLine());

    Openlayers 默认的比例尺单位是由地图定义时设置的坐标参考系决定的,比如如果坐标参考系是EPSG:4326,比例尺单位就是度,如果是EPSG:3857,则单位就是公制

    动态修改比例尺单位

    代码如下:

    const scaleControl = map
      .getControls()
      .getArray()
      .find((control) => control instanceof ScaleLine);
    
    if (scaleControl.getUnits() != v) {
      scaleControl.setUnits(v); //v的取值 度:degrees 英制英尺:imperial 美制英尺:us 海里:nautical 公制:metric
    }
    
    1
    2
    3
    4
    5
    6
    7
    8

    思路:首先获取地图控件,遍历控件,判断控件是否是ScaleLine类的实例,然后调用getUnits()方法获取当前比例尺单位,修改比例尺单位调用setUnits()方法,

    编辑 (opens new window)
    上次更新: 2024/11/12, 10:01:20
    openlayers处理大量Overlay渲染问题
    openlayers水印

    ← openlayers处理大量Overlay渲染问题 openlayers水印→

    最近更新
    01
    GeoJSON
    05-08
    02
    Circle
    04-15
    03
    CircleMarker
    04-15
    更多文章>
    Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式