Openlayers tutorial - Get map center point, range and zoom level
In the previous project, it was necessary to obtain the center point and range of the map in real time, which was not difficult. For the convenience of use, I will record and share it here.
This article includes core code, complete code, and online examples.
core code
// 获取中心点
function getCenter() {
const center = ol.extent.getCenter(getExtent())
console.log('center：',center);
addPoint(center);
return center;
}
// 获取范围
function getExtent() {
const size = map.getSize();
const extent = map.getView().calculateExtent(size);
console.log('extent：',extent);
addExtent(extent);
return extent
}
// 获取地图等级
function getZoom() {
alert(map.getView().getZoom());
}
Complete code:
<html lang="en">
<head>
<meta charset="utf-8">
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
<style>
/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
.map {
height: 400px;
width: 100%;
float: left;
}
</style>
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<script src="http://openlayers.vip/examples/resources/ol.js"></script>
<script src="./tiandituLayers.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>tianditu ocean layer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">
var map = new ol.Map({
// 地图容器
target: 'map',
// 地图图层，比如底图、矢量图等
layers: [
getIMG_CLayer(),
getIBO_CLayer(),
getCIA_CLayer(),
],
// 地图视野
view: new ol.View({
projection: "EPSG:4326",
// 定位
center: [116, 39],
// 缩放
zoom: 4,
maxZoom: 18,
minZoom: 1,
})
});
// 默认样式
var defaultStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 0.5,
})
}), new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#00f0f0',
width: 6,
})
}), new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 0.5,
})
}), new ol.style.Style({
//填充样式
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'white',
})
})
})]
// 创建数据源，添加要素
const source = new ol.source.Vector();
// 创建要素图层
const layer = new ol.layer.Vector({
source: source,
style: defaultStyle
});
map.addLayer(layer);
// 添加中心点
function addPoint(position){
// 创建要素，设置其样式
var feature = new ol.Feature({
geometry: new ol.geom.Point(position)
});
clearFunc();
addFeature(feature);
}
// 添加范围
function addExtent(extent){
// 创建要素，设置其样式
var feature = new ol.Feature({
geometry: ol.geom.Polygon.fromExtent(extent)
});
clearFunc();
addFeature(feature);
}
// 获取中心点
function getCenter() {
const center = ol.extent.getCenter(getExtent())
console.log('center：',center);
addPoint(center);
return center;
}
// 获取范围
function getExtent() {
const size = map.getSize();
const extent = map.getView().calculateExtent(size);
console.log('extent：',extent);
addExtent(extent);
return extent
}
// 获取地图等级
function getZoom() {
alert(map.getView().getZoom());
}
// 清空
function clearFunc() {
source && source.clear();
}
// 添加
function addFeature(feature) {
source && source.addFeature(feature);
}
// getExtent();
</script>
<button id="getCenter" onclick="getCenter()">获取地图视野中心点</button>
<button id="getExtent" onclick="getExtent()">获取地图视野范围</button>
<button id="getZoom" onclick="getZoom()">获取地图当前等级</button>
<button id="clearFunc" onclick="clearFunc()">清空</button>
</body>
</html>
Online example
Online example: Openlayers tutorial - Get map center point, extent and zoom level