map.addLayer (markerClusters) ist keine Funktion

Question

ich diesen Fehler:

map.addLayer(markerClusters) is not a function

in meiner markerClusters da ich die folgenden Pakete aktualisiert:

"leaflet": "^0.7.7", 
"leaflet.markercluster": "^0.5.0", 
"react-leaflet": "^0.12.3", 
"react-leaflet-cluster-layer": "0.0.3", 
"react-leaflet-control": "^1.1.0", 

zu

"leaflet": "^0.7.7", 
"leaflet.markercluster": "^1.0.3", 
"react-leaflet": "^1.1.6", 
"react-leaflet-control": "^1.4.0", 
"react-leaflet-cluster-layer": "0.0.3", 

Ich brauche dieses Update für eine andere Karte auf meiner Seite, also möchte ich nicht die alten Versionen verwenden. Hat jemand eine Idee, wie man das löst?

Ich habe gerade festgestellt, dass auf SO, dass Karte ist keine globale Variable, aber wie definiert ist, ist es verfügbar. Googeln hat auch nichts gebracht, was von Nutzen ist.

Vielen Dank im Voraus!

Hier ist meine MarkerClusters.js Datei:

import { Component, PropTypes } from 'react'; 
import Leaflet from 'leaflet'; 
import 'leaflet.markercluster'; 
import styles from './MarkerCluster.scss'; 
import markerDefaultIcon from '../../../assets/images/marker_default.png'; 

export default class MarkerCluster extends Component { 

    static propTypes = { 
     map: PropTypes.object.isRequired, 
     features: PropTypes.array 
    } 

    componentDidMount() { 
     this.createMarkerClusters(this.props);  
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.features !== this.props.features) { 
      this.createMarkerClusters(nextProps); 
     } 
    } 

    createMarkerClusters = (props = this.props) => { 
     const { map, features } = props; 
     if (!features || !features.length) { 
      return null; 
     } 
     const markerClusters = Leaflet.markerClusterGroup({ 
      disableClusteringAtZoom: 14, 
      maxClusterRadius: 110, 
      polygonOptions: { 
       color: '#fff' 
      }, 
      iconCreateFunction(cluster) { 
       const count = cluster.getChildCount(); 
       let clusterSizeClassName = styles.small_cluster; 
       if (count > 80) { 
        clusterSizeClassName = styles.large_cluster; 
       } else if (count > 15) { 
        clusterSizeClassName = styles.mid_cluster; 
       } 
       return Leaflet.divIcon({ 
        iconSize: [45, 45], 
        className: `${styles.marker_cluster} ${clusterSizeClassName}`, 
        html: `<b class="${styles.cluster_inner}"> ${count} </b>` 
       }); 
      } 
     }); 
     const icon = Leaflet.divIcon({ 
      className: '', 
      iconSize : [48, 64], 
      iconAnchor: [9, 63], 
      html: `<img class="${styles.marker}" src='${markerDefaultIcon}'/>` 
     }); 
     features.forEach(feature => { 
      const { geometry, properties } = feature; 
      const title = properties.name; 
      const { coordinates: [lng, lat] } = geometry; 
      const marker = Leaflet.marker(new Leaflet.LatLng(lat, lng), { title, icon }); 
      marker.bindPopup(this.getPopupTemplate(properties)); 
      markerClusters.addLayer(marker); 
     }); 
     map.addLayer(markerClusters); 
     window.setTimeout(() => {    
      if (this.markerClusters) { 
       map.removeLayer(this.markerClusters); 
      } 
      this.markerClusters = markerClusters; 
     }, 300); 
    } 

    getPopupTemplate = props => { 
     const createImageHolder = image => { 
      if (!image) { 
       return ''; 
      } 
      return (
       `<div class="${styles.image}"> 
        <img src="${props.image.medium}" /> 
       </div>` 
      ); 
     } 
     return (
      `<div class="${styles.popup}"> 
       <a 
        class="${styles.link}" 
        href="/d/${props.id}" 
       > 
        <div class="${styles.title}">${props.name}</div> 
        ${createImageHolder(props.image)} 
        Buy 
       </a> 
      </div>` 
     ) 
    } 

    render() { 
     return null; 
    } 

} 

Stapelüberwachung:

Uncaught (in promise) TypeError: map.addLayer is not a function at MarkerCluster._this.createMarkerClusters (MarkerCluster.js:64) at MarkerCluster.componentWillReceiveProps (MarkerCluster.js:20) at ReactCompositeComponent.js:611 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610) at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547) at Object.receiveComponent (ReactReconciler.js:125) at Object.updateChildren (ReactChildReconciler.js:109) at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208) at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)

Answer 1

So fanden wir den Fehler:

wir das MarkerCluster Objekt in unserer Karte callte mit :

    <MarkerCluster 
         map={ this.refs.map } 
         features={ features } /> 

So this.refs.map ist das Map-Objekt des reaktiven Flugblatts, das nicht die Funktion addLayer() hat; Diese Funktion ist nur im ursprünglichen leafletElement.

so verwenden wir

map.leafletElement.addLayer();

statt

map.addLayer();