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

Question

我正在使用 angular-leaflet-directive in my AngularJS application to show Leaflet maps. At this time I'm playing around with paths - drawing lines between two points. This is working great, but at this time it is rendered as a straight line. I want a smooth Bézier curved line. I've found 2 plug-ins on the Leaflet site Leaflet.Curve and Leaflet.Canvas-Flowmap-Layer，但是 none 有一个 AngularJS 实现。

问题：是否有人将其整合到 angular-leaflet-directive 中？如果是这样，你能给出一些指示如何做到这一点吗？我看过代码，但我不知道如何开始。当然，我用 Google 搜索了一下，但一无所获。

Answer 1

您需要搜索 "How to add a custom control to angular-leaflet-directive".

你可以找到很多样本here

<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>

Answer 2

sgrillon 给出的答案非常有用，并且深入了解了 Leaflet 的扩展机制是如何工作的。对于正在搜索集成 Leaflet.Bezier.js 的未来读者，这些是我所做的事情。

1) 将控件标签添加到您的 Leaflet 地图

2) 扩展地图并实例化自定义控件 - 在我的示例中 L.Bezier

angular.extend($scope, {
  center: {
    lat: 50.653657,
    lng: 4.383432,
    zoom: 7
  },
  layers: {
    baselayers: {
      xyz: {
        name: 'OpenStreetMap (XYZ)',
        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        type: 'xyz',
        layerOptions: {
          showOnSelector: false
        }
      }
    },
    overlays: {}
  },
  paths: {},
  markers: {},
  controls: {
    custom: new L.bezier({
      path: [
        []
      ]
    })
  },
  defaultIcon: {},
  defaults: {
    scrollWheelZoom: true,
    minZoom: 7,
    maxZoom: 14
  }
});

在应该画曲线的地方，新建一个L.bezier的实例，添加到自定义控件中。

// create bezier curved path
var bezier = new L.bezier({
  path: [
    [{
        lat: operator.geometry.coordinates[1],
        lng: operator.geometry.coordinates[0]
      },
      {
        lat: selectedController.geometry.coordinates[1],
        lng: selectedController.geometry.coordinates[0]
      }
    ]
  ],

  icon: {
    path: "images/icons/car.png"
  }
}, dash_straight);

$scope.controls.custom = bezier;

有效！

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

Leaflet Curve (Bézier) using Angular-leaflet-directive

javascript

bezier

curve

angularjs

leaflet