openlayers-3 - 如何在鼠标移动之前使创建的绘图可见
问题描述
有没有办法让刚刚创建的 Draw 交互在第一个鼠标事件之前可视化自己?
我使用 openlayers 4.6.5。应用程序创建 ol.interaction.Draw 以响应键盘事件。类型是 LineString。在第一次 mousemove 之后,预期的圆圈会显示在鼠标位置。我的问题是,在用户第一次移动鼠标之前,Draw 交互不会显示任何内容。
解决方案
交互由鼠标事件驱动,因此您需要重新运行最后一个事件。
将事件监听器添加pointermove
到您的地图并保存最后一个
var lastEvent;
map.on('pointermove', function(event){ lastEvent = event; });
然后当您添加交互时,让它处理最后一个事件
map.addInteraction(draw);
draw.handleEvent(lastEvent);
4.6.4 版适用于我。5 秒后添加交互,然后以 5 秒和 10 秒的间隔添加新交互:
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var draw; // global so we can remove it later
function addInteraction() {
draw = new ol.interaction.Draw({
source: source,
type: 'LineString'
});
map.addInteraction(draw);
}
var lastEvent;
map.on('pointermove', function(event){ lastEvent = event; });
var add = false;
setInterval(function(){
add = !add;
if (add) {
addInteraction();
draw.handleEvent(lastEvent);
} else {
map.removeInteraction(draw);
}
}, 5000);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/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://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script>
<div id="map" class="map"></div>
推荐阅读
- sas - SAS EG 编辑器宏对选择中的每一行执行操作
- c# - 使用用户控件自定义事件时,WPF 无法从文本创建事件处理程序
- c++ - 如何禁用在工厂方法之外创建/复制 obj?
- build - 使用 3rd 方库构建 .net-core 应用程序
- python - Python:将日期时间提取到年、月和日的结果为浮点数
- python - 在 DataFrame 中删除具有非日期时间输入的数据
- regex - 将 test-Path -Path 与正则表达式相结合
- c# - 我可以从 javascript 调用视图组件上的方法吗?
- python-3.x - pytorch如何通过掩码选择通道?
- google-cloud-platform - GCP 计费前端实例