редактируемый листок ограничивает рисование определенной областью

В Leaflet.Editable я хочу, чтобы мои клиенты могли рисовать только в определенной области/ границы.

на самом деле я пытаюсь ограничить их (90, -90, 180, -180) границами карты.

maxBounds: [[-90, -180], [90, 180]]

введите здесь описание изображения введите здесь описание изображения Мне нигде ничего не удалось найти, и кажется, что я что-то упускаю.

ДЕМО-ПРОГРАММА CODEPEN

пожалуйста помоги.


РЕДАКТИРОВАТЬ:

ось Y блокируется правильно, и мышь не может растягивать фигуру за пределы верхней и нижней части.

проблема в оси X (как видно на картинках)

на данный момент я решил это с помощью проверки после сохранения и очистки формы, если она выходит за пределы карты (ПЛОХОЙ ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ). мне нужно ограничение мыши, как это делает ось y.


person Mike    schedule 01.02.2017    source источник
comment
Можете ли вы установить максимальные границы на самой карте?   -  person approxiblue    schedule 08.02.2017
comment
я сделал, и это не ограничивает выход формы за пределы.   -  person Mike    schedule 09.02.2017
comment
Мне удалось придумать код, который предотвращает рисование и перемещение полилиний и многоугольников за пределы границ, возможно, кто-то может расширить и улучшить его: plnkr.co/edit/w64aeCXGMt7odCmM79E7?p=preview Не работает должным образом с прямоугольниками и кругами, маркеры также можно перетаскивать   -  person chrki    schedule 10.02.2017


Ответы (1)


Не зная вашего варианта использования (почему карта всего мира??) Самым быстрым и простым решением было бы просто установить minZoom карты на что-то немного выше, например, я обнаружил, что minZoom: 5 было достаточно, за исключением случаев, когда карта была действительно короткий и очень широкий (что редко бывает в большинстве приложений, которые я видел).

Но реальное исправление заключается в написании собственных пользовательских переопределений для перетаскивания маркеров и фигур.

Согласно документации API, плагин L.Editable позволяет переопределить куча вещей, включая класс VertexMarker через map.editTools.options.vertexMarkerClass.

Исправлена ​​кодовая ручка: http://codepen.io/anon/pen/GrPpRY?editors=0010

Этот фрагмент кода, который позволяет вам ограничивать долготу для перетаскивания маркеров вершин, исправляя значения ниже -180 и выше 180:

// create custom vertex marker editor
var vertexMarkerClass = L.Editable.VertexMarker.extend({
  onDrag: function(e) {
    e.vertex = this;
    var iconPos = L.DomUtil.getPosition(this._icon),
      latlng = this._map.layerPointToLatLng(iconPos);

    // fix out of range vertex
    if (latlng.lng < -180) {
      e.latlng.lng = latlng.lng = -180;
      this.setLatLng(latlng);
    }
    if (latlng.lng > 180) {
      e.latlng.lng = latlng.lng = 180;
      this.setLatLng(latlng);
    }

    this.editor.onVertexMarkerDrag(e);

    this.latlng.update(latlng);
    this._latlng = this.latlng; // Push back to Leaflet our reference.
    this.editor.refresh();
    if (this.middleMarker) this.middleMarker.updateLatLng();
    var next = this.getNext();
    if (next && next.middleMarker) next.middleMarker.updateLatLng();
  }
});

// attach custom editor
map.editTools.options.vertexMarkerClass = vertexMarkerClass;

Я не писал код для перетаскивания фигуры целиком (в данном случае прямоугольника). Хотя исправление VertexMarker должно устранять все виды перетаскивания вершин, вам необходимо переопределить обработчик drag каждой фигуры, чтобы правильно ограничить границы. И если границы превышены, обрежьте фигуру соответствующим образом. Как было указано, Leaflet уже делает это для широты, но поскольку Leaflet позволяет обернуть карту по горизонтали, у вас есть основная проблема. Использование rec.on("drag") для исправления границ, когда они пересекают вашу минимальную/максимальную долготу, является единственным способом решить эту проблему. В основном это то же самое решение, которое я изложил для vertexMarkerClass - фактический код, оставленный в качестве упражнения для прилежного читателя.

person nothingisnecessary    schedule 12.02.2017
comment
chrki, похоже, разобрался с перемещением фигур в целом. Если вы объедините это решение с моим решением для перетаскивания маркеров вершин, вы должны получить то, что ищете. - person nothingisnecessary; 12.02.2017
comment
да, это, кажется, решает проблему (перетаскивание никогда не было частью моего проекта, это было в демо по ошибке) .. мне просто нужно выяснить, как это сделать для полигонов, но я уверен, что это должно быть точно так же. попробую проследить. спасибо :) - person Mike; 12.02.2017
comment
codepen.io/mikila85/pen/dNwpxM?editors=0010, если у вас есть момент, чтобы посмотреть на это: при добавлении это не работает только при редактировании (посмотрите на кнопку для добавления фигуры слева) - person Mike; 12.02.2017
comment
Автор плагина хорошо разрешил переопределять классы. Я рекомендую посмотреть исходный файл .js плагина, потому что вы также можете копировать и изменять/переопределять методы для добавления точек, ищите L.Editable.PathEditor = L.Editable.BaseEditor.extend, вам, вероятно, также нужно исправить методы как addVertexMarker, но на самом деле плагин, вероятно, должен решить эту проблему, вы можете связаться с фактическим автором на github и сообщить об ошибке или запросе функции - я не против предложить небольшую помощь, но плагин нуждается в обширных исправлениях, чтобы охватить все случаи - person nothingisnecessary; 12.02.2017