标记未显示在Openlayers3上，超出Angularjs监视功能

我想根据用户交互在Openlayers地图上显示特定的标记。 因此，我在指令链接函数中使用AngularJS watch函数。我观察到一个包含json对象的数组“data”。这些也包含长的,横向和横向存储在EPSG:4326/WGS 84中

我试着改编小提琴：

在console.log中，我可以看到CoordinateGeometry.getFirstCoordinate已正确生成，但它们没有显示在地图上。我不确定，这是否因为角度摘要而不起作用，或者这是否是Openlayers的问题。 我也将感谢任何提示调试OL，以解决问题

(function(){
'use strict';
var app = angular.module('app');
app.directive('olMap', function () {
    return {
        restrict: 'E',
        template: '<div  class="map" id="map"> </div>',
        scope: {
            clicked: "=",
            data: "="
        },

        link: function postLink(scope, element, attrs) {
            //Todo: delete layer bei Update vermutlich notwendig; Array Dimensionen farbig unterscheiden in der Karte

            scope.$watch('data',function(nV,oV) {
                // init map
                var map = new ol.Map({
                    target: 'map',
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.MapQuest({layer: 'osm'}) // Street mapa -> osm
                        })
                    ],
                    // pos on map
                    view: new ol.View({
                        center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 3
                    })
                });

                var vectorSource = new ol.source.Vector({
                    //create empty vector
                });

                var markers = [];

                function AddMarkers() {
                    //create a bunch of icons and add to source vector
                    var counter = 0;
                    if (scope.data.length > 0) {
                        //Run trough 2D-Array
                        for (var i = 0; i < scope.data.length; i++) {
                            for (var j = 0; j < scope.data[i].length; j++) {
                                var x = scope.data[i][j].latitude;
                                var y = scope.data[i][j].longitude;
                                //x= parseFloat(x);
                                //y= parseFloat(y);
                                var iconFeature = new ol.Feature({
                                    geometry: new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')),
                                    name: 'Marker ' + counter
                                });
                                console.log("Icon feauture: ", iconFeature);
                                markers[counter] = [x, y];
                                counter++;
                                vectorSource.addFeature(iconFeature);
                            }
                        }
                        console.log("Markers:", markers);
                    }

                    //create the style
                    var iconStyle = new ol.style.Style({
                        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                            anchor: [0.5, 46],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'pixels',
                            opacity: 0.75,
                            src: 'http://upload.wikimedia.org/wikipedia/commons/a/ab/Warning_icon.png'
                        }))
                    });

                    //add the feature vector to the layer vector, and apply a style to whole layer
                    var vectorLayer = new ol.layer.Vector({
                        source: vectorSource,
                        style: iconStyle
                    });
                    return vectorLayer;
                }

                var layerMarkers = AddMarkers();

                map.addLayer(layerMarkers);
                console.log("Map: ",map);
            }, true);
        }
    }
});

})

请询问是否有开放点。我会尽我最大的努力来提供它们

提前谢谢

因为解决方案很简单：

从$watch中移出所有内容，除了：

var layerMarkers = AddMarkers();
map.addLayer(layerMarkers);

然后，地图将获得printet，如您所愿