- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
限制显示的矢量特征数量在 OpenLayers 中很重要,但这可能会导致某些特征无法显示。移动或放大时,需要通过 XHR 调用“刷新”功能。在 OpenLayers 2 中,这可以通过调用
来实现bboxstrategy.update({ force: true })
map 的“zoomend”事件。
在带有 SVG 渲染器的 OL2 中,重绘非常平滑,几乎不明显。
在 OL3 中,似乎有必要调用:
vector.getSource().clear();
map 的“moveend”事件。
当 OL3 呈现新功能时,这会导致恼人的闪烁。
有人知道更好的技术来重新加载功能但避免闪光吗?
这是一个华丽的工作示例,改编自 here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WFS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
function onMoveEnd( evt ) {
vector.getSource().clear();
}
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'maxFeatures=500&outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857';
},
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM({
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
map.on('moveend', onMoveEnd);
</script>
</body>
</html>
最佳答案
您可以通过在自定义加载器中使用removeLoadedExtent来实现此目的,该加载器将范围标记为未加载。为了避免多次添加功能,您可以在添加之前在加载器中使用清除。
http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#removeLoadedExtent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WFS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'maxFeatures=500&outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var removeExtent = function() {
vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = removeExtent;
xhr.onload = function() {
if (xhr.status == 200) {
vector.getSource().clear();
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText));
}
removeExtent();
}
xhr.send();
},
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM({
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
</script>
</body>
</html>
关于javascript - openlayers 3 vector.getSource().clear() 上烦人的闪光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47960731/
如何检查用户是否在按下鼠标的同一按钮上释放了鼠标? 我想处理用户单击button1,继续按住鼠标按钮,然后拖动到button2并在button2上释放鼠标的情况,其中 button1 和 button
在 Twig 中,您可以使用函数 getSource() 获取模板的源代码。 但是有没有办法获取特定块的源代码,而不是使用 {% verbatim %} (我希望模板可以工作,但也要读取块的源代码)
我不知道我在这里做错了什么。只是制作一个简单的程序来测试游戏的概念,我试图让三个按钮在单击时具有三个不同的输出。但是,对于按钮一、二和三,我收到一条错误消息,指出它们无法解析为变量。我不知道该怎么办。
我决定是时候学习如何用 java 制作 GUI 了。一切进展顺利,直到我开始设置我的 ActionListener。 这是我的actionListener类: import java.awt.even
我想了解更多关于 e.getSource() 如何在 ActionListener 类中工作的信息,我的代码在这里: public class ActionController implements
我正在尝试制作一个小程序来计算您单击按钮的次数,但 ActionListener 似乎无法正常工作。这段代码看起来可以工作,但由于某种原因,当我单击小程序中的按钮时,控制台中没有打印任何内容,也没有在
我有一个带有 2 个 JButton 的 GUI,我想知道哪一个正在使用 getSource 方法触发事件。我在 Google 上查找了问题的解决方案,但找不到,这是我的代码: @Override p
我想跟踪按特定顺序单击的特定组件。 我正在使用 getSource 和这样的标志: public void actionPerformed(ActionEvent e) { JButton q = (
运行这个文件 foo.py import inspect class Parent(object): def source1(self): class A(object):
什么是 getSource?它返回什么? 什么是 getActionCommand() 以及它返回什么?? 我对这两者感到困惑,任何人都可以给我或区分它们吗? UI 中的 getSource 和 ge
本文整理了Java中javafx.concurrent.WorkerStateEvent.getSource()方法的一些代码示例,展示了WorkerStateEvent.getSource()的具体
我有一个包含 JButton 的类。这是无法更改的。 问题是这样的:actionListener 调用 getSource() 并获取 JButton,而不是容器类。 在添加 actionListen
我正在创建一个KeyListener类,这样我就可以控制任何我想要的JTextField,但我不知道如何获取任何JTextField我打电话以便可以按转义键并清除 JTextField?这是我当前的代
我正在尝试为我遇到的问题创建一个看起来不错的解决方案。我可以用文字解释,但是代码会更清晰: public void actionPerformed(ActionEvent e) {
我在尝试插入时收到以下错误: java.lang.NoSuchMethodError : org.hibernate.event.PreInsertEvent.getSource()Lorg/hibe
我在 Java 代码中经常遇到问题。每当我尝试在程序上使用按钮时,它们都不起作用,我认为问题出在 event.getSource() 但我找不到它。这是我的完整代码: import java.awt.
我做了两个文件: #test_func.py def test(): print('hello') 和 #test_inspect.py import inspect import test_
我尝试使用 inspect 检索 list 类的源代码模块,没有成功: >>> import inspect >>> inspect.getsource(list) Traceback (most r
我用了simpl.info代码为例。在他们的示例中,我可以在“视频源”选择中看到“TOSHIBA Web Camera - HD (13d3:5606)”。因此,他们可以检索源的标签属性。我可以很容易
本文整理了Java中org.apache.woden.XMLElement.getSource()方法的一些代码示例,展示了XMLElement.getSource()的具体用法。这些代码示例主要来源
我是一名优秀的程序员,十分优秀!