2016-04-12 12 views
0

マップ上に円を描こうとしています。私はサークルをフィーチャとして作成し、レイヤに配置します。私が抱えている問題は、さまざまな機能のそれぞれを結ぶ線があるということです。機能を接続する原因は何ですか?OpenLayers 3の機能が接続されました

// Generate some rings 
var radius = [1000, 2000]; 
var features = []; 
for(var i = 0; i < radius.length; i++) 
{ 
    features[i] = new ol.Feature(new ol.geom.Circle(center, radius[i]/ol.proj.METERS_PER_UNIT.m)); 
} 

// Add features to new layer. 
var layer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     features: features 
    }), 
    style: new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      width: 1, 
      color: [0, 0, 255, 1] 
     }) 
    }) 
}); 
map.addLayer(layer); 

編集:私は、私は[0,0]へに置かれ、初期中心を定義する必要でしたがここで私はhttp://i.imgur.com/jV19gTJ.png

+0

接続線のスクリーンショットを追加できますか?あなたのコードは基本的に私のためにうまくいきます、私はいくつかのものを微調整しました。私はそれが役立つ場合は、私のバージョンを貼り付けます。 – sifriday

+0

私はちょうどあなたのs/shotを見ました。なぜあなたのコードがそれを引き起こすのかは明らかではありません。もっとコードを投稿できますか? plunkrやjsfiddleで問題を再現しますか? – sifriday

+0

@sifriday私はちょうどプランナーでそれをチェックし、それは接続線を持っていませんでした。問題は私がopenlayer 3.15.0を持っていて、3.2.1に切り替えて問題を解決したことでした。助けてくれてありがとう。 – Mitch

答えて

0

接続されたサークルの理由は、openlayers内のバグです。最新のバージョンに更新すると、問題が修正されました。

0

あなたのコードを取得しています何のスクリーンショットは、私のためにうまく働いています私がマップのために定義したビューと一致します。私はまた、いくつかのol.Mapコードを追加しました(あなたがQでこのビットを供給していない、ので、多分問題がある?)

私はこのHTMLを使用:

<div id="map" style="width: 100%; height: 500px"></div> 

、これはJavaScript:

var center = [0, 0]; 
var radius = [1000, 2000, 3000, 4000]; 
var features = []; 
for(var i = 0; i < radius.length; i++) 
{ 
    features[i] = new ol.Feature(new ol.geom.Circle(center, radius[i]/ol.proj.METERS_PER_UNIT.m)); 
} 

// Add features to new layer. 
var layer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     features: features 
    }), 
    style: new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      width: 1, 
      color: [0, 0, 255, 1] 
     }) 
    }) 
}); 

var map = new ol.Map({ 
    layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }), 
     layer 
    ], 
    target: 'map', 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 10 
    }) 
}); 
関連する問題