Я хотел бы ответить на этот вопрос:
Изменение курсора при перетаскивании в открытых слоях 3
Предоставленный ответ является звуковым и имеет рабочий пример. Я использовал базовый код быстрого запуска OpenLayers и добавил к нему ответ этого пользователя, и мне жаль говорить, что он не работает.
Что происходит, так это то, что курсор, определенный в "pointerup", является стартовым курсором, и когда вы нажимаете и удерживаете, чтобы перетащить карту, он остается в качестве этого курсора, пока вы не отпустите кнопку мыши, чтобы прекратить перетаскивание. Вы увидите, что значок руки очень быстро изменится, а затем снова перейдете к курсору-указателю. Он действует так, как будто курсор не может быть изменен во время действия перетаскивания.
Что можно сделать, чтобы это исправить?
Полный код моего примера файла ниже. Обратите внимание, что в jsfiddle это демонстрирует ожидаемое поведение. Но когда я создаю файл (например, «test-drag.html») и загружаю его в Chrome, он действует так, как я описал.
<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>