Openlayers minZoom and maxResolution is not working

Question

I got a very basic code. I can not manage to arrange minZoom of "mahalle" layer. I want it to be visible after 5-6 zoom levels. I can also use maxResolution but it is not working either.

Strange part is maxZoom or minResolution is working! If I add "minResolution: 4000" or "maxZoom: 6" it is working but in a opposite way. So when i open the map i see the layer and when I zoom in after 4-5 zooms, it disappears but i want to do the opposite way, it should appear after 5-6 zoom levels.

Here it is my code:

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import VectorSource from 'ol/source/Vector';
import GeoJSON from "ol/format/GeoJSON";
import {bbox} from 'ol/loadingstrategy';
import VectorLayer from 'ol/layer/Vector';
import {Fill, Stroke, Style, Text} from 'ol/style';

var style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.6)',
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1,
  }),
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: '#000',
    }),
    stroke: new Stroke({
      color: '#fff',
      width: 3,
    }),
  }),
});

const vectorSource = (layer) => {
  return new VectorSource({
    format: new GeoJSON(),
    url: (extent) => {
      return (`http://localhost:8080/geoserver/Bugra/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Bugra:${layer}&outputFormat=application/json&srsname=EPSG:3857&bbox=${extent.join(',')}`);
    },
    strategy: bbox,
  })
};

// Layer creating class
const mahalle = new VectorLayer({
  source: vectorSource("ABS_MAHALLE_M"),
  style: function (feature) {
    style.getText().setText(feature.get('adi'));
    return style;
  },
  // These are working separately but in the opposite way
  // maxZoom: 6,
  // minResolution: 4000,

  // This is the way i want to apply but not working
  // maxResolution: 4000,
  // minZoom: 6
});

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      maxZoom: 20, // visible at zoom levels 14 and below
      source: new OSM(),
    }),
    mahalle
  ],
  view: new View({
    center: [0, 0],
    zoom: 1
  }),
});

map.getView().on("change", function() {
  console.log(map.getView().getResolution());
  console.log(mahalle.getMaxResolution())
});

user_13494210 · Answer

Actually Mike found the solution.

Thanks Mike! With your clear example i found the piece i forgot. For anyone having the same problem I forgot to add this ",EPSG:3857" code after my geoserver URL. So here is the correct code:

const vectorSource = (layer) => {
  return new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: (extent) => {
      return (`http://localhost:8080/geoserver/Bugra/ows? service=WFS&version=1.0.0&request=GetFeature&typeName=Bugra:${layer}&outputFormat=application/json&srsname=EPSG:3857&bbox=${extent.join(',')},EPSG:3857`);
    },
    strategy: ol.loadingstrategy.bbox,
  })
};

After that, now I can use minZoom: XXXX code perfectly!

Openlayers minZoom and maxResolution is not working

1 Answers