Comment redimensionner une fonctionnalité et l'empêcher de se mettre à l'échelle lors du zoom dans OpenLayers 3

J'ai initialisé une carte OpenLayers 3 personnalisée (utilisée pour montrer les maisons à vendre dans le quartier) avec une image comme carte.

Ensuite, je crée dynamiquement des entités et des calques supplémentaires pour chaque maison (l'ancre de chaque entité est définie comme le milieu de son image).

J'ai essayé d'utiliser la sizepropriété lors de l'initialisation de la fonctionnalité, mais ce qu'elle fait, c'est recadrer l'image au lieu de la redimensionner.

Je pense avoir vu la resizefonction pour les calques quelque part dans OL2, mais je ne la trouve pas dans OL3 ... ce genre de fonction atteindrait-il le résultat que je veux?

Il y a aussi le problème du fait que les entités sont beaucoup trop grandes lors d'un zoom arrière sur la carte et trop petites lors d'un zoom avant. Existe-t-il un moyen de spécifier les coordonnées de l'entité, puis de faire une sorte de marge / remplissage invisible autour d'elle pour l'empêcher de devenir trop grande ou trop petite (une sorte de taille statique)?

Voici le comportement réel des caractéristiques (la caractéristique vue ici est la maison noire): - Suivant: Taille parfaite, la maison devrait être bien plus petite lors d'un zoom arrière (comme on le voit sur la première photo). - La maison aurait dû rester plus grande, au lieu de se réduire à nouveau dans cette dernière photo. .

Je suppose que vous utilisez un ol.style.Icon. ol.style.Icona une scale option que vous pouvez utiliser pour mettre à l'échelle l'image de l'icône.

Par exemple, si vous souhaitez réduire une image, vous utiliserez quelque chose comme ceci:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

Maintenant, si vous voulez des scalevaleurs différentes en fonction de la résolution actuelle, vous pouvez passer une fonction de style au calque vectoriel:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

Notez que, comme optimisation, le code ci-dessus réutilise l' ol.style.Iconobjet, l' ol.style.Styleobjet et le tableau de styles, pour éviter de créer des objets à chaque appel de la fonction de style.