Ich kann nicht esri-Faltblatt mit ReactJS zu arbeiten -> basemapLayer undefinierter

Question

Nach npm esri-leaflet Installation und leaflet Pakete, erhalte ich die folgenden Fehler

Diese meine Karten Komponente :

import React from 'react' 
import ReactDOM , {render} from 'react-don' 

import L from 'esri-leaflet' 
// import L from 'leaflet'  <-- won't work as well 


class Map extends React.Component{ 

    componentDidMount(){ 

     let element = this.refs.mapRef 

     // let map = L.map(element).setView([-41.2858, 174.78682], 14); 
     var map = L.map(this.refs.mapRef).setView([45.528, -122.680], 13) 

     L.esri.basemapLayer("Streets").addTo(map); 

     console.log("ESRI::",L.esri); 

     var parks = L.esri.featureLayer({ 
      url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0", 
      style: function() { 
      return { 
       color: "#70ca49", 
       weight: 2 
      }; 
      } 
     }).addTo(map); 
    } 


    render(){ 
     return(
      <div> 
       <h1>Maps page</h1> 
       <div id='map' ref="mapRef" style={{height: "380px"}}></div> 
      </div> 
     ) 
    } 

} 

export default Map 

Was kann das Problem sein?

Answer 1

Installieren Sie die 1.0.0-rc.1 Version des leaflet mit npm i leaflet@1.0.0-rc.1 Befehl, esri-leaflet benötigt keine Version angeben, so dass es nur npm i esri-leaflet .Hier ist sind Ihre für die Komponente erfordert:

require('leaflet'); 
import esri from 'esri-leaflet'; 

Und dann verwenden, um die Schichten über esri und es sollte funktionieren:

esri.basemapLayer... 
esri.featureLayer...