作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我得到了一个非常基本的代码。我无法安排“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())
});
最佳答案
实际上 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 代码了!
关于javascript - Openlayers minZoom 和 maxResolution 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63706287/
我创建了一个 openlayers map ,其最小缩放级别应固定为 2 . 如果 则效果很好。 ,包含 map ,大小约为 1000 px x 750 px : 现在我们的容器尺寸变化很大。这样我
我得到了一个非常基本的代码。我无法安排“mahalle”层的 minZoom。我希望它在 5-6 缩放级别后可见。我也可以使用 maxResolution,但它也不起作用。 奇怪的部分是 maxZoo
我是一名优秀的程序员,十分优秀!