openlayers 中設置地圖最佳可視範圍和限制縮放

目前隨着科技發展，智慧城市的不斷髮展，GIS方面的技術也是層出不窮，如市場流行的 OPENLAYERS, CESIUM, THREE等，但是也會有很多棘手的問題，比如不同分辨率下，圖層的顯示範圍，禁止縮放滑動等問題，下面我們就來談談OPENLAYERS對於這方面的設置

1、禁用鼠標縮放

	 // 初始化地圖
   map = new Map({
     target: el,
     view: viewer,
     interactions: olDef({
       doubleClickZoom: false,// 取消雙擊放大功能交互
       mouseWheelZoom: false, // 取消滾動鼠標中間的滑輪交互
       shiftDragZoom: false, // 取消shift+wheel左鍵拖動交互
     })
   });
   

2、禁止鼠標拖動

  let pan = getPan();
  //false：當前地圖不可拖動。true：可拖動
  pan.setActive(false);
  function getPan() {
    let pan ='';
    map.getInteractions().forEach(function(element, index, array) {
      if(element instanceof DragPan) {
        pan = element;
      }
    })
    return pan;
  }
  

3、可視範圍設置

 // 可是範圍 ,這個座標得根據自己的地圖去設置，一般是對角，如: 左上 <--> 右下
let displayRange = olExtent.boundingExtent([[104.89177879000005,31.436460560000057],[102.99076150500008,30.093134960000043]]);
 map.getView().fit(displayRange,map.getSize());

分別將這三個添加到，map初始化中去即可。

題外話：其實高德地圖做可視化控制比ol 簡單map.setFitView(); 這就歐啦，不信去看案例 https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers/