将飞机添加到地图时,会出现飞机图片和飞机编号。飞机号码在飞机图片上方偏移。飞机图片的位置和飞机编号实时更新和更改。需要可以移动飞机号码,并且在飞机号码移动到新位置之后,它将继续随着飞机图片移动。我使用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]);
选择图像时,可能需要在选择中包含文本功能。类似于这个例子的东西,如果您选择澳大利亚并将它们一起移动,新西兰将被添加到选择中,但是当选择新西兰并且仅移动新西兰时不添加澳大利亚。
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>