प्रतिक्रिया-MapBox-जीएल में GeoJSON से बहुभुज बनाते हुए

वोट
3

मैं द्वारा लिखित प्रतिक्रिया के अनुकूल आवरण के साथ काम करने की कोशिश कर रहा हूँ MapBox जीएल के लिए uber टीम

अगर किसी को भी सफलतापूर्वक अपने एपीआई के साथ एक GeoJSON स्रोत से बहुभुज सुविधाओं प्रदान की गई है मैं सोच रहा हूँ। यह कहा गया है कि एक स्रोत विकल्प विशेषता पर उपलब्ध है <Layer/>घटक:

sourceOptions : विकल्प वस्तु इस्तेमाल किया वस्तु के लिए विलय कर जब GeoJSONSource विधि बुला

के लिए MapBox एपीआई के बाद geoJsonSource , मैं निम्नलिखित कोशिश कर रहा हूँ और सोच रहा है ताकि इसे प्रस्तुत करने के लिए प्राप्त करने के लिए क्या करने की जरूरत और क्या:

import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from ../node_modules/react-mapbox-gl/dist;
import logo from './logo.svg';
import './App.css';

let containerStyle = {
    height: 100vh,
    width: 100vw
};

const accessToken = _removed for safety_

class App extends Component {

    _polygonClicked = ({ feature }) => {
    console.log(Polygon clicked, feature.geometry.coordinates);
    };

    render() {
        return (
        <div className=App>
            <div className=App-header>
              <img src={logo} className=App-logo alt=logo />
              <h2>Welcome to React</h2>
            </div>
            <ReactMapboxGl
                style={mapbox://styles/mapbox/streets-v8}
                center={[11.956511272000057,10.095463399000039]}
                zoom={[11]}
                accessToken={accessToken}
                containerStyle={containerStyle}>
                <Layer
                    type=fill
                    paint={{ fill-color: #3bb2d0, fill-opacity: .5 }}
                    id=testing
                    sourceOptions={'religious',{
                        type: 'geojson',
                        data:'../small_poly/bridges.geojson'
                        }}
                    sourceId={'religious'}>
                </Layer>

            </ReactMapboxGl>
        </div>
    );
    }
}

export default App;

29/08/2016 को 20:40
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
3

तो, मैं अपने का उपयोग कर समाप्त हो गया onStyleLoadपर संपत्ति <MapboxGl />एक समारोह जो मूल MapBox जीएल एपीआई रिटर्न तक पहुँचने के लिए घटक। समाधान सही से दूर है लेकिन यह मेरी अंतर्निहित सवाल का जवाब है। मैं यह तो अब बचने की तरह काम करता है की तरह लगता है।

मैं अपनी दस्तावेज़ीकरण की इस पंक्ति का पालन किया:

मूल MapBox API उपयोग संपत्ति onStyleLoad का उपयोग करने के लिए, कॉलबैक फ़ंक्शन, पहली बार एक तर्क के रूप में नक्शे वस्तु प्राप्त होगा तो आप MapBox जीएल एपीआई का उपयोग कर अपने स्वयं के तर्क जोड़ सकते हैं।

कोड इस तरह देखा:

class App extends Component {

    componentWillMount(){
        this.setState({
            center : [138.6000, -34.9286]
        })
    }

    _polygonClicked = ({ feature }) => {
    console.log("Polygon clicked", feature.geometry.coordinates);
    };

    _onStyleLoad = (map, event) => {
        console.log("map", map, "event: ", event, this.refs.map)
        map.addSource("16MAR13-FP-TOMNOD", {
            type: 'vector',
            tiles: ['https://s3.amazonaws.com/tomnod-vector-tiles/16MAR13-FP-TOMNOD/{z}/{x}/{y}']
        })
        map.addLayer({
            "id": "16MAR13-FP-TOMNOD",
            "type": "line",
            "source": "16MAR13-FP-TOMNOD",
            "source-layer": "16MAR13-FP-TOMNOD",
            "layout": {
                "visibility": "visible"
            },
            "paint": {},
            "interactive": true
     });
    }

    _onClick = () => {
        this.setState({
            center : [110,23]
        })
    }

    render() {
        return (
        <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
            </div>
            <ReactMapboxGl
                style={"mapbox://styles/mapbox/streets-v8"}
                center={this.state.center}
                zoom={[13]}
                accessToken={accessToken}
                containerStyle={containerStyle}
                onStyleLoad={this._onStyleLoad}
                onClick={this._onClick}
                ref='map'>
            </ReactMapboxGl>
        </div>
    );
    }
}

export default App
31/08/2016 को 14:42
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more