Как я могу получить экземпляр leaflet.js, используя только объект DOM?

Question

Я сейчас создаю пользовательскую привязку Knockout.js для обработки рисования полигонов. В этом случае Knockout API дает мне только ссылку на объект DOM для доступа ко всему, что мне нужно обновить. Однако, похоже, что по замыслу leaflet.js хочет, чтобы пользователь сохранил экземпляр карты в своей реализации. У меня нет такой возможности.

Попытка этого дала мне ошибку: var existingMap = L.map('aMapIDGoesHere')

И ошибка была: map already initialized,

В любом случае я могу использовать элемент DOM или идентификатор элемента для доступа к экземпляру карты?

По запросу здесь есть пользовательская привязка, обратите внимание, что она находится в стадии разработки:

ko.bindingHandlers.leafletDraw = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var map = L.map(element).setView([40, -90], 3);
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'OSM',
        minZoom: 2
    }).addTo(map);

    // Initialise the FeatureGroup to store editable layers
    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    // Initialise the draw control and pass it the FeatureGroup of editable layers
    var drawOptions = {
      edit: {
        featureGroup: editableLayers,
        remove: false
      },
      draw: {
        polyline: false,
        circle: false,
        marker: false,
        polygon: {
          allowIntersection: false,
          showArea: true
        }
      }
    }
    var drawControl = new L.Control.Draw(drawOptions);
    map.addControl(drawControl);

    // when a shape is first created
    map.on('draw:created', function (e) {
      var shapeString = $.map(e.layer._latlngs, function(pair) { return pair.lng.toString()+"::"+pair.lat.toString(); }).join(";;;");
      var value = valueAccessor();
      if (ko.isObservable(value)) {
        value(shapeString);
      }

      editableLayers.addLayer(e.layer);

      drawControl.removeFrom(map);
      drawOptions.draw.polygon = false;
      drawOptions.draw.rectangle = false;
      var editControl = new L.Control.Draw(drawOptions);
      map.addControl(editControl);
    });

    // handle when a shape is edited
    map.on('draw:edited', function (e) {
      var editedLayer = e.layers._layers[Object.keys(e.layers._layers)[0]];
      var shapeString = $.map(editedLayer._latlngs, function(pair) { return pair.lng.toString()+"::"+pair.lat.toString(); }).join(";;;");
      var value = valueAccessor();
      if (ko.isObservable(value)) {
        value(shapeString);
      }
    });
  },
  update: function(element, valueAccessor) {
    // need to figure this out since we can't access leaflet params from 
  }
};

Специальное примечание Вы заметите, что я конвертирую точки в объединенную строку. Это необходимо в настоящее время.

Answer 1

Если вы уверены, что DOM-элемент не будет удален, вы можете просто добавить его в качестве вложенного свойства в сам DOM-элемент. Вот обработчик привязки, использующий код на первой странице листовки для настройки карты листовки:

ko.bindingHandlers.leaflet = {
    init: function(element, valueAccessor){
        var map = L.map(element);
        element.myMapProperty = map;
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    },
    update: function(element, valueAccessor){
        var existingMap = element.myMapProperty;
        var value = ko.unwrap(valueAccessor());
        var latitude = ko.unwrap(value.latitude);
        var longitude = ko.unwrap(value.longitude);
        var zoom = ko.unwrap(value.zoom);
        existingMap.setView([latitude, longitude], zoom);
    }
};

Чтобы использовать обработчик привязки, вы должны просто выполнить привязку следующим образом:

<div data-bind="leaflet: { latitude: latitudeProperty, longitude: longitudeProperty, zoom: zoomProperty }"></div>

Просто убедитесь, что вы также разработали div чтобы обеспечить его высоту и ширину. Я написал jsfiddle, который использует вышеупомянутую листовку bindingHandler, где вы можете попробовать это.

Я тестировал этот jsfiddle только в Internet Explorer 11, Firefox 26.0 и Firefox 27.0.1.

Answer 2

Отмечая , что в очень ограниченных обстоятельствах это может быть решением: /questions/34096288/najti-obektyi-kartyi-leaflet-predstavlennyie-na-stranitse-bez-ssyilki-na-peremennuyu/55403635#55403635

window[Object.keys(window).find(key => key.substr(0,3) === "map")];

Прочтите мой исходный пост, чтобы узнать о его хрупкости и ограничениях, но подумал, что это может быть кому-то полезно. Благодарность!