如何在openlayers3中創建緩衝區圖形層3

Question

您好，我正在嘗試爲openlayers中的點創建緩衝區3.我能夠顯示帶有緩衝區距離的result.but但無法創建圖形層。請幫忙，什麼我想我把它down.you可以檢查它 VAR風格=新ol.style.Style（{

image: new ol.style.Circle({ 

     stroke: new ol.style.Stroke({ 
      width: 5, 
      color: 'blue' 
     }), 
     radius: 12 
    }), 
    text: new ol.style.Text({ 
     font: '12px helvetica,sans-serif', 


     fill: new ol.style.Fill({ 
      color: '#000' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#fff', 
      width: 2 
     }) 
    }) 
}); 


for (var i = 0; i < myObject.length; i++) { 
      ObjectIDs.push(myObject[i].asset_type); 
      ObjectIDs.push(myObject[i].x); 
      ObjectIDs.push(myObject[i].y); 
     } 
     var gridquerystr = ObjectIDs[0].toString(); 
     var x = ObjectIDs[1].toString(); 
     var y = ObjectIDs[2].toString(); 
     alert(gridquerystr); 
     alert(x); 
     alert(y); 
     var pointgeom; 
     var pointfeatures = []; 
     //for (var i = 0 ; i < myObject.length ; i++) { 

      pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857")); 

      pointfeature = new ol.Feature({ 
       geometry: pointgeom 
      }); 
      pointfeature.setStyle(new ol.style.Style({ 
       image: new ol.style.Circle({ 
        radius: bufferdistance, 
        width: 5 
       }), 
       fill: new ol.style.Fill({ 
        color: [51, 51, 51, .3] 
       }) 
      })); 
      pointfeatures.push(pointfeature); 

      pointfeature.setStyle(style); 

     var locations = new ol.source.Vector({ 
      features: pointfeatures, 
      project: "EPSG:4326" 

     }); 

     SearchResultsLayer.setSource(locations); 

Answer 1

我正在緩衝中選擇的要素。但我想添加爲自己的風格功能。有沒有其他的辦法。我的工作緩衝功能是

  var pointgeom; 
      var pointfeatures = []; 


      pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857")); 

      pointfeature = new ol.Feature({ 
       geometry: pointgeom 
      }); 
      var poitnExtent = pointfeature.getGeometry().getExtent(); 
      var bufferedExtent = new ol.extent.buffer(poitnExtent, bufferdistance); 

      var bufferPolygon = new ol.geom.Polygon(
      [ 
       [[bufferedExtent[0], bufferedExtent[1]], 
       [bufferedExtent[0], bufferedExtent[3]], 
       [bufferedExtent[2], bufferedExtent[3]], 
       [bufferedExtent[2], bufferedExtent[1]], 
       [bufferedExtent[0], bufferedExtent[1]]] 
      ] 
      ); 


      var bufferedFeature = new ol.Feature(bufferPolygon); 

      vectorBuffers.getSource().addFeature(bufferedFeature); 

Answer 2

，因爲你可以檢索的緩衝區內的功能，你創建的，只需要要顯示它（如果我明白你想好什麼），你只需要改變你的觀點的風格是這樣的：

Feature.setStyle(new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: yourBufferDistance, 
     width: 2 
     }), 
     fill: new ol.style.Fill({ 
     color: [51, 51, 51, .3] 
     }) 
    }) 
    })); 

Answer 3

My working buffer for point is 

    var pointfeatures = []; 
       var ObjectIDs = []; 
       var obj = JSON.parse(data.d); 
       for (var i = 0 ; i < obj.length ; i++) { 
        ObjectIDs.push(obj[i].x); 
        ObjectIDs.push(obj[i].y); 
        var x = ObjectIDs[0].toString(); 
        var y = ObjectIDs[1].toString(); 

        pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857")); 
        pointfeature = new ol.Feature({ 
         geometry: pointgeom 
        }); 




        var extent = pointfeature.getGeometry().getExtent(); 
        var bufferextent = new ol.extent.buffer(extent, bufferdistance); 

        var bufferPolygon = new ol.geom.Circle(extent, bufferdistance); 

        var bufferedFeature = new ol.Feature(bufferPolygon); 
        pointfeatures.push(bufferedFeature); 

        pointfeature.setStyle(style); 


        bufferedFeature.setStyle(new ol.style.Style({ 
         stroke: new ol.style.Stroke({ 
          color: 'red', 
          width: 2 
         }), 
         image: new ol.style.Circle({ 
          radius: bufferdistance, 
          width: 2 
         }) 


        }) 
        ); 

        vectorBuffers.getSource().addFeature(bufferedFeature); 
       } 
           locations = new ol.source.Vector({ 
            features: bufferextent, 
            project: "EPSG:4326" 
           }); 

           SearchResultsLayer.setSource(locations); 

        map.getView().fit(SearchResultsLayer.getSource().getExtent(), map.getSize());