[英]OpenLayers3 and Javascript - vectors not displaying
I'm having some issues with OpenLayers3 and trying to display a vector layer. 我在使用OpenLayers3时遇到了一些问题,并试图显示矢量层。 I'm gathering the geometries from SQL Server in C# and passing them to Javascript.
我正在使用C#从SQL Server收集几何并将其传递给Javascript。 From there, this code is supposed to draw it on a map (the code is adapted from http://www.c-sharpcorner.com/article/getting-started-with-openlayers-3-and-spatial-data/ ).
从那里开始,应该将此代码绘制在地图上(该代码改编自http://www.c-sharpcorner.com/article/getting-started-with-openlayers-3-and-spatial-data/ ) 。
<script type="text/javascript">
//services for our shapes
var GeoArray = <%=JavaScript.Serialize(this.CGeo) %>;
var wktReader = new ol.format.WKT();
var featureCollection = [];
//start getting, styling and drawing shapes
for (var i = 0; i < GeoArray.length; i++)
{
var feature = wktReader.readFeature(GeoArray[i]);
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
feature.setStyle(new ol.style.Style(
{
stroke: new ol.style.Stroke(
{
color: 'red',
width: 3
}),
fill: new ol.style.Fill(
{
color: 'rgba(255, 0, 0, 1)'
})
}));
featureCollection.push(feature);
}
//create our vector source and layer
var Vsource = new ol.source.Vector({features: featureCollection});
var vectorLayer = new ol.layer.Vector({source: Vsource});
//define our map and basemap layer
var osmLayer = new ol.layer.Tile(
{
source: new ol.source.OSM()
});
var map = new ol.Map(
{
layers: [osmLayer, vectorLayer],
target: 'map',
view: new ol.View(
{
center: [0, 0],
zoom: 2
})
});
</script>
We do pick up the shapes from the C# (they are all polygons, and I've done some alert(GeoArray.length) and alert(featureCollection.length) calls, which have all come back with the returned amount) but they're not getting drawn. 我们确实从C#中拾取了形状(它们都是多边形,我已经做了一些alert(GeoArray.length)和alert(featureCollection.length)调用,它们都返回了返回的数量),但是它们是没有被吸引。
As an aside, we're using the coordinate system EPSG:3111 but when I use that (as opposed to EPSG:3857) it won't work at all (unable to get property). 顺便说一句,我们使用的是坐标系EPSG:3111,但是当我使用它(与EPSG:3857相对)时,它将根本无法工作(无法获得属性)。 But even if I specify that it's 3857 (which it isn't) it should still draw, just be improperly aligned (even removed the translation line and nothing happens).
但是,即使我指定它是3857(不是),它也应该绘制,只是对齐不正确(即使移除了平移线也没有任何反应)。
Okay, I was trying to use old OpenLayers code with OpenLayers3. 好的,我试图在OpenLayers3中使用旧的OpenLayers代码。 New answer, for anyone interested (at the moment this just loads one feature):
对于有兴趣的人(目前仅加载一项功能)提供新答案:
<script>
//services for our shapes
var GeoArray = <%=JavaScript.Serialize(this.CGeo) %>;
var format = new ol.format.WKT();
var featureCollection=[];
var feature=format.readFeature(GeoArray[1],
{
dataProjection: 'EPSG:3111',
featureProjection: 'EPSG:3857'
});
var VLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
//define our map and basemap layer
var osmLayer = new ol.layer.Tile(
{
source: new ol.source.OSM()
});
var map = new ol.Map(
{
layers: [osmLayer, VLayer],
target: 'map',
view: new ol.View(
{
center: [0, 0],
zoom: 2
})
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.