这个例子演示了如何调整地图的视图，使几何图形或坐标定位在特定的像素位置。上面的地图有顶，右，底，左填充应用在视口中。视图的fit方法用于在视图中匹配具有相同填充的几何图形。视图的centerOn方法用于将坐标(洛桑)定位在特定的像素位置(黑盒子的中心)。
这个例子演示了如何调整地图的视图，使几何图形或坐标定位在特定的像素位置。上面的地图有顶，右，底，左填充应用在视口中。视图的fit方法用于在视图中匹配具有相同填充的几何图形。视图的centerOn方法用于将坐标(洛桑)定位在特定的像素位置(黑盒子的中心)。
使用Alt+Shift+拖动旋转地图。
注意:这个例子没有移动视图中心。所以缩放控制和旋转地图将仍然使用视口的中心作为锚点。要基于填充来移动整个视图，请使用视图上的填充选项。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"
type="text/css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- css代码 -->
<style>
.map {
width: 1000px;
height: 600px;
}
.mapcontainer {
position: relative;
}
/* 地图缩放组件样式, 可使用top left两个属性定位 */
.map .ol-zoom {
top: 178px;
left: 158px;
}
/* 地图旋转组件样式, 可使用top right两个属性定位 */
.map .ol-rotate {
top: 178px;
right: 58px;
}
/* 版权信息样式, 可使用display: none; 来隐藏 */
.map .ol-attribution,
.map .ol-attribution.ol-uncollapsible {
bottom: 30px;
right: 50px;
}
.padding-top {
position: absolute;
top: 0;
left: 0px;
width: 1000px;
height: 170px;
background: rgba(255, 255, 255, 0.5);
}
.padding-left {
position: absolute;
top: 170px;
left: 0;
width: 150px;
height: 400px;
background: rgba(255, 255, 255, 0.5);
}
.padding-right {
position: absolute;
top: 170px;
left: 950px;
width: 50px;
height: 400px;
background: rgba(255, 255, 255, 0.5);
}
.padding-bottom {
position: absolute;
top: 570px;
left: 0px;
width: 1000px;
height: 30px;
background: rgba(255, 255, 255, 0.5);
}
.center {
position: absolute;
border: solid 1px black;
top: 490px;
left: 560px;
width: 20px;
height: 20px;
}
button {
font-size: 18px;
margin: 10px 5px;
padding: 10px;
}
</style>
<title>Advanced View Positioning 高级视图定位</title>
</head>
<body>
<!-- html代码 -->
<div class="mapcontainer">
<!-- 地图组件 -->
<div id="map" class="map"></div>
<!-- 半透明遮罩层 -->
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></div>
<!-- 中心黑框 -->
<div class="center"></div>
</div>
<button id="zoomtoswitzerland">以最佳比例缩放到瑞士</button>
<button id="zoomtolausanne">以最小分辨率缩放到洛桑</button><br>
<button id="centerlausanne">将洛桑放置到中心</button>
<!-- script代码 -->
<script>
// 加载geojson文件，创建资源对象
const source = new ol.source.Vector({
url: 'https://openlayers.org/en/latest/examples/data/geojson/switzerland.geojson',
format: new ol.format.GeoJSON(),
});
// 创建样式对象
const style = new ol.style.Style({
// 填充样式
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
// 边框样式
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1,
}),
// 图片样式，此处代表点的样式，以圆Circle呈现
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1,
}),
}),
});
// 创建矢量图层
const vectorLayer = new ol.layer.Vector({
source: source,
style: style,
});
// 创建视图
const view = new ol.View({
center: [0, 0],
zoom: 1,
});
// 地图初始化
const map = new ol.Map({
// 设置图层
layers: [
// OSM底图
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
// 刚创建的矢量图层
vectorLayer,
],
// 绑定页面元素
target: 'map',
// 设置视图
view: view,
});
// 绑定按钮点击事件
// 以最佳比例缩放到瑞士
const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener(
'click',
function () {
// 获取瑞士多边形polygon对象
const feature = source.getFeatures()[0];
const polygon = feature.getGeometry();
// 最佳比例缩放到瑞士
view.fit(polygon, { padding: [170, 50, 30, 150] });
},
false
);
// 以最小分辨率缩放到洛桑
const zoomtolausanne = document.getElementById('zoomtolausanne');
zoomtolausanne.addEventListener(
'click',
function () {
// 获取洛桑点位point对象
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
// 以50分辨率缩放到洛桑
view.fit(point, { padding: [170, 50, 30, 150], minResolution: 50 });
},
false
);
// 将洛桑放置到中心
const centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener(
'click',
function () {
// 获取洛桑点位point对象
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
// 获取地图尺寸
const size = map.getSize();
// 将洛桑点位放置到地图[570, 500]位置
view.centerOn(point.getCoordinates(), size, [570, 500]);
},
false
);
</script>
</body>
</html>
如果你有疑问，为什么可以定位到瑞士，以及那个城市的点，可以试试访问html代码里的url：
https://openlayers.org/en/latest/examples/data/geojson/switzerland.geojson
应该就能理解了~
箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。
