我不能让esri-leaflet与ReactJS合作 - > basemapLayer of undefined

时间:2016-07-21 09:33:36

标签: javascript reactjs leaflet esri esri-leaflet

在安装esri-leafletleaflet软件包之后,我收到以下错误

enter image description here

这是我的地图组件:

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

可能是什么问题?

1 个答案:

答案 0 :(得分:3)

使用1.0.0-rc.1命令安装leaflet npm i leaflet@1.0.0-rc.1版本,esri-leaflet不需要指定版本,因此它只是npm i esri-leaflet。您对组件的要求:

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

然后通过esri使用图层,它应该可以工作:

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