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

我想实现这个功能：当我拖动浅蓝色圆圈时,另一个圆圈将改变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,.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.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

解决方法

我认为这不是浏览器问题.你得到蓝色圆圈的距离只是它的x坐标,所以如果你上下移动它没有任何反应,但如果你向左或向右移动它就可以了.你需要使用欧几里德距离：

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

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

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

解决方法

相关文章