How to make the text feature continue to follow the iamge feature to move in real time after being translated to a new location in openlayers 3?

Question

When adding an airplane to the map, the airplane picture and the airplane number appear. The airplane number is offset above the airplane picture.The position of the aircraft picture and the aircraft number is updated and changed in real time. There is a requirement that the aircraft number can be moved, and after the aircraft number is moved to the new position, it will continue to move with the aircraft picture. I used the method of ol. Interaction.Translate to realize the drag of the aircraft number, but it was impossible to realize the real-time movement of the aircraft number following the picture of the aircraft

let newLocation = ol.proj.fromLonLat([obj.longitude, obj.latitude]);
let aircraft = vectorSource.getFeatureById(obj.aircraftNum);
aircraft.setGeometry(new ol.geom.Point(newLocation));//Update aircraft image location

                let newPoint;
                translate = new ol.interaction.Translate({
                    features:new ol.Collection([featureSimpleSign])
                });
                map.addInteraction(translate);
                translate.on('translatestart', function (evt) {
                    coordSign = aircraft.getGeometry().getCoordinates();

                });
                translate.on('translating', function (evt) {
                    indexWire.setCoordinates([coordSign, evt.coordinate]);
                });
                translate.on('translateend',function(evt){
                    let dd2 = map.getPixelFromCoordinate(evt.coordinate);
                    let newX = dd2[0]-0;//Minus the offset of the plane number
                    let newY = dd2[1]-(-30);
                    newPoint = map.getCoordinateFromPixel([newX,newY]);
                    indexWire.setCoordinates([coordSign,evt.coordinate]);
                })
                startPoint = aircraft.getGeometry().getCoordinates();
                indexWire.setCoordinates([startPoint,newPoint]);

score 0 · Answer 1 · answered Feb 18 '19 at 17:42

You would probably need to include the text feature in the selection when an image is selected. Something similar to this example, where New Zealand is added to the selection if you select Australia and they are moved together, but Australia isn't added when New Zealand is selected and only New Zealand is moved.

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
      format: new ol.format.GeoJSON()
    })
  });

  var select = new ol.interaction.Select();
  select.on('select',function(event){
    if (select.getFeatures().getLength() > 0 && select.getFeatures().getArray()[0].getId() == 'AUS') {
      select.getFeatures().push(vector.getSource().getFeatureById('NZL'));
    }
  });

  var translate = new ol.interaction.Translate({
    features: select.getFeatures()
  });

  var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([select, translate]),
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([135, -45]),
      zoom: 2
    })
  });

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<div id="map"></div>

After the aircraft number is towed to the new position, how to keep following the aircraft picture — sueRimn, Feb 19 '19 at 07:03

How to make the text feature continue to follow the iamge feature to move in real time after being translated to a new location in openlayers 3?

1 Answers1