angular-leaflet-directive добавить прямоугольник вокруг маркера

У меня есть карта-листовка с маркером. Сбоку у меня есть форма, в которой я могу указать размер (в метрах) квадратного поля, которое я хотел бы показать на карте при отправке формы.

Я попытался воспроизвести приведенный здесь пример http://leafletjs.com/reference.html#rectangle в угловом, но не работает.

// define rectangle geographical bounds
var extent = 100; // metres
var bounds = [
    [markerLat-extent/2, markerLon-extent/2], 
    [markerLat+extent/2, markerLon+extent/2]
];

var map = leafletData.getMap('mymap');

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

Я считаю, что делаю ряд ошибок. Прежде всего, широта/долгота в границах не должны смешиваться с протяженностью, выраженной в метрах. Во-вторых, я получаю сообщение об ошибке «t.addLayer не является функцией».

Вот что я делаю в контроллере Angular, чтобы запустить карту:

angular.extend($scope, {
    center : {
        lat: latitudeUK,
        lng: longitudeUK,
        zoom: 5
    },
    defaults: {
        scrollWheelZoom: false
    },
    tiles: {
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        options: {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    },
    markers: {
        pin: {
            lat: startMarkerLatitude,
            lng: startMarkerLongitude,
            message: "Drag me to change center of the rectangle",
                focus: true,
                draggable: true
            }
        }
    }
);

$scope.controls = {
    scale: {
        position: 'topleft',
        metric: true
    }
};

На странице html у меня есть простой вызов:

<leaflet id="mymap" center="center" controls="controls" tiles="tiles" markers="markers"></leaflet>

Что мне не хватает? Спасибо вам за ваши предложения!

-- ОБНОВЛЕНИЕ --

Мне удалось добавить фигуры на карту. В случае круга я могу сделать следующее:

leafletData.getMap('mymap').then(function(map) {

    // Circle
    var circleLocation = new L.LatLng(markerLat, markerLon);
    var circleOptions = {
        color: 'blue'
    };
    var shape = new L.Circle(circleLocation, extent, circleOptions);
    map.addLayer(newShape);
});

Чего я до сих пор не могу сделать, так это правильно добавить прямоугольник с учетом его центра и длины сторон. Похоже, проблема заключается в вычислении ограничивающей рамки прямоугольника.

Я разместил вопрос как отдельный здесь, поэтому он может быть полезно проверить и этот вопрос.


person user1472709    schedule 04.02.2016    source источник
comment
пнк был бы полезен   -  person Stepan Suvorov    schedule 04.02.2016