Question

我想为openlayers地图应用程序创建角度贴图指令。例如，这是example of map。

我创建了一个angularjs指令。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='map' style='width: 400px; height: 300px'></div>",            
            "link": function (scope) {              

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: "map"
                });
            }
        };
    }
})();

此示例工作正常。但我硬编码了地图元素的id名称。我希望从范围中获得id值。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='{{target}}' style='width: 400px; height: 300px'></div>",
            "scope": {
                "target": "@"
            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: target
                });
            }
        };
    }
})();

但这并没有显示地图。

Answer 1

Openlayers映射目标属性accepts 3 types：元素|字符串|未定义。

您可以将目标设置为元素[0]

但您设置了指令参数replace:true，因此使用指令映射更改。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div style='width: 400px; height: 300px'></div>",
            "replace": true,
            "scope": {

            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: element[0]
                });
            }
        };
    }
})();

Answer 2

问题是该值未绑定到范围还是地图未呈现？我尝试在plunker中重现，但这似乎按预期工作。

<强> HTML

<map target="{{id}}"></map>

<强>指令

 template: '<div id="{{target}}" style="width: 400px; height: 300px">{{target}}</div>',
 scope: {
    "target": "@"
 },
 link: function (scope) {
 }

openlayers的angularjs map指令不会获得范围值

2 个答案: