Html Openlayers-仅显示特定缩放级别以上的图层_Html_If Statement_Vector_Openlayers_Layer

Html Openlayers-仅显示特定缩放级别以上的图层

html if-statement vector openlayers

Html Openlayers-仅显示特定缩放级别以上的图层,html,if-statement,vector,openlayers,layer,Html,If Statement,Vector,Openlayers,Layer,我正在使用不同的矢量图层制作一张开放图层地图。我想添加一个函数，即某个向量层仅以特定的缩放值显示，例如缩放>=18。我尝试了minZoom和minScale/maxScale功能，但没有成功。我希望在缩放级别>=18时显示的向量层称为“dach层”。我还尝试用if函数来解决它： // dach layer anzeigen versuch const dach = document.getElementById('dach'); dach.addEventListener('click', fu

我正在使用不同的矢量图层制作一张开放图层地图。我想添加一个函数，即某个向量层仅以特定的缩放值显示，例如缩放>=18。我尝试了minZoom和minScale/maxScale功能，但没有成功。我希望在缩放级别>=18时显示的向量层称为“dach层”。我还尝试用if函数来解决它：

// dach layer anzeigen versuch
const dach = document.getElementById('dach');
dach.addEventListener('click', function (event) {
  var checkBox = document.getElementById("dach");
  if (checkBox.checked == true) {
    if (map.getZoom() > 17) {
      dachLayer.setMap(map);
      //hitzeLayer.setVisible(true);
    }
   } else {
      //hitzeLayer.setVisible(false);
      dachLayer.setMap(undefined);
    }
});

这是我使用的代码：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {
  fromLonLat,
  toLonLat
} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {
  circular
} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(0, 128, 0, 1)'
    }),
    stroke: new Stroke({
      color: '#000000',
      width: 1.25
    }),
    radius: 15
  })
}));

var element = document.getElementById('search');
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function () {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });
      searchResultSource.clear();
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
      if (!searchResultSource.isEmpty()) {
        map.getView().fit(searchResultSource.getExtent(), {
          maxZoom: 18,
          duration: 500
        });
      }
    };
    xhr.send();


  }
}

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
  type: 'base',
  source: new OSM()
});

// Statellit
const satellitLayer = new TileLayer({
  source: new XYZ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
  })
});

//shape
const dachLayer = new VectorLayer({
  source: new Vector({
    name: 'dach',
    url: 'data/dach.geojson',
    format: new GeoJSON()
  })
});

dachLayer.setStyle(new Style({
  fill: new Fill({
    color: 'brown'
  }),
  stroke: new Stroke({
    color: 'brown',
    width: 0.25
  }),
}));

// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
dachLayer.setZIndex(15);

// dach layer anzeigen
const dach = document.getElementById('dach');
dach.addEventListener('click', function (event) {
  var checkBox = document.getElementById("dach");
  if (checkBox.checked == true) {
    dachLayer.setMap(map);
    //hitzeLayer.setVisible(true);
  } else {
    //hitzeLayer.setVisible(false);
    dachLayer.setMap(undefined);
  }
}); 

// Get the OSMbase Base-Button
const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function (event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
  //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function (event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);
});

getZoom（）

方法源自视图模块：

以下工作：

dach.addEventListener('click', function (event) {
  var checkBox = document.getElementById("dach");
  if (checkBox.checked == true) {
    if (map.getview().getZoom() > 17) {
      dachLayer.setMap(map);
      //hitzeLayer.setVisible(true);
    }
   } else {
      //hitzeLayer.setVisible(false);
      dachLayer.setMap(undefined);
    }
});

同时，您可能希望查看地图上的“moveend”事件，以侦听缩放更改，而不是单击：

map.on('moveend', () => {
// do kewl things
}

getZoom（）

方法源自视图模块：

以下工作：

dach.addEventListener('click', function (event) {
  var checkBox = document.getElementById("dach");
  if (checkBox.checked == true) {
    if (map.getview().getZoom() > 17) {
      dachLayer.setMap(map);
      //hitzeLayer.setVisible(true);
    }
   } else {
      //hitzeLayer.setVisible(false);
      dachLayer.setMap(undefined);
    }
});

同时，您可能希望查看地图上的“moveend”事件，以侦听缩放更改，而不是单击：

map.on('moveend', () => {
// do kewl things
}

我只是厌倦了它，但代码不起作用：/vector层根本不出现创建了一个JSFIDLE，在这里工作很好：删除了你的复选框，但太懒了，无法将其放入HTML中。它只在我单击+缩放按钮时切换层，但是如果我在不单击+缩放按钮的情况下放大，则不会发生任何事情。所以我需要插入地图（'moveend'，…使其在我不单击+按钮的情况下放大时显示？我做对了吗？此时您正在侦听某个特定元素上的单击事件。我假设它在地图上。因此，如果您使用鼠标缩放，则在单击div内部之前不会触发条件语句。如果删除单击事件，则d用“moveend”事件替换它，正如我前面所说的，如果（map.getview（）.getZoom（）>17）在“move”结束时触发条件语句

好吧，我不明白，它不起作用，我试着用“moveend”替换“click”，但不知怎么的，该层消失了。我只是厌倦了它，但代码不起作用：/vector层一点也不显示创建了JSFIDLE，在这里工作很好：删除了复选框，但懒得将其放入HTML中。这是somehow仅在我单击+缩放按钮时切换图层，但是如果我在未单击+缩放按钮的情况下进行放大，则不会发生任何事情。因此，我需要插入地图（'moveend'，…使其在我不单击+按钮的情况下放大时显示？我做对了吗？此时您正在侦听某个特定元素上的单击事件。我假设它在地图上。因此，如果您使用鼠标缩放，则在单击div内部之前不会触发条件语句。如果删除单击事件，则d用“moveend”事件替换它，正如我前面所说的，如果（map.getview（）.getZoom（）>17）在“move”结束时触发条件语句。我想这会像你期望的那样工作。好吧，我不明白，它不起作用，我试着用“移动结束”替换“点击”，但不知怎的，图层消失了minZoom应该可以工作，而且使用起来更简单。请记住，像maxResolution minZoom一样，minZoom是独占的，所以要包含级别18，你需要设置minZoom:17.9999
，如下所示一个简单的例子，在第4级打开时，我尝试了minZoom功能，但它不起作用。该层仍以较低的缩放级别显示。您使用的OpenLayers是哪个版本？我认为是最新的版本，因此v.6这是我希望在缩放级别>18时显示的层，以及我如何编辑它：const dachLayer=new VectorLayer({minZoom:17.9999，来源：新向量（{name:'dach'，url:'data/dachnotnull.geojson'，格式：new geojson（）}）
minZoom应该可以工作，而且使用起来更简单。请记住，像maxResolution minZoom一样，minZoom是独占的，所以要包含级别18，您需要设置minZoom:17.9999
下面是一个在级别4打开的简单示例，我尝试了minZoom功能，但它不起作用。该层仍然以较低的缩放级别显示。Whi你使用的是哪个版本的OpenLayers？我想是最新的一个，所以v.6这就是我想在zoom level>18显示的层，以及我如何编辑它：const dachLayer=new VectorLayer（{minZoom:17.9999，source:new Vector（{name:'dach'，url:'data/dachnotnull.geojson'，format:new geojson（）}）；