添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

目前随着科技发展,智慧城市的不断发展,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/