javascript - Openlayers minZoom 和 maxResolution 不工作

Question

我得到了一个非常基本的代码。我无法安排“mahalle”层的 minZoom。我希望它在 5-6 缩放级别后可见。我也可以使用 maxResolution，但它也不起作用。

奇怪的部分是 maxZoom 或 minResolution 正在工作!如果我添加“minResolution: 4000”或“maxZoom: 6”，它可以正常工作，但方式相反。因此，当我打开 map 时，我看到了该图层，当我在放大 4-5 级后放大时，它消失了，但我想以相反的方式进行操作，它应该在 5-6 级缩放级别后出现。

这是我的代码:

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

Answer 1

实际上 Mike 找到了解决方案。

谢谢迈克!通过您的明确示例，我找到了我忘记的那篇文章。对于遇到同样问题的任何人，我忘记在我的地理服务器 URL 之后添加此 ",EPSG:3857" 代码。所以这是正确的代码:

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

在那之后，现在我可以完美地使用 minZoom: XXXX 代码了!