如何在openlayers3中创建缓冲区图形层3
问题描述:
您好,我正在尝试为openlayers中的点创建缓冲区3.我能够显示带有缓冲区距离的result.but但无法创建图形层。请帮忙,什么我想我把它down.you可以检查它 VAR风格=新ol.style.Style({如何在openlayers3中创建缓冲区图形层3
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);
答
我正在缓冲中选择的要素。但我想添加为自己的风格功能。有没有其他的办法。我的工作缓冲功能是
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);
答
,因为你可以检索的缓冲区内的功能,你创建的,只需要要显示它(如果我明白你想好什么),你只需要改变你的观点的风格是这样的:
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]
})
})
}));
答
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());
感谢您的答复。我在为选定的功能创建一个geom时遇到问题。 – indu
当我添加样式到我的函数我得到错误,如“未捕获TypeError:pointgeom.setStyle不是一个函数”。可以帮助什么是它的错误 – indu
对不起我的坏。 setStyle函数的功能不适用于几何体 –