OpenLayersを異なるジオメトリタイプ

Question

ための複数のスタイルだから、私は私のすべてを置く単一ベクトル層を使用していますこれは私のコードです：

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] = [ 
    ... 
]; 

任意のアイデア：

... 個別の編集スタイルは、次のデフォルトを持っていますか？

Answer 1

は例をドロップ/公式ドラッグをチェックデモリンクを探すに基づいてスタイルを適用します - >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 
     }) 
    }) 
    }; 

Anが、その後、

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

最後に、あなたのスタイルの関数を作成し、あなたのベクトル層

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

Answer 2

は、ジオメトリタイプを取得して、ジオメトリタイプ

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

}）

が https://plnkr.co/edit/kOzfXyv36UxXke8bALqU?p=preview