Как изменить размер объекта и предотвратить его масштабирование при масштабировании в OpenLayers 3


14

Я инициализировал пользовательскую карту OpenLayers 3 (использовалась для показа домов на продажу по соседству) с изображением в качестве карты.

Затем я создаю дополнительные объекты и слои динамически для каждого дома (привязка каждого объекта устанавливается как середина его изображения).

Я пытался использовать sizeсвойство при инициализации функции, но он обрезает изображение, а не изменяет его размер.

Я думаю, что я видел resizeфункцию для слоев где-то в OL2, но я не могу найти ее в OL3 ... достигнет ли такая функция желаемого результата?

Существует также проблема, заключающаяся в том, что объекты масштабируются слишком сильно при уменьшении масштаба карты и уменьшаются слишком мало при большом увеличении. Есть ли способ указать координаты объекта, а затем сделать какие-то невидимые поля / отступы вокруг него, чтобы он не стал слишком большим или слишком маленьким (какой-то статический размер)?

Вот фактическое поведение элементов (особенность, видимая здесь - черный дом): Уменьшено- Далее: Идеальный размер, хотя дом должен быть намного меньше при уменьшении (как видно на первом рисунке). Идеальный зум- Дом должен был остаться больше, вместо того, чтобы снова уменьшать размер на этой последней фотографии. Увеличено слишком много,

Ответы:


14

Я полагаю, вы используете ol.style.Icon. ol.style.Iconимеет scale параметр, который вы можете использовать для масштабирования изображения значка.

Например, если вы хотите уменьшить изображение, вы будете использовать что-то вроде этого:

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

Теперь, если вам нужны разные scaleзначения в зависимости от текущего разрешения, вы можете передать функцию стиля в векторный слой:

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

Обратите внимание, что в качестве оптимизации приведенный выше код повторно использует ol.style.Iconобъект, ol.style.Styleобъект и массив стилей, чтобы избежать создания объектов при каждом вызове функции стиля.


1
Я наконец получил его на работу, благодаря вам. Я немного адаптировал ваш код: источник должен включать сам элемент: source: new ol.source.Vector({features:[iconFeature]})иначе ничего не будет вставлено в слой (по какой-то причине, вероятно, связано с элементом геометрии объекта).
Джефф Ноэль
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.