javascript - 使用 Angular-leaflet-directive 的 Leaflet Curve (Bézier)

Question

我在我的 AngularJS 应用程序中使用angular-leaflet-directive来显示 Leaflet 地图。此时我正在玩弄路径——在两点之间画线。这很好用，但此时它被渲染为一条直线。我想要一条平滑的贝塞尔曲线。我在 Leaflet 站点Leaflet.Curve和Leaflet.Canvas-Flowmap-Layer上找到了 2 个插件，但没有一个具有 AngularJS 实现。

问题：有没有人将它集成到 angular-leaflet-directive 中？如果是这样，你能指点一下如何做到这一点吗？我看过代码，但我不知道如何开始。当然，我在 Google 上搜索过，但一无所获。

标签： javascriptangularjsleafletbeziercurve

Answer 1

您需要搜索“如何将自定义控件添加到 angular-leaflet-directive”。

你可以在这里找到很多样本

<script>
    var app = angular.module("demoapp", ["leaflet-directive"]);
    app.controller('LayersOverlaysMarkerclusterController', [ '$scope', function($scope) {
        angular.extend($scope, {
            ripoll: {
                lat: 42.20133,
                lng: 2.19110,
                zoom: 8
            },
            layers: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cycle: {
                        name: 'OpenCycleMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    }
                },
                overlays: {
                    hillshade: {
                        name: 'Hillshade Europa',
                        type: 'wms',
                        url: 'http://129.206.228.72/cached/hillshade',
                        visible: true,
                        layerOptions: {
                            layers: 'europe_wms:hs_srtm_europa',
                            format: 'image/png',
                            opacity: 0.25,
                            attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
                            crs: L.CRS.EPSG900913
                        }
                    },
                    cars: {
                        name: 'Cars',
                        type: 'markercluster',
                        visible: true
                    }
                }
            },
            markers: {
                m1: {
                    lat: 42.20133,
                    lng: 2.19110,
                    layer: 'cars',
                    message: "I'm a moving car"
                },
                m2: {
                    lat: 42.21133,
                    lng: 2.18110,
                    layer: 'cars',
                    message: "I'm a car"
                },
                m3: {
                    lat: 42.19133,
                    lng: 2.18110,
                    layer: 'cars',
                    message: 'A bike!!'
                },
                m4: {
                    lat: 42.3,
                    lng: 2.16110,
                    layer: 'cars'
                },
                m5: {
                    lat: 42.1,
                    lng: 2.16910,
                    layer: 'cars'
                },
                m6: {
                    lat: 42.15,
                    lng: 2.17110,
                    layer: 'cars'
                }
            }
        });
        $scope.move = function() {
            $scope.markers.m1.lng = $scope.markers.m1.lng + 0.1;
        }
    } ]);
</script>