【Openlayers9】Openlayers修改控件的默认位置

本文介绍了如何使用CSS和OL.js来修改OpenLayers地图中的默认缩放、全屏和鹰眼控制组件的位置,包括使用CSS样式和直接修改ol.css文件的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

两种方法:

1. 自己写css样式修改(需要考虑left/right/bottom/top);

2. 直接修改ol.js

(学习新手,请多多指导)

比如要设置缩放控件

.map .ol-zoom {
  top: 10px;
  left: auto;
  right: 10px;
}

需要注意的是在map的div里面设置class=‘map’。

缩放控件应该是OSM地图自带的。完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
    <title>test</title>
    <style>
        .map {
            height: 800px;
            width: auto;
        }

        .map .ol-zoom {
            top: 10px;
            left: auto;
            right: 10px;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    const map= new ol.Map({
        target: 'map',
        view: new ol.View({
            center:[0,0],
            zoom: 5,
        }),
        layers:[new ol.layer.Tile({
            source: new ol.source.OSM(),
        })]
    })
</script>
</body>
</html>

参考网页:openlayers - How to Change position of default zoom tool of Open Layers using css? - Stack Overflow但是再尝试其他控件,例如再加上一个全屏控件。

这俩控件的默认位置是:

在style里面加入

.map .ol-zoom {
            top: 10px;
            left: auto;
            right: 10px;
        }

.map .ol-full-screen {
            left: .5em;
            top: .5em;
        }

之后,变成:

可以看到全屏控件从右边移到左边,并且还有一条不透明灰色的条带。(后记:加上right: auto; bottom: auto;可以让条带消失)。

如果对鹰眼控件overview来说,在style里面加上:

.map .ol-overviewmap {
            right: 0.5em;
            bottom: 0.5em;
        }

就会从这样:

变成这样:

在css里写成下面这样,就能实现(可见还是css没学好)。这样gpt说是取消了底部和左侧的定位,确保元素紧贴页面的右上边界

.ol-overviewmap{
            bottom: auto;
            left:auto;
            right: 0;
            top: 0;
        }

要不然,直接修改ol.css,就行。

直接在ol.css里面修改,如下:

然后就能实现啦,或者也可以重新复制个ol.css,在里面改也行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值