两种方法:
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,在里面改也行。