openlayers限制地图显示范围

最新推荐文章于 2024-07-17 15:26:15 发布

筱筱玉~

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量2.1k

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44734152/article/details/125975515

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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);
 }