0

ユーザーの操作に応じて、Openlayers マップに特定のマーカーを表示したいと考えています。そのため、AngularJS の watch 関数をディレクティブ リンク関数で使用します。json オブジェクトを含む配列 (「データ」) を観察します。これらには long も含まれます。& 緯度 EPSG:4326/WGS 84 に保存されます。

私は次のフィドルを適応させようとしました: OpenLayers 3 - 座標に基づいて複数の線/パスを描画します

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 に答える