ol3 drag overlay在chrome中效果不好

我想要实现这个功能：当我拖动浅蓝色的圆圈时，另一个圆圈会改变浅蓝色圆圈的位置，但该功能在Firefox中运行良好，在铬版中，它的效果不是很好，错误是当我拖动浅蓝色圆圈时，另一个圆圈半径不会改变，但是当我释放鼠标时，另一个圆圈改变半径。ol3 drag overlay在chrome中效果不好

<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script> 
<style> 
    #msg { 
     position: absolute; 
     z-index: 10; 
     left: 50%; 
     transform: translate(-50%, 5px); 
     background-color: rgba(40, 40, 40, .8); 
     padding: 10px; 
     color: #eee; 
     width: 350px; 
     text-align: center; 
    } 

    #marker { 
     width: 20px; 
     height: 20px; 
     border: 1px solid #088; 
     border-radius: 10px; 
     background-color: #0FF; 
     opacity: 0.5; 
     cursor: move; 
    } 
</style> 
</head> 

<body> 
    <div id="map" class="map" tabindex="0"></div> 
    <div id="marker" title="Marker"></div> 
    <script type="text/javascript"> 
     var pos = ol.proj.fromLonLat([0, 0]); 
     var layer = new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }); 
     var map = new ol.Map({ 
      layers: [layer], 
      target: 'map', 
      view: new ol.View({ 
       center: pos, 
       zoom: 2 
      }) 
     }); 
     var marker_el = document.getElementById('marker'); 
     var marker = new ol.Overlay({ 
      position: pos, 
      positioning: 'center-center', 
      element: marker_el, 
      stopEvent: false, 
      dragging: false 
     }); 
     map.addOverlay(marker); 

     var vectorSource = new ol.source.Vector(); 
     var vectorLayer = new ol.layer.Vector({ 
      source: vectorSource, 
      style: new ol.style.Style({ 
       fill: new ol.style.Fill({ 
        color: 'rgba(255, 0, 0, 0.2)' 
       }), 
       stroke: new ol.style.Stroke({ 
        color: '#ffcc33', 
        width: 2 
       }) 
      }) 
     }); 
     map.addLayer(vectorLayer); 


     var cir = new ol.geom.Circle(pos, 0); 
     var f = new ol.Feature(cir); 
     vectorSource.addFeature(f); 


     var dragPan; 
     map.getInteractions().forEach(function(interaction) { 
      if (interaction instanceof ol.interaction.DragPan) { 
       dragPan = interaction; 
      } 
     }); 


     marker_el.addEventListener('mousedown', function(evt) { 
      dragPan.setActive(false); 
      marker.set('dragging', true); 
      console.info('start dragging'); 
     }); 

     map.on('pointerdrag', function(evt) { 
      if (marker.get('dragging') === true) { 
       marker.setPosition(evt.coordinate); 
       var dis = Math.abs(evt.coordinate[0]); 
       cir.setRadius(dis); 
      } 
     }); 

     map.on('pointerup', function(evt) { 
      if (marker.get('dragging') === true) { 
       console.info('stop dragging'); 
       dragPan.setActive(true); 
       marker.set('dragging', false); 
      } 
     }); 
    </script> 

    </html>

的例子是：example

来源

2016-12-28 ol3Fp

我觉得这不是一个浏览器的问题。你可以通过它的x坐标得到蓝色圆圈的距离，所以如果你上下移动它，没有任何事情发生，但是如果你向左或向右移动它就好了。您需要使用欧几里得距离：中

var dis = Math.sqrt(Math.pow(evt.coordinate[0],2)+Math.pow(evt.coordinate[1],2)); 代替

var dis = Math.abs(evt.coordinate[0]);

来源

2017-01-14 13:52:54 Okrasi

我自己固定它。

var pos = ol.proj.fromLonLat([0, 0]); 
    var layer = new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }); 
    var map = new ol.Map({ 
     layers: [layer], 
     target: 'map', 
     view: new ol.View({ 
     center: pos, 
     zoom: 2 
     }) 
    }); 
    var marker_el = document.getElementById('marker'); 
    var marker = new ol.Overlay({ 
     position: pos, 
     positioning: 'center-center', 
     element: marker_el, 
     stopEvent: false, 
     dragging: false 
    }); 
    map.addOverlay(marker); 

    var vectorSource = new ol.source.Vector(); 
    var vectorLayer = new ol.layer.Vector({ 
     source : vectorSource, 
     style : new ol.style.Style({ 
       fill: new ol.style.Fill({ 
        color: 'rgba(255, 0, 0, 0.2)' 
       }), 
       stroke: new ol.style.Stroke({ 
        color: '#ffcc33', 
        width: 2 
       }) 
      }) 
    }); 
    map.addLayer(vectorLayer); 


    var cir = new ol.geom.Circle(pos, 0); 
    var f = new ol.Feature(cir); 
    vectorSource.addFeature(f); 


    var dragPan; 
    map.getInteractions().forEach(function(interaction){ 
     if (interaction instanceof ol.interaction.DragPan) { 
     dragPan = interaction; 
     } 
    }); 

    var dragger_ = new ol.pointer.PointerEventHandler(marker_el); 

      //修改控制，不让其在拖动的时候地图不进行缩放，只在停止后再判断是否需要缩放显示 
    ol.events.listen(dragger_, ol.pointer.EventType.POINTERDOWN, 
       handleDraggerStart_); 
    ol.events.listen(dragger_, ol.pointer.EventType.POINTERMOVE, 
       handleDraggerDrag_); 
    ol.events.listen(dragger_, ol.pointer.EventType.POINTERUP, 
       handleDraggerEnd_); 


    function handleDraggerStart_(evt) { 
     dragPan.setActive(false); 
     marker.set('dragging', true); 
     console.info('start dragging'); 
    }; 

    function handleDraggerDrag_(evt) { 
     var evtCoordinate = map.getEventCoordinate(evt); 
     if (marker.get('dragging') === true) { 
     marker.setPosition(evtCoordinate); 
     var dis = Math.abs(evtCoordinate[0]); 
     cir.setRadius(dis); 
     } 
    }; 

    function handleDraggerEnd_(evt) { 
     if (marker.get('dragging') === true) { 
     console.info('stop dragging'); 
     dragPan.setActive(true); 
     marker.set('dragging', false); 
     } 
    };

使用ol.pointer.PointerEventHandler对象。

正确的演示是right demo

来源

2017-01-17 11:27:57 ol3Fp

ol3 drag overlay在chrome中效果不好

回答

相关问题