openlayers限制地图显示范围

openlayers限制地图显示范围

1.静态限制地图显示范围

适用于创建地图时,限制区域不发生改变
关键在于设置view对象 其中extent 属性是设置视图范围的

export default class CreateMap {
  constructor(id) {
    this.map = new Map({
      controls: [], // 地图控件
      target: id,
      layers: [
        new TileLayer({
          id: 'BASEMAP_VECTOR_LAYER',
          preload: Infinity,
          extent:[], // 长度为4的数组, 传入地图对角投影坐标
          source: new Tianditu({ projection: 'PROJECTION_4326', cacheSize: 204800 }),
          visible: true,
        }),
        new TileLayer({
          id: 'BASEMAP_VECTOR_LAYER',
          preload: Infinity,
           extent:[], // 长度为4的数组, 传入地图对角投影坐标
            source: new Tianditu({
            projection:'PROJECTION_4326',
            layerType: 'img',
            cacheSize: 204800,
          }),
          visible: false,
        }),
      ],
      view: new View({
        projection: PROJECTION_4326,
        center: config.map.center,
        extent:[], // 长度为4的数组, 传入地图对角投影坐标,
        maxZoom: 23,
        minZoom: 1,
        zoom: 11,
      }),
    });
  }
}

1.动态限制地图显示范围

适用于切换不同的限制区域

const view = map.getView();
// feature为 特征对象
让特征对象填充整个视图 并放在视图中间
 view.fit(feature.getGeometry(), {
   padding: [0, 0, 0, 0],
   maxZoom,
 });
 limitExtent();


 // 限制地图显示范围
 
 limitExtent() {
 // 获取地图投影坐标
   const extent = this.map.getView().calculateExtent(this.map.getSize());
   const viewExtent = new View({
     projection:PROJECTION_4326,
     center: this.map.getView().getCenter(),
     extent,
     zoom: this.map.getView().getZoom(),
     maxZoom: 19,
     minZoom:1,
     constrainResolution: true,
     smoothResolutionConstraint: true,
   });
   this.map.setView(viewExtent);
 }

注意因为是创建了一个新View 所以跟之前的view绑定的事件会消失,比如
change:resolution 事件 需要重新进行绑定

要恢复之前的视图 需要恢复地图创建时的view

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值