Как заставить текстовую функцию продолжать следовать функции iamge, чтобы перемещаться в режиме реального времени после перевода в новое место в openlayers 3? - PullRequest
Новая
       9

Как заставить текстовую функцию продолжать следовать функции iamge, чтобы перемещаться в режиме реального времени после перевода в новое место в openlayers 3?

0 голосов
/ 18 февраля 2019

При добавлении самолета на карту появляются изображение самолета и номер самолета . номер самолета смещен над изображением самолета . Положение изображения самолета и номера самолета обновляется и изменяется в реальном времени.время.Существует требование, что номер самолета может быть перемещен, и после того, как номер самолета будет перемещен в новую позицию, он продолжит движение с изображением самолета .Я использовал метод 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]);

1 Ответ

0 голосов
/ 18 февраля 2019

Возможно, вам понадобится включить текстовую функцию в выделение, когда выбрано изображение.Нечто подобное этому примеру, где Новая Зеландия добавляется в выбор, если вы выбираете Австралию, и они перемещаются вместе, но Австралия не добавляется, когда выбрана Новая Зеландия, и перемещается только Новая Зеландия.

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