Question

将飞机添加到地图时，会显示飞机图片和飞机编号。 飞机编号在飞机图片上方偏移。飞机图片的位置和飞机编号被更新并实时更改。要求可以移动飞机编号，并且在飞机编号移动到新位置后，它将继续与飞机图片一起移动。我使用ol. Interaction.Translate的方法来实现飞机编号的拖动，但是无法实现飞机编号的实时移动。飞机的图片

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

Answer 1

选择图像后，您可能需要在选择中包括文本功能。类似于此示例，如果您选择了澳大利亚并将它们一起移动，则将新西兰添加到选择中，但是当选择新西兰并且仅移动了新西兰时，不会添加澳大利亚。

Destroy(this)

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

在将文本功能翻译到openlayers 3中的新位置后，如何使文本功能继续跟随iamge功能进行实时移动？

1 个答案: