0

我想根据用户交互在 Openlayers 地图上显示特定标记。因此，我在指令链接函数中使用了 AngularJS 监视函数。我观察到一个包含 json 对象的数组（“数据”）。这些也包含长。& 纬度 并存储在 EPSG:4326/WGS 84 中。

我试图适应：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);
        }
    }
});

})();

请问有没有开放的点。我会尽我所能提供给他们。

提前致谢！

应酬

4

1 回答 1

0

解决方案很简单：

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

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

然后地图会如您所愿地打印出来。

于 2014-12-16T17:49:58.613 回答