CODEWITHSUNDEEP
javascriptoverlayopenlayers-3
ol3Fp
ol3Fp

Reputation: 41

ol3 drag overlay is not work well in chrome

I want to realize this function: when I drag the light blue circle, the another circle will change raidus with the position of the light blue circle, but the function work well in Firefox ,in the chrome, it work not very well, the bug is when I drag the light blue circle ,the another circle radius it not change ,but when I release mouse , the another circle change radius.

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

The example is : example

Upvotes: 4

Views: 549

Answers (2)

ol3Fp
ol3Fp

Reputation: 41

I fixed it by myself.

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);
      }
    };

use ol.pointer.PointerEventHandler object.

the right demo is right demo

Upvotes: 0

Okrasi
Okrasi

Reputation: 96

I think this is not a browser issue. You get the distance of the blue circle just by its x coordinate, so if you move it up and down nothing happens, but if you move it left or right it is just fine. You need to use euclidean distance:

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

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

Upvotes: 1

Related Questions