web-dev-qa-db-ja.com

OpenLayers 3でマーカーを追加する方法

OpenLayers 3マップにメーカーを追加しようとしています。

私が見つけた唯一の例は、 thisOpenLayersの例の1つ list です。

ただし、この例では、OpenLayers 2で OpenLayers.Marker のようなものの代わりに ol.Style.Icon を使用しています。

最初の質問

唯一の違いは、画像のURLを設定する必要があることですが、マーカーを追加する唯一の方法ですか？

また、OpenLayers 3にはマーカー画像が付属していないようですので、ol.Style.Icon以外の方法がなければ意味があります

2番目の質問

地図が読み込まれた後にマーカーやアイコンを追加する機能の例を誰かが教えてくれたら、本当にうれしいです。

例で理解していることから、アイコンのレイヤーを作成します

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});


var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

次に、マップを初期化するときにアイコンレイヤーを設定します

var map = new ol.Map({
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
  target: document.getElementById('map'),
  view: new ol.View2D({
    center: [0, 0],
    zoom: 3
  })
});

多くのマーカーを追加したい場合、マーカーごとに1つのレイヤーを作成する必要がありますか？

レイヤーに多くのマーカーを追加するにはどうすればよいですか？この部分がどのように見えるかわかりません

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

ありがとうございました

javascriptopenlayers-3
62
Marc

Q1。マーカーはOpenLayers 2では非推奨と見なされますが、これはドキュメントからはあまり明らかではありません。代わりに、そのスタイルで何らかの画像ソースに設定されたexternalGraphicでOpenLayers.Feature.Vectorを使用する必要があります。この概念はOpenLayers 3にも引き継がれているため、マーカークラスはなく、引用した例のように行われます。

Q2。 ol.source.Vectorは機能の配列を取り、行、機能に注意してください：[iconFeature]。アイコンの機能の配列を作成し、それに機能を追加します。たとえば：

var iconFeatures=[];

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconFeature1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island Two',
  population: 4001,
  rainfall: 501
});

iconFeatures.Push(iconFeature);
iconFeatures.Push(iconFeature1);

var vectorSource = new ol.source.Vector({
  features: iconFeatures //add an array of features
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});


var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: iconStyle
});

明らかに、これは、すべてのol.Feature作成を何らかのデータソースに基づいてループ内に配置することで、よりエレガントに処理できますが、これがアプローチを示していることを望みます。また、ol.layer.Vectorにスタイルを適用して、レイヤーに追加するすべてのフィーチャにスタイルを適用できることにも注意してください。個々のフィーチャにスタイルを設定する必要はありません。同じ、明らかに。

編集：その答えはうまくいかないようです。更新された fiddle は、vectorSource.addFeatureを使用して、フィーチャ（アイコン）をループ内の空のベクターソースに追加し、その後、ロット全体をレイヤーベクターに追加することで機能します。元の回答を更新する前に、これがうまくいくかどうかを確認します。

84
John Powell

良いチュートリアルがあります： http://openlayersbook.github.io

テストされていませんが、役に立つかもしれません

var features = [];

//iterate through array...
for( var i = 0 ; i < data.length ; i++){
    var item = data[i];                                     //get item
    var type = item.type;                                   //get type
    var longitude = item.longitude;                         //coordinates
    var latitude = item.latitude;
    /*....
    * now get your specific icon...('..../ic_customMarker.png')
    * by e.g. switch case...
    */
    var iconPath = getIconPath(type);

    //create Feature... with coordinates
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',     
        'EPSG:3857'))
    });

    //create style for your feature...
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: iconPath
        }))
    });

    iconFeature.setStyle(iconStyle);
    features.Push(iconFeature);
    //next item...
}

/*
* create vector source
* you could set the style for all features in your vectoreSource as well
*/
var vectorSource = new ol.source.Vector({
    features: features      //add an array of features
    //,style: iconStyle     //to set the style for all your features...
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});
map.addLayer(vectorLayer);
11
RickPat
var exampleLoc = ol.proj.transform(
    [131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857');

var map = new ol.Map({
  target: 'map',
  renderer: 'canvas',
  view: new ol.View2D({
    projection: 'EPSG:3857',
    zoom: 3,
    center: exampleLoc
  }),
  layers: [
    new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
  ]
});

map.addOverlay(new ol.Overlay({
  position: exampleLoc,
  element: $('<img src="resources/img/marker-blue.png">')
      .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
      .tooltip({title: 'Hello, world!', trigger: 'click'})
}));

map.on('postcompose', function(evt) {
  evt.vectorContext.setFillStrokeStyle(
      new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}),
      new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3}));
  evt.vectorContext.drawCircleGeometry(
      new ol.geom.Circle(exampleLoc, 400000));
});

var exampleKml = new ol.layer.Vector({
  source: new ol.source.KML({
    projection: 'EPSG:3857',
    url: 'data/example.kml'
  })
});
map.addLayer(exampleKml);
1
Ishaan Nigam