Question

我想跟进这个问题： Changing cursor on drag in openlayers 3

提供的答案是合理的，并且有一个有效的例子。我已经使用了基本的OpenLayers快速入门代码，并添加了用户对它的回答进行测试，我很遗憾地说它不起作用。

在＆＃34;指针＆＃34;中定义的光标会发生什么？是起始光标，当您单击并按住以拖动地图时，它将保持为该光标，直到您松开鼠标按钮停止拖动。您将看到手图标变化非常短暂，然后更改回指针光标。它的作用就像在拖动动作发生时无法更改光标。

可以采取哪些措施来解决这个问题？

下面我的示例文件的完整代码。请注意，在jsfiddle中，它演示了预期的行为。但是当我创建一个文件（例如＆＃34; test-drag.html＆＃34;）并在Chrome中加载它时，它就像我描述的那样。

＆＃13;

<html>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<body>
<div id="map" class="map" style="width:1200px;height:800px"></div>
<script type="text/javascript">
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
	center: ol.proj.fromLonLat([37.41, 8.82]),
	zoom:2
  })
});

map.getViewport().style.cursor = "-webkit-grab";
map.on('pointerdrag', function(evt) {
    map.getViewport().style.cursor = "-webkit-grabbing";
});

map.on('pointerup', function(evt) {
    map.getViewport().style.cursor = "-webkit-grab";
});
</script>
</body>
</html>

＆＃13;

拖动光标不会应用光标样式更改，直到拖动完成

0 个答案: