如何使文本功能继续跟随图像功能在转换为openlayers 3中的新位置后实时移动?

问题描述 投票:0回答:1

将飞机添加到地图时,会出现飞机图片和飞机编号。飞机号码在飞机图片上方偏移。飞机图片的位置和飞机编号实时更新和更改。需要可以移动飞机号码,并且在飞机号码移动到新位置之后,它将继续随着飞机图片移动。我使用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]);
openlayers-3 translate
1个回答
0
投票

选择图像时,可能需要在选择中包含文本功能。类似于这个例子的东西,如果您选择澳大利亚并将它们一起移动,新西兰将被添加到选择中,但是当选择新西兰并且仅移动新西兰时不添加澳大利亚。

  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>
© www.soinside.com 2019 - 2024. All rights reserved.