OpenLayers3和Javascript-矢量不顯示

Question

我在使用OpenLayers3時遇到了一些問題，並試圖顯示矢量層。 我正在使用C＃從SQL Server收集幾何並將其傳遞給Javascript。 從那里開始，應該將此代碼繪制在地圖上（該代碼改編自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>

我們確實從C＃中拾取了形狀（它們都是多邊形，我已經做了一些alert（GeoArray.length）和alert（featureCollection.length）調用，它們都返回了返回的數量），但是它們是沒有被吸引。

順便說一句，我們使用的是坐標系EPSG：3111，但是當我使用它（與EPSG：3857相對）時，它將根本無法工作（無法獲得屬性）。 但是，即使我指定它是3857（不是），它也應該繪制，只是對齊不正確（即使移除了平移線也沒有任何反應）。

Answer 1

好的，我試圖在OpenLayers3中使用舊的OpenLayers代碼。 對於有興趣的人（目前僅加載一項功能）提供新答案：

<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>