八、OpenLayer一些常用的方法总结

1、获取地图的视角范围

this.map.getView().calculateExtent(this.map.getSize());

2、获取地图分辨率

// 获取地图视图的分辨率
var resolution = this.map.getView().getResolution();

3、定位

 //定位视图
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、获取所有图层

this.map.getLayers().getArray()

5、地图移动监听

this.map.on("moveend",(e)=>{
   //方法
})

6、缩放监听事件

this.map.getView().on('change:resolution', (event) => {
   //方法
});

7、鼠标点击

    this.map.on("click", (ev) => {
      const mouse = ev.coordinate; // 鼠标点击的坐标位置
    })

8、移除双击放大

 //禁用双击放大事件
 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、渲染监听，适用于监听图层绘制，以及实时改变自己定义的一些元素的位置

//监听地图 去实时计算一些东西，比如位置
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";
});