1. Obtain the perspective range of the map
this.map.getView().calculateExtent(this.map.getSize());
2. Get map resolution
// 获取地图视图的分辨率
var resolution = this.map.getView().getResolution();
3. Positioning
//定位视图
this.map.getView().fit( [extentArr[0], extentArr[1], extentArr[2], extentArr[3]], {
padding: [0, 0, 0, 0], //上, 右,下,左
duration: 500,
});
//定位中心点
this.map.getView().fit(center, {
duration: 1000, //动画的持续时间,
maxZoom: 18,
callback: null,
});
4. Get all layers
this.map.getLayers().getArray()
5. Map movement monitoring
this.map.on("moveend",(e)=>{
//方法
})
6. Zoom listening events
this.map.getView().on('change:resolution', (event) => {
//方法
});
7. Mouse click
this.map.on("click", (ev) => {
const mouse = ev.coordinate; // 鼠标点击的坐标位置
})
8. Remove double-click to enlarge
//禁用双击放大事件
let doubleClickZoom = new ol.interaction.DoubleClickZoom();
let doubleClickZoomArr = this.map
.getInteractions()
.array_.filter((item) => {
return item.constructor.name === doubleClickZoom.constructor.name;
});
this.map.removeInteraction(doubleClickZoomArr[0]);
9. Rendering monitoring, suitable for monitoring layer drawing and changing the position of some self-defined elements in real time
//监听地图 去实时计算一些东西,比如位置
this.map.on("postrender", function (ev) {
})
//监听图层 去改变栅格图层的一些样式
myLayer.on("postrender", (e) => {
const vectorContext = getVectorContext(e);
e.context.globalCompositeOperation = "destination-in";
clipLayer.getSource().forEachFeature(function (feature) {
vectorContext.drawFeature(feature, style);
});
e.context.globalCompositeOperation = "source-over";
});