OpenLayers 加载比例尺控件

原创已于 2025-05-26 19:09:38 修改 · 310 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-05-24 20:39:07 首次发布

WebGIS 同时被 2 个专栏收录

82 篇文章

订阅专栏

OpenLayers

66 篇文章

订阅专栏

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。这些控件都是基于

ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）

本节主要介绍比例尺控件。

1. 比例尺控件

比例尺表示图上距离与实际距离之比，反映客观世界的尺度。OpenLayers比例尺控件默认显示在地图左下角，可以通过修改CSS样式进行调整。

1.1. 创建比例尺控件目标容器

创建鼠标位置DIV容器，并设置其CSS样式

<body>
  <div id="map" title="地图显示"></div>
 <div class="custome-scale-line" id="custome-scale-line"></div>
</body>

设置比例尺控件居于地图顶部，并居中显示。

#custome-scale-line{
  position: relative;
  margin: 0 auto;
  top: 10px;
  width: 200px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}

.custome-scale-line-inner {
  margin: 1px;
  border: 1px solid #eee;
  border-top: none;
  color: #eee;
  font-size: 10px;
  text-align: center;
  background: #060505ba;
  will-change: contents,width;
}

1.2. 创建比例尺控件

比例尺控件可以设置单位、类名、目标容器等参数，默认可以不传参数。对于自定义比例尺控件，需要传递自定义样式类名以及放置比例尺控件的目标容器。

  const scaleLineControl = new ol.control.ScaleLine({
      // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
    	units: 'metric', 
      // 自定义css类样式名
      className: 'custome-scale-line',
      // minWidth: 100,// 最小宽度，默认64
      // 放置比例尺控件的目标容器
      target: document.querySelector("#custome-scale-line")
  })

1.3. 加载比例尺控件

加载比例尺控件的方法有两种，一种是通过Map属性controls加载，另一种是通过Map方法addControl加载。

// 方式1
const map = new ol.Map({
    target: "map",
    view: new ol.View({
        center: [11444274, 12707441],
        zoom: 5,
        worldsWrap: true,
        minZoom: 1,
        maxZoom: 20,
    }),
    // 鼠标控件：鼠标在地图上移动时显示坐标信息。
    controls: ol.control.defaults().extend([
        scaleLineControl
    ])
})

// 方式2
map.addControl(scaleLineControl)

2. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>加载比例尺控件</title>
    <meta charset="utf-8" />
    <script src="../libs/js/ol-5.3.3.js"></script>
    <script src="../libs/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../libs/css//ol.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #custome-scale-line{
            position: relative;
            margin: 0 auto;
            top: 10px;
            width: 200px;
            text-align: center;
            color: #fff;
            border-radius: 5px;
        }

        .custome-scale-line-inner {
            margin: 1px;
            border: 1px solid #eee;
            border-top: none;
            color: #eee;
            font-size: 10px;
            text-align: center;
            background: #060505ba;
            will-change: contents,width;
        }
    </style>
</head>
<body>
    <div id="map" title="地图显示"></div>
    <div class="custome-scale-line" id="custome-scale-line"></div>
</body>
</html>
<script>
    //==============================================================================//
    //============================天地图服务参数简单介绍============================//
    //================================vec：矢量图层=================================//
    //================================img：影像图层=================================//
    //================================cva：注记图层=================================//
    //=========================其中：_c表示经纬度，_w表示投影=======================//
    //==============================================================================//
    const TDTImgLayer = new ol.layer.Tile({
        title: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const TDTImgCvaLayer = new ol.layer.Tile({
        title: "天地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    // 创建鼠标控件
    const scaleLineControl = new ol.control.ScaleLine({
        units: 'metric', // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
        className: 'custome-scale-line',// 自定义css类样式名
        // minWidth: 200,// 最小宽度
        target: document.querySelector("#custome-scale-line"),// 放置比例尺控件的目标容器
    })
    const map = new ol.Map({
        target: "map",
        // layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [11444274, 12707441],
            zoom: 5,
            worldsWrap: true,
            minZoom: 1,
            maxZoom: 20,
        }),
        // 鼠标控件：鼠标在地图上移动时显示坐标信息。
        controls: ol.control.defaults().extend([
            // 加载鼠标控件
            // scaleLineControl
        ])
    })
    map.addControl(scaleLineControl)
    map.addLayer(TDTImgLayer)
    map.addLayer(TDTImgCvaLayer)
</script>