У меня есть карта-листовка с маркером. Сбоку у меня есть форма, в которой я могу указать размер (в метрах) квадратного поля, которое я хотел бы показать на карте при отправке формы.
Я попытался воспроизвести приведенный здесь пример 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: '© <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);
});
Чего я до сих пор не могу сделать, так это правильно добавить прямоугольник с учетом его центра и длины сторон. Похоже, проблема заключается в вычислении ограничивающей рамки прямоугольника.
Я разместил вопрос как отдельный здесь, поэтому он может быть полезно проверить и этот вопрос.