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,map.getSize());

解决方法

要将缩放限制为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}),