标记不在Openlayers3上显示Angularjs监视功能

我想根据用户交互在Openlayers地图上显示特定标记。因此我在指令链接函数中使用AngularJS监视函数。我观察到一个包含json对象的Array（'data'）。这些也包含很长时间。 & lat。并且被存储在EPSG：4326/WGS 84.标记不在Openlayers3上显示Angularjs监视功能

我试图适应的小提琴：OpenLayers 3 - draw multiple lines/paths based on coordinates

在的console.log我可以看到的是，坐标（geometry.getFirstCoordinate（））被正确地生成，但他们不会出现在地图上。我不确定，如果因为Angular摘要而无法工作，或者它是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); 
     } 
    } 
});

}）（）;

请问是否有空缺点。我会尽我所能提供他们。

在此先感谢！

duese

来源

2014-12-13 duese

解决方案很简单：

搬出一切从$看情况除外：

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

然后，地图被printet，如你所愿。

来源

2014-12-16 17:49:58 duese

标记不在Openlayers3上显示Angularjs监视功能

回答

相关问题