図形/マーカー/データが何であれ。

Question

私は知っているすべてのキーワードをGoogle検索しましたが、私を導く例は見つけられません。 OpenLayersを使って地図上のポイントをオーバーレイしたいのですが、そのポイントにはさまざまなデータと背景色があります。

ここでは、Google Maps APIを使用して達成した例を示します。どうすればOpenLayersを使って同じことができますか？

Answer 1

値を取得するのは簡単です。ちょうどあなたのスタイル関数からol.style.Textとol.style.Styleを返す：

var style = new ol.style.Style({ 
    text: new ol.style.Text({ 
    text: '' // will be modified dynamically in the style function 
    }) 
}); 
var layer = new ol.layer.Vector({ 
    style: function(feature) { 
    var value = feature.get('since_midnight'); 
    style.getText().setText(value); 
    return style; 
    } 
}); 

背景は少しトリッキーですが、https://github.com/openlayers/openlayers/issues/4577#issuecomment-328968055が実装されたときに近い機能で非常に容易になります。現在、カスタムレンダラを使用して背景を作成することができます。あなたがそうするとき、あなたはまた、カスタムレンダラーにテキストをレンダリングすることができ、かつol.style.Textを必要としない：

var style = new ol.style.Style({ 
 
    renderer: function(coordinates, state) { 
 
var context = state.context; 
 
    context.font = (state.pixelRatio * 12) + 'px Arial,Helvetica,sans-serif'; 
 
    var magnitude = parseFloat(parseFloat(state.feature.get('name').split(' ')[1])); 
 
    var width = context.measureText(magnitude).width + 10; 
 
    var height = 16 * state.pixelRatio; 
 
    context.save(); 
 

 
    if (magnitude < 5.2) { 
 
     context.fillStyle = 'green'; 
 
    } else if (magnitude >= 5.2 && magnitude < 5.8) { 
 
     context.fillStyle = 'orange'; 
 
    } else { 
 
     context.fillStyle = 'red'; 
 
    } 
 
    context.fillRect(
 
     coordinates[0] - width/2, 
 
     coordinates[1] - height/2, 
 
     width, 
 
     height 
 
    ); 
 
    context.strokeStyle = 'white'; 
 
    context.strokeRect(
 
     coordinates[0] - width/2, 
 
     coordinates[1] - height/2, 
 
     width, 
 
     height 
 
    ); 
 
    context.fillStyle = 'white'; 
 
    context.strokeStyle = 'black'; 
 
    context.lineWidth = 2; 
 
    context.textAlign = 'center'; 
 
    context.textBaseline = 'middle'; 
 
    context.strokeText(magnitude, coordinates[0], coordinates[1]); 
 
    context.fillText(magnitude, coordinates[0], coordinates[1]); 
 
    context.restore(); 
 
    } 
 
}); 
 
var layer = new ol.layer.Vector({ 
 
    style: style, 
 
    source: new ol.source.Vector({ 
 
    url: 'https://openlayers.org/en/v4.4.2/examples/data/kml/2012_Earthquakes_Mag5.kml', 
 
    format: new ol.format.KML({ 
 
     extractStyles: false 
 
    }) 
 
    }) 
 
}); 
 
var map = new ol.Map({ 
 
    layers: [ 
 
    new ol.layer.Tile({ 
 
     source: new ol.source.OSM() 
 
    }), 
 
    layer 
 
    ], 
 
    target: 'map', 
 
    view: new ol.View({ 
 
    zoom: 2, 
 
    center: [0, 0] 
 
    }) 
 
})

#map { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
}

<link href="https://openlayers.org/en/v4.4.2/css/ol.css" rel="stylesheet" /> 
 
<script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script> 
 
<div id="map"></div>