All geek questions in one place

Ol3 overlay doesn't work well in chrome

I want to implement this function: when I drag a light blue circle, another circle changes the raidus with the position of the light blue circle, but the function works well in Firefox, in chrome, it does not work very well, an error occurs when I drag the light blue circle , the other radius of the circle does not change, but when I release the mouse, the different radius of the circle changes.

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

+4
source share
2 answers

, . x, , , , , . :

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

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

+1

.

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.

0

Source: https://habr.com/ru/post/1665061/

More articles:


All Articles