ol3拖動疊加在chrome中效果不佳

Question

我想實現這個功能：當我拖動淺藍色圓圈時，另一個圓圈將改變raidus與淺藍色圓圈的位置，但該功能在Firefox中運行良好，在Chrome中，它工作得不是很好，這個bug當我拖動淺藍色圓圈時，另一個圓圈半徑不會改變，但是當我釋放鼠標時，另一個圓圈改變半徑。

<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>

例子是：例子

Answer 1

我認為這不是瀏覽器問題。 你得到藍色圓圈的距離只是它的x坐標，所以如果你上下移動它沒有任何反應，但如果你向左或向右移動它就可以了。 你需要使用歐幾里德距離：

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

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

Answer 2

我自己修理了。

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對象。

正確的演示是正確的演示

ol3拖動疊加在chrome中效果不佳

問題描述

2 個解決方案

解決方案1
1 2017-01-14 13:52:54

解決方案2
0 2017-01-17 11:27:57

ol3拖動疊加在chrome中效果不佳

問題描述

2 個解決方案

解決方案1 1 2017-01-14 13:52:54

解決方案2 0 2017-01-17 11:27:57

解決方案1
1 2017-01-14 13:52:54

解決方案2
0 2017-01-17 11:27:57