具有开放层的 Angular JS [关闭]答案

【问题标题】：Angular JS with Open Layers [closed]具有开放层的 Angular JS [关闭]
【发布时间】：2014-06-18 10:53:44
【问题描述】：

我需要创建一个具有管理所有开放层标记的服务的控制器。

我认为有些应用程序基于 Angular 并使用开放层。但是我找不到真实的例子。

有人可以帮我找到这种方法的好例子吗？

【问题讨论】：

我对 angularjs 一无所知，但请注意：标记在 OpenLayers 中已弃用，请改用带有 externalGraphic 的 OpenLayers.Feature.Vector。
你检查了吗stackoverflow.com/questions/21410284/…

标签： angularjs openlayers

【解决方案1】：

Azimuth 项目是我认为最先进的角度层和开放层（或传单）的集成。

但是... 创建自定义指令来显示地图并侦听范围对象的更改以便在地图上绘制它们并不难。这是我为我的另一个 SO 问题创建的 plukr，但它向您展示了如何创建基本地图：http://plnkr.co/edit/0tXsWS0DXtl37jV8GywI?p=preview

app.directive('tchOlMap', function () {

    var MAP_DOM_ELEMENT_ID = 'tchMap';

    return {

        restrict: 'E',

        replace: true,
        template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height"></div>',

        link: function postLink(scope, element, attrs) {
            var map = new OpenLayers.Map(MAP_DOM_ELEMENT_ID);
            map.addLayer(new OpenLayers.Layer.OSM());
            map.setCenter(new OpenLayers.LonLat(3, 47).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 5);
        }
    }

});

您只需要注意链接函数中的范围对象，并相应地在地图上进行绘制。

【讨论】：

【解决方案2】：

请查看此https://github.com/tombatossals/angular-openlayers-directive

这里我们有一组使用这个 Marker 自定义图标的例子

【讨论】：