时间戳

首页 > 解决方案 > OpenLayers 基础层（OSM）不如 osm.org 流畅

openlayers-6 - OpenLayers 基础层（OSM）不如 osm.org 流畅

问题描述

我是 OpenLayers 的新手，并开始着手处理它。我添加了基础层（osm）。但我注意到 OpenLayers 基础层不如 org.com 平滑。当我尝试放大和缩小时，会出现步进缩放，而osm.org只有 18 个缩放级别，而 OpenLayers 不止于此。我想要完全相同的平滑度和更少的缩放级别。

var gridsetName = "EPSG:900913";
var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20', 'EPSG:900913:21', 'EPSG:900913:22', 'EPSG:900913:23', 'EPSG:900913:24', 'EPSG:900913:25', 'EPSG:900913:26', 'EPSG:900913:27', 'EPSG:900913:28', 'EPSG:900913:29', 'EPSG:900913:30'];    
var baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";
var style = "";
var format = "application/vnd.mapbox-vector-tile";
var projection = new Projection({
    code: "EPSG:900913",
    units: "m",
    axisOrientation: "neu",
});
var layerCache = {};

var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.2985821416974068, 0.1492910708487034, 0.0746455354243517, 0.0373227677121758, 0.0186613838560879, 0.009330691928044, 0.004665345964022, 0.002332672982011, 0.0011663364910055, 5.831682455027E-4, 2.915841227514E-4, 1.457920613757E-4];
    
var view = new View({
    center: [0, 0],
    zoom: 2,
    resolution: resolutions,
    projection: projection,
    extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
});

var map = new Map({
    layers: [
        new TileLayer({
            preload: Infinity,
            source: new OSM({ cacheSize: 20000 }),
        }),
    ],
    target: "map",
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    view: view,
});
map
    .getView()
    .fit([-20037508.34, -20037508.34, 20037508.34, 20037508.34], map.getSize());

标签： openlayers-6

解决方案

要将缩放限制为 18 级，您需要在视图选项中指定 maxZoom，而在 OpenLayers 6 中，您需要指定 multiWorld: true 才能缩放 0。您还可以限制为整数缩放级别等。

var view = new View({
    center: [0, 0],
    zoom: 2,
    maxZoom: 18,
    multiWorld: true,
    constrainResolution: true,
    smoothResolutionConstraint: false,
});

您还可以设置地图交互的选项以改变缩放动画的持续时间，例如：

interactions: defaultInteractions({zoomDuration: 100}),

推荐阅读