OpenLayers - несколько стилей для различных типов геометрии

Так я использую одного векторного слоя, где я положил все мои:OpenLayers - несколько стилей для различных типов геометрии

Очки
полилиний
Полигоны

Это мой код:

var source = new ol.source.Vector({ wrapX: false }); 
var vector = new ol.layer.Vector({ 
    source: source, 
    style: // styleFunction or style or [style] don't know... 
});

И хочу стилизовать функцию по их типу. Я нашел это в documentation, но не могу понять, как использовать его:

... отдельный стиль редактирования имеет следующие значения по умолчанию:

styles[ol.geom.GeometryType.POLYGON] = [ 
    new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: [255, 255, 255, 0.5] 
    }) 
    }) 
]; 
styles[ol.geom.GeometryType.LINE_STRING] = [ 
    ... 
]; 
styles[ol.geom.GeometryType.POINT] = [ 
    ... 
];

Любые идеи?

источник

2016-11-25 Mehdiway

Проверьте официальный перетащить/падение пример - >ol3 example

Он имеет дело с любой возможной геометрией.

Таким образом, объявить ваш объект стиль

var defaultStyle = { 
    'Point': new ol.style.Style({ 
     image: new ol.style.Circle({ 
     fill: new ol.style.Fill({ 
      color: 'rgba(255,255,0,0.5)' 
     }), 
     radius: 5, 
     stroke: new ol.style.Stroke({ 
      color: '#ff0', 
      width: 1 
     }) 
     }) 
    }), 
    'LineString': new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#f00', 
     width: 3 
     }) 
    }), 
    'Polygon': new ol.style.Style({ 
     fill: new ol.style.Fill({ 
     color: 'rgba(0,255,255,0.5)' 
     }), 
     stroke: new ol.style.Stroke({ 
     color: '#0ff', 
     width: 1 
     }) 
    }), 
    'MultiPoint': new ol.style.Style({ 
     image: new ol.style.Circle({ 
     fill: new ol.style.Fill({ 
      color: 'rgba(255,0,255,0.5)' 
     }), 
     radius: 5, 
     stroke: new ol.style.Stroke({ 
      color: '#f0f', 
      width: 1 
     }) 
     }) 
    }), 
    'MultiLineString': new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#0f0', 
     width: 3 
     }) 
    }), 
    'MultiPolygon': new ol.style.Style({ 
     fill: new ol.style.Fill({ 
     color: 'rgba(0,0,255,0.5)' 
     }), 
     stroke: new ol.style.Stroke({ 
     color: '#00f', 
     width: 1 
     }) 
    }) 
    };

затем создать функцию стиля

var styleFunction = function(feature, resolution) { 
    var featureStyleFunction = feature.getStyleFunction(); 
    if (featureStyleFunction) { 
     return featureStyleFunction.call(feature, resolution); 
    } else { 
     return defaultStyle[feature.getGeometry().getType()]; 
    } 
    };

Наконец, Asign функции стиля на ваш векторный слой

map.addLayer(new ol.layer.Vector({ 
     source: new ol.source.Vector({}), 
     style: styleFunction 
    }));

источник

2016-11-25 07:53:51 pavlos

Проблема с функция стиля заключается в том, что она вызывается каждый раз, когда вы перемещаете карту. Но это метод, используемый в официальной документации, поэтому я думаю, что это способ сделать это. Благодаря ! – Mehdiway

Итак, вы в порядке с ответом, но вам не очень нравится, что функция стиля работает на каждом перемещении карты. Я настаиваю, что вам это не нравится, потому что это должно дать вам плохую производительность. Если я прав, вы можете кэшировать свои стили и улучшать производительность. Если это ваше дело, попросите меня предоставить вам снимок кода, чтобы кешировать ваш стиль. – pavlos

Все в порядке, 'getStyleFunction' получает стиль функции вместо назначения нового при каждом выполнении функции – Mehdiway

Получить тип геометрии, а затем применить стиль, основанный на типе геометрии

style:function(feature, resolution){ 
    var geom_name = feature.getGeometry().getType(); 
    return styles[geom_name]; 
    }

})

Найти демонстрационную ссылку https://plnkr.co/edit/kOzfXyv36UxXke8bALqU?p=preview

источник

2016-11-25 03:35:00

OpenLayers - несколько стилей для различных типов геометрии

ответ

Смежные вопросы