openlayers：实现图层缩放限制(附完整源码）

源代码大师

于 2024-01-29 22:43:26 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers实战教程文章标签：开发语言 openlayers

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/135922739

openlayers实战教程专栏收录该内容

417 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

这篇原创博客分享了如何在OpenLayers中实现图层缩放限制的详细步骤，包括关键代码片段，覆盖了main.js、index.html和package.json的配置。通过阅读，读者可以了解到如何设置地图的缩放级别，确保用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图层支持minZoom和maxZoom选项，用于根据视图的缩放级别控制可见性。如果设置了最小或最大缩放，则图层仅在大于minZoom且小于或等于maxZoom的缩放级别下可见。施工结束后，可利用该层的setMinZoom和setMaxZoom进行限位。此示例显示了缩放级别为14和更低的OSM图层以及缩放级别高于14的USGS图层。

main.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileJSON from 'ol/source/TileJSON.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {fromLonLat} from 'ol/proj.js';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      maxZoom: 14, // visible at zoom levels 14 and below
      source: new OSM(),
    }),
    new TileLayer({
      minZoom: 14, // visible at zoom levels above 14
      source: new TileJ