Question

我想实现这个功能：当我拖动浅蓝色圆圈时，另一个圆圈将改变raidus与浅蓝色圆圈的位置，但该功能在Firefox中运行良好，在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

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

正确的演示是right demo

ol3拖动叠加在chrome中效果不佳

2 个答案: