Come ridimensionare una funzione e impedirne il ridimensionamento durante lo zoom in OpenLayers 3

Ho inizializzato una mappa OpenLayers 3 personalizzata (utilizzata per mostrare case in vendita nel quartiere) con un'immagine come mappa.

Quindi, creo elementi e livelli aggiuntivi in ​​modo dinamico per ogni casa (l'ancoraggio di ogni elemento è impostato al centro della sua immagine).

Ho provato a usare la sizeproprietà durante l'inizializzazione della funzione, ma ciò che fa è ritagliare l'immagine invece di ridimensionarla.

Penso di aver visto la resizefunzione per i layer da qualche parte in OL2, ma non riesco a trovarla in OL3 ... quel tipo di funzione otterrebbe il risultato che desidero?

C'è anche il problema che le funzionalità si ridimensionano troppo quando vengono ingrandite dalla mappa e ridimensionate troppo piccole quando vengono ingrandite molto. Esiste un modo per specificare le coordinate della funzione e quindi eseguire una sorta di margini / riempimento invisibili attorno ad essa per impedire che diventi troppo grande o troppo piccolo (un tipo di dimensione statica)?

Ecco il comportamento reale delle funzionalità (la funzione vista qui è la casa nera): - Successivo: dimensioni perfette, la casa dovrebbe essere molto più piccola quando viene ingrandita (come si vede nella prima foto). - La casa avrebbe dovuto rimanere più grande, invece di ridimensionarsi di nuovo in quest'ultima immagine. .

Presumo che tu usi un ol.style.Icon. ol.style.Iconha scale un'opzione che puoi usare per ridimensionare l'immagine dell'icona.

Ad esempio, se vuoi ridimensionare un'immagine, userai qualcosa del genere:

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

Ora, se desideri scalevalori diversi in base alla risoluzione corrente, puoi passare una funzione di stile al livello vettoriale:

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

Si noti che, come ottimizzazione, il codice sopra riutilizza l' ol.style.Iconoggetto, l' ol.style.Styleoggetto e l'array di stili, per evitare di creare oggetti ogni volta che viene chiamata la funzione di stile.