三章-15-比例尺控件的使用

作者: 彩云飘过 | 来源:发表于2020-04-20 17:50 被阅读0次

三章-15-比例尺控件的使用
控件 Control
可视化D3.js库(6)-比例尺
Agisoft PhotoScan-中级教程-编码目标和比例尺
地图的故事
学习笔记—Android 控件架构与自定义控件
D3.js --- 第二章比例尺与坐标轴
D3系列01－svg图形的比例尺和坐标
D3系列07-比例尺
<第一行代码>chapter 3

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1015.html ，对应的官网示例 https://openlayers.org/en/latest/examples/scaleline-indiana-east.html?q=rotation

地图拖动过程中，比例尺在变化，是因为地图是一个球体，投影到平面上时，不同的地区比例尺不同。

image.png

<!DOCTYPE html>
<html>

<head>
  <title>比例尺控件的使用
  </title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css">
  <script src="../include/ol.js"></script>

</head>
<style>

</style>

<body>
  <select id="units">
    <option value="degrees">度</option>
    <option value="imperial">英制英尺</option>
    <option value="us">美制英尺</option>
    <option value="nautical">海里</option>
    <option value="metric" selected>公制</option>
  </select>
  <div id="map" class="map"></div>

  <script>
    var scaleLineControl = new ol.control.ScaleLine();

    var map = new ol.Map({
      controls: ol.control.defaults().extend([
        scaleLineControl
      ]),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });


    var unitsSelect = document.getElementById('units');
    
    function onChange() {
      scaleLineControl.setUnits(unitsSelect.value);//设置比例尺单位
    }
    unitsSelect.addEventListener('change', onChange);

    onChange();

  </script>
</body>

</html>