Leaflet Curve (Безье) с использованием Angular-leaflet-директивы

Question

Я использую angular-leaflet-directive в своем приложении AngularJS для отображения карт Leaflet.В это время я играю с путями - рисую линии между двумя точками.Это прекрасно работает, но в настоящее время оно отображается как прямая линия.Я хочу плавную кривую Безье.Я нашел 2 плагина на сайте Leaflet Leaflet.Curve и Leaflet.Canvas-Flowmap-Layer , но ни один из них не имеет реализации AngularJS.

ВопросКто-нибудь интегрировал это в директиву angular-leaflet?если да, можете ли вы дать некоторые советы, как это сделать?Я посмотрел на код, но я не знаю, как начать.И, конечно, я погуглил, но ничего не нашел.

Answer 1

Ответ, который дал 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;

Работает!

Answer 2

Вам нужен поиск «Как добавить пользовательский элемент управления в 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>